HTML與CSS前臺(tái)頁面設(shè)計(jì)課件第05章 使用CSS樣式_第1頁
HTML與CSS前臺(tái)頁面設(shè)計(jì)課件第05章 使用CSS樣式_第2頁
HTML與CSS前臺(tái)頁面設(shè)計(jì)課件第05章 使用CSS樣式_第3頁
HTML與CSS前臺(tái)頁面設(shè)計(jì)課件第05章 使用CSS樣式_第4頁
HTML與CSS前臺(tái)頁面設(shè)計(jì)課件第05章 使用CSS樣式_第5頁
已閱讀5頁，還剩16頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第五章使用CSS樣式HTML與CSS前臺(tái)頁面設(shè)計(jì)本章要點(diǎn)對(duì)HTML文檔應(yīng)用樣式的方法CSS樣式代碼編寫規(guī)則CSS樣式選擇器的種類及使用第五章使用CSS樣式HTML與CSS前臺(tái)頁面設(shè)計(jì)目錄：

5.1對(duì)HTML文檔應(yīng)用樣式

5.2CSS樣式代碼編寫規(guī)則

5.3CSS樣式選擇器

5.4綜合實(shí)例5.1對(duì)HTML文檔應(yīng)用樣式1.應(yīng)用樣式的方法

當(dāng)設(shè)計(jì)好樣式之后，需要將樣式應(yīng)用到HTML文檔中，可以用下面的三種方式，將CSS應(yīng)用于HTML頁面上。

（1）內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式是將樣式寫在標(biāo)記里面的，它只對(duì)己所在的標(biāo)記起作用。內(nèi)聯(lián)樣式表用到<style>標(biāo)記。5.1對(duì)HTML文檔應(yīng)用樣式（2）內(nèi)部樣式表內(nèi)部樣式表是寫在<head></head>里面的，它只針對(duì)所在的HTML頁面有效。內(nèi)部樣式表也用到<style>標(biāo)記，寫法為：<styletype="text/css"> /*樣式規(guī)則*/</style>

（3）外部樣式表

CSS允許將所有樣式放在一個(gè)或多個(gè)以.css為結(jié)尾的外部樣式表文件中。通過將外部樣式表附加到HTML文檔上的方法可以靈活的應(yīng)用樣式。附件外部樣式表上有兩種方法?？梢枣溄铀鼈儯部梢詫?dǎo)入它們。5.1對(duì)HTML文檔應(yīng)用樣式2.應(yīng)用樣式的優(yōu)先級(jí)所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，如果遇到不同的樣式表的規(guī)則有沖突的地方，將按優(yōu)先級(jí)來確定應(yīng)用哪一個(gè)規(guī)則,內(nèi)聯(lián)樣式擁有最高的優(yōu)先權(quán)。（1）瀏覽器缺省設(shè)置（2）外部樣式表（3）內(nèi)部樣式表（4）內(nèi)聯(lián)樣式5.2CSS樣式代碼編寫規(guī)則1.樣式代碼編寫規(guī)則CSS規(guī)則由一個(gè)選擇符（selector）和一個(gè)聲明（declaration）構(gòu)成。聲明由屬性（properties）和屬性的取值（value）組成，聲明用來設(shè)置指定選擇符的樣式。 selector{property:value}

---如果需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，使用分號(hào)將所有的屬性和值分開。---為了減少樣式表的重復(fù)聲明，可以在一條樣式規(guī)則定義語句中組合若干個(gè)選擇器，每個(gè)選擇器之間用逗號(hào)（，）隔開。5.2CSS樣式代碼編寫規(guī)則2.規(guī)則的注釋在樣式表中的規(guī)則的比較多時(shí)，可以通過注釋來管理樣式表。所有的注釋都以斜杠和星號(hào)（/*）開始，以星號(hào)加斜杠結(jié)束（*/）?？梢栽趶?fù)雜和重要的樣式中使用，這樣當(dāng)以后再看以前設(shè)計(jì)的樣式表時(shí)，就知道各個(gè)規(guī)則是的作用了。5.2CSS樣式代碼編寫規(guī)則3.規(guī)則的標(biāo)志注釋對(duì)于閱讀整個(gè)樣式表很重要，但通過引入了標(biāo)志的概念可以追蹤單個(gè)規(guī)則，這對(duì)復(fù)雜的樣式表非常有用。標(biāo)志使用樣式表中不常用的字符作為注釋的起始，有助于結(jié)合文本編輯器的查找工具來檢索規(guī)則。5.2CSS樣式代碼編寫規(guī)則4.規(guī)則的排版縮進(jìn)主要是為了保證代碼的清晰可讀。在實(shí)際的使用中，可以單擊一次Tab鍵來縮進(jìn)選擇器，而單擊兩次Tab鍵來縮進(jìn)聲明和結(jié)束大括號(hào)。這樣的排版規(guī)則可以使查詢規(guī)則非常容易。這樣做可以使得即使在樣式表不斷增大的情況下，仍然可以避免混亂。5.2CSS樣式代碼編寫規(guī)則5.樣式命名的通用規(guī)則（1）命名所選用的單詞應(yīng)選擇不過于具體表示某一狀態(tài)（如顏色、字號(hào)大小等）的單詞，以避免當(dāng)狀態(tài)改變時(shí)名稱失去意義。（2）樣式CLASS名由以字母開頭的小寫字母（a-z）、數(shù)字（0-9）、下劃線（_）、減號(hào)（-）組成。（3）樣式ID名稱由不以數(shù)字開頭的小寫字母（a-z）、數(shù)字（0-9）、下劃線（_）組成。（4）模塊、類型、狀態(tài)、位置等的所使用的單詞或其縮寫，保持上面的順序，盡量保持用兩到三個(gè)單詞說清用途。5.3CSS樣式選擇器1.HTML標(biāo)記選擇器一個(gè)HTML頁面由很多不同的標(biāo)記組成，CSS中的HTML標(biāo)記選擇器用來聲明哪些標(biāo)記采用哪種CSS樣式。因此，每一種HTML標(biāo)記的名稱都可以作為相應(yīng)的標(biāo)記選擇器的名稱。

