經(jīng)典CSS教程教學(xué)課件_第1頁
經(jīng)典CSS教程教學(xué)課件_第2頁
經(jīng)典CSS教程教學(xué)課件_第3頁
經(jīng)典CSS教程教學(xué)課件_第4頁
經(jīng)典CSS教程教學(xué)課件_第5頁
已閱讀5頁，還剩105頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第3章CSS技術(shù)HTML標(biāo)記的不足之處代碼繁瑣格式的一致性差可維護(hù)性差網(wǎng)頁現(xiàn)實(shí)效果缺乏動(dòng)態(tài)性與交互性當(dāng)頁上頁[下一頁[屁尾頁[結(jié)烹[近回[潤音層疊樣式表CSSCascadingStyleSheet)當(dāng)頁上頁[下一頁[屁尾頁[結(jié)烹[近回[潤音CSS的基礎(chǔ)知識(shí)CSS是為了簡化Web頁面的更新工作而誕生的,它的功能非常強(qiáng)大,它將讓網(wǎng)頁變得更加美觀,維護(hù)更加方便跟HTM,也是一種標(biāo)記語言,甚至很多屬性都來源于HIM,它也需要通過瀏覽器解釋執(zhí)行。任何懂得HTML的人都可以掌握,非常容易css(CascadingStyleSheet,層疊樣式表)技術(shù)是種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式,它是HTML功能的擴(kuò)展使網(wǎng)頁設(shè)計(jì)者能夠以更有效的方式設(shè)計(jì)出更具表現(xiàn)力的網(wǎng)頁效果。當(dāng)頁上頁[下一頁[屁尾頁[結(jié)烹[近回[潤音1.樣式表和HTML的關(guān)系●樣式表(StyleSheets)技術(shù)誕生于2019年,全稱是層疊樣式表(CascadingStyleSheets,簡稱cSS)。那什么是樣式呢?樣式其實(shí)就是格式,對網(wǎng)頁來說,像文字的大小、顏色以及圖片位置等,都是網(wǎng)頁顯示信息的樣式。那層疊又是什么意思?意思是當(dāng)我們在HTML文件中引用數(shù)個(gè)定義樣式文件(CSs文件)時(shí),若數(shù)樣式文件間所定義的樣式發(fā)生沖突,將依據(jù)層次處理樣式表是HTML的表兄弟。樣式表的產(chǎn)生是由于最初的HTML標(biāo)準(zhǔn)還不盡人意,用HTML制作網(wǎng)頁就像是用畫筆繪制一幅圖畫,只有那些對網(wǎng)頁制作癡迷而執(zhí)著的人才可能精確地實(shí)現(xiàn)預(yù)定的結(jié)果。正是在這種情況下,樣式表技術(shù)誕生了,樣式表的目的是為了“對布局、字體、背景和其他圖文效果實(shí)現(xiàn)更加精確的控頁[頁[結(jié)烹[近回[潤音HTML40版本已經(jīng)包括了樣式表的內(nèi)容。樣式表正在逐漸改變設(shè)計(jì)、制作網(wǎng)頁的方法,為網(wǎng)頁創(chuàng)新奠定了基礎(chǔ)。樣式表的宗旨就是將結(jié)構(gòu)和格式分離。樣式表將定義結(jié)構(gòu)和定義格式的兩部分相互分離,從而使網(wǎng)頁設(shè)計(jì)人員能夠?qū)W(wǎng)頁的布局施加更多的控制。HTM仍可以保持簡單明了的初衷而樣式表代碼獨(dú)立出來后則從另一角度控制網(wǎng)頁外觀利用樣式表,可以將站點(diǎn)上所有的網(wǎng)頁都指向某個(gè)CSS文件,用戶只需要修改CSS文件中的某一行,那么整個(gè)站點(diǎn)都會(huì)隨之發(fā)生改變。這樣,通過樣式表就可以將許多網(wǎng)頁的風(fēng)格格式同時(shí)更新,不用再一頁一頁地更新了。當(dāng)頁上頁[下一頁[屁尾頁[結(jié)烹[近回[潤音樣式表的基本結(jié)構(gòu)樣式表的基本結(jié)構(gòu)是怎樣的?下面通過一個(gè)簡單的樣式表實(shí)例,讓你獲得對樣式表整體性的感性認(rèn)識(shí)。首先建立一個(gè)簡單的HTML文件。<html><head<title簡單的樣式表</titles<bodybgcolor=lightblue><center><h1>樣式表<h1><p>這是一個(gè)簡單的樣式表</p></center></html>當(dāng)頁上頁[下一頁[屁尾頁[結(jié)烹[近回[潤音現(xiàn)在,給這個(gè)HTML文件加一些樣式表。只需在dy>標(biāo)簽之前插入以下代碼<styletype="text/css">hIcolor:red;font-size:35px;font-family:9W14sbackground:yellow;color:blue;font-size:25px;fontfamily:隸書}<style>這樣就已經(jīng)制作出了使用樣式表的網(wǎng)頁。從瀏覽器中打開網(wǎng)頁(當(dāng)然首先要保證瀏覽器支持樣式表),網(wǎng)頁顯示效果如下圖所示當(dāng)頁上頁[下一頁[屁尾頁[結(jié)烹[近回[潤音簡單的樣式表MicrosoftInternetExplorer機(jī)工作文輯輯E查看收藏工具(T幫助中后園,+,③團(tuán)盔搜索收藏買守媒體·樣式表這是一個(gè)常單的樣式表e完畢巴數(shù)的屯腦簡單樣式表效果當(dāng)頁上頁[下一頁[屁尾頁[結(jié)烹[近回[潤音由這個(gè)簡單的樣式表實(shí)例,可以看出個(gè)樣式表由許多樣式規(guī)則組成的,用以告訴瀏覽器怎樣去顯示頁文檔樣式表的核心是規(guī)則,樣式表的規(guī)則如下選擇符{屬性1:值1:屬性2:值2}如,hl{color:gren這個(gè)規(guī)則就是告訴瀏覽器所有標(biāo)簽<h1>和</h1>之間的文字以綠色顯示。其中h1就是選擇符,它是一個(gè)附帶

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論