網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式） 課件 情景8-1 CSS的語(yǔ)法、引入方式、兩個(gè)特征_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式） 課件 情景8-1 CSS的語(yǔ)法、引入方式、兩個(gè)特征_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式） 課件 情景8-1 CSS的語(yǔ)法、引入方式、兩個(gè)特征_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式） 課件 情景8-1 CSS的語(yǔ)法、引入方式、兩個(gè)特征_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式） 課件 情景8-1 CSS的語(yǔ)法、引入方式、兩個(gè)特征_第5頁(yè)
已閱讀5頁(yè)，還剩14頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作CSS的語(yǔ)法、引入方式、兩個(gè)特征授課教師：吳紀(jì)磊HTMLcsscssJavaScript目錄CONTENTS12學(xué)習(xí)目標(biāo)知識(shí)講解學(xué)習(xí)目標(biāo)01學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)01理解CSS的概念學(xué)習(xí)目標(biāo)02掌握CSS的基本語(yǔ)法學(xué)習(xí)目標(biāo)03了解CSS的引入方式學(xué)習(xí)目標(biāo)04了解CSS的兩個(gè)特征02知識(shí)點(diǎn)講解1、什么是CSS層疊樣式表(英文全稱(chēng)：Cascading

Style

Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的表現(xiàn)層的布局的語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。CSS（CascadingStyleSheet，層疊樣式表）是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，用于設(shè)置網(wǎng)頁(yè)的樣式，并允許樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種技術(shù)。它擴(kuò)展了HTML的功能，使網(wǎng)頁(yè)設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁(yè)格式。2、CSS的優(yōu)點(diǎn)格式和結(jié)構(gòu)的分離，有利于格式的重用及網(wǎng)頁(yè)的修改維護(hù)。01將格式和結(jié)構(gòu)分離：能夠?qū)W(wǎng)頁(yè)的布局、字體、顏色、背景等圖文效果實(shí)現(xiàn)更加精確的控制。02以前所末有的能力控制頁(yè)面布局：CSS只是簡(jiǎn)單的文本，使用它可以減少表格標(biāo)記、圖像用量及其他加大HTML體積的代碼。03制作體積更小、下載更快的網(wǎng)頁(yè)：利用CSS樣式表，可以將站點(diǎn)上的所有網(wǎng)頁(yè)都指向同一個(gè)CSS文件。04可以實(shí)現(xiàn)許多網(wǎng)頁(yè)同時(shí)更新：3、CSS的基本語(yǔ)法

CSS規(guī)則集（rule-set）由選擇器和聲明塊組成。在下列基本語(yǔ)法中，選擇器用于指定CSS樣式作用的HTML對(duì)象，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。其中，屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)，用英文“:”連接，多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分。語(yǔ)法格式如下：3、CSS的基本語(yǔ)法

初學(xué)者在書(shū)寫(xiě)CSS樣式時(shí)，除了要遵循CSS樣式規(guī)則，還必須注意CSS代碼結(jié)構(gòu)中的幾個(gè)特點(diǎn)。

具體如下：CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫(xiě)，屬性和值不區(qū)分大小寫(xiě)，按照書(shū)寫(xiě)習(xí)慣一般將“選擇器、屬性和值”都采用小寫(xiě)的方式。多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開(kāi)，最后一個(gè)屬性后的分號(hào)可以省略，但是，為了便于增加新樣式最好保留。如果屬性的值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。3、CSS的基本語(yǔ)法

初學(xué)者在書(shū)寫(xiě)CSS樣式時(shí)，除了要遵循CSS樣式規(guī)則，還必須注意CSS代碼結(jié)構(gòu)中的幾個(gè)特點(diǎn)。

具體如下：在編寫(xiě)CSS代碼時(shí)，為了提高代碼的可讀性，通常會(huì)加上CSS注釋。在CSS代碼中空格是不被解析的，花括號(hào)以及分號(hào)前后的空格可有可無(wú)。因此，可以使用空格鍵、Tab鍵、回車(chē)鍵等對(duì)樣式代碼進(jìn)行排版，即所謂的格式化CSS代碼，這樣可以提高代碼的可讀性。

4、引入方式內(nèi)聯(lián)樣式（行內(nèi)樣式）01即將style樣式直接寫(xiě)在html的標(biāo)簽中，這種方式只對(duì)單個(gè)元素有效，不會(huì)影響整個(gè)文件。語(yǔ)法格式如下：這是行內(nèi)樣式：<pstyle="color：red;"></p>

4、引入方式嵌入式（內(nèi)部樣式）02即在head標(biāo)簽中間增加style標(biāo)簽，并在style標(biāo)簽中寫(xiě)CSS樣式，一般放在head標(biāo)簽中，最后在body中引用。這種寫(xiě)法重用性差，有時(shí)還會(huì)導(dǎo)致HTML文檔過(guò)大，在希望某些CSS僅對(duì)某個(gè)頁(yè)面有效時(shí)，可以采用。語(yǔ)法格式如下：<styletype="text/css">p{ color:red;} </style>

4、引入方式引入外部樣式（鏈接式）03將CSS樣式寫(xiě)到外部文件中，在html頁(yè)面中使用link標(biāo)簽鏈接，一般放在head標(biāo)簽中。這種方法的優(yōu)點(diǎn)是樣式文件與HTML文檔分離，一份樣式表可以用于多個(gè)HTML文檔，重用性好。語(yǔ)法格式如下：<linkrel="stylesheet"type="text/css"href="css/box.css"/>

4、引入方式使用@import引入（導(dǎo)入外部樣式）04和鏈接式的用法相似，但必須放在<style>...</style>中。語(yǔ)法格式如下：<styletype="text/css"> @importurl("css/box.css");</style>5、CSS的兩個(gè)特征

第一個(gè)特性是“層疊”——所謂的層疊性是指多種CSS樣式的疊加,也就是說(shuō)一個(gè)HTML文檔可能會(huì)使用多CSS樣式單，細(xì)化到某元素來(lái)說(shuō)，會(huì)層疊多層樣式單，但生效的總會(huì)有一個(gè)順序。

即樣式生效優(yōu)先級(jí)如下：內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式>瀏覽器效果樣式?jīng)_突遵循的原則是就近原則——將執(zhí)行離結(jié)構(gòu)最近的樣式，樣式不沖突，就不會(huì)層疊。

例如：div{ color:red;}div{ color:blue;}</style>則后面的顏色會(huì)覆蓋前面的顏色。5、CSS的兩個(gè)特征

第二個(gè)特性是"繼承"——繼承指的是特定的CSS屬性可以從父元素向下傳遞到子元素。

例如：<head><style> div{ color:red;} </style> </head> <body> <div> <p>繼承div的顏色</p> </div></body>文字樣式屬性中color、text-開(kāi)頭的、line-開(kāi)頭的、font-開(kāi)頭的、word-space等都能夠，所有的表格屬性樣式都可以繼承；所有關(guān)于盒子模型的、定位的、布局的屬性都不能繼承。03小結(jié)小結(jié)本節(jié)

溫馨提示

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

評(píng)論

0/150

提交評(píng)論