5.3CSS樣式選擇器2.CLASS選擇器

CLASS（class）選擇器是一類最常用的選擇器，它用來定義HTML頁面中需要特殊表現(xiàn)的樣式。class選擇器的名稱可以由用戶自定義，屬性和值跟HTML標(biāo)記選擇器一樣，也必須符合CSS規(guī)范，class選擇器的名稱前有一個(gè)圓點(diǎn)（.）做為前綴。如果要使用指定的class選擇器，需要在相應(yīng)的HTML標(biāo)記中，通過class=“class選擇器名字”的形式進(jìn)行聲明。5.3CSS樣式選擇器3.ID選擇器

ID（id）選擇器只能在HTML頁面中使用一次，針對(duì)性更強(qiáng)。在HTML的標(biāo)記中只需要用id屬性，就可以調(diào)用CSS中的id選擇器。id選擇器的名稱由用戶自定義，屬性和值的寫法和其他標(biāo)記選擇器一樣，但在CSS中，id選擇器的名稱前有一個(gè)“#”符號(hào)做為前綴。

5.3CSS樣式選擇器4.高級(jí)選擇器（1）偽class選擇器和偽元素選擇器偽class選擇器和偽元素選擇器，可以為文檔中非具體存在的結(jié)構(gòu)指定樣式，或者為某些元素（包括文檔本身）的狀態(tài)指定樣式，它會(huì)根據(jù)某種條件而非文檔結(jié)構(gòu)應(yīng)用樣式。表

常用的偽類5.3CSS樣式選擇器（2）交集選擇器交集選擇器由兩個(gè)選擇器組成，其結(jié)果是選中二者各自元素范圍的交集。其中第一個(gè)必須是標(biāo)記選擇器，第二個(gè)必須是class選擇器或者id選擇器。兩個(gè)選擇器之間不能有空格，必須連續(xù)書寫。p.classname{color:#339;

font-size:16px;

}5.3CSS樣式選擇器（3）后代選擇器后代選擇器可用來尋找特定元素或元素組的后代。后代選擇器是用一個(gè)用空格符隔開的兩個(gè)或更多的單一選擇器組成的字符串。后代選擇器是根據(jù)文檔中的上下文來選取元素的。兩個(gè)選擇器之間用有空格隔開。divp{ color:red;}5.3CSS樣式選擇器（4）子選擇器這個(gè)選擇器與后代選擇器的區(qū)別：子選擇器（childselector）僅是指它的直接后代，或者可以理解為作用于子元素的第一個(gè)后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇。div>p{ color:red;}5.3CSS樣式選擇器（5）屬性選擇器屬性選擇器可以根據(jù)某個(gè)屬性是否存在或?qū)傩缘闹祦韺ふ以?，因此能夠?qū)崿F(xiàn)某些非常有意思的效果?？梢哉J(rèn)為class和id選擇器其實(shí)就是屬性選擇器，只不過是選擇了class或者id的值而已。低版本的瀏覽器不支持屬性選擇器，但當(dāng)前主流的標(biāo)準(zhǔn)瀏覽器都很好的支持屬性選擇器。屬性選擇器的格式是元素后跟中括號(hào)，中括號(hào)內(nèi)帶屬性，或者屬性表達(dá)式。有簡易屬性選

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(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ǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論