第五章 使用css樣式
本章要點
對html文件應用樣式的方法
css樣式**編寫規則
css樣式選擇器 的種類及使用
目錄：5.1對html文件應用樣式
5.2css樣式**編寫規則
5.3css樣式選擇器
5.4樣式的優先順序
5.1 對html文件應用樣式
1.應用樣式的方法
當設計好樣式之後，需要將樣式應用到html文件中，可以用下
面的三種方式，將css應用於html頁面上。
（1）內聯樣式
內聯樣式是將樣式寫在標記裡面的， 它只對己所在的標記起作
用。內聯樣式表 用到
（3）外部樣式表
css允許將所有樣式放在乙個或多個以.css為結尾的外部樣式表檔案
中。通過將外部樣式表附加到html文件上的方法可以靈活的應用樣
們。2 .應用樣式的優先順序
所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，如果遇到不同的樣式表的規則有衝突的地方，將按優先順序來確定應用哪乙個規則,內聯樣式擁有最高的優先權。
（1）瀏覽器預設設定
（2）外部樣式表
（3）內部樣式表
（4）內聯樣式
5.2 css樣式**編寫規則
1.樣式**編寫規則
css規則由乙個選擇符（selector）和乙個宣告（declaration）構成。宣告由屬性（properties）和屬性的取值（value）組成，宣告用來設定指定選擇符的樣式。
selector
---如果需要對乙個選擇符指定多個屬性時，使用分號將所有的屬性和值分開。
---為了減少樣式表的重複宣告，可以在一條樣式規則定義語句中組合若干個選擇器，每個選擇器之間用逗號（，）隔開。
2.規則的注釋
在樣式表中的規則的比較多時，可以通過注釋來管理樣式表。
所有的注釋都以斜槓和星號（/*）開始，以星號加斜槓結束（*/）。可以在複雜和重要的樣式中使用，這樣當以後再看以前設計的樣式表時，就知道各個規則是的作用了。
3.規則的標誌
4.規則的排版
縮排主要是為了保證**的清晰可讀。在實際的使用中，可以單擊一次tab鍵來縮排選擇器，而單擊兩次tab鍵來縮排宣告和結束大括號。這樣的排版規則可以使查詢規則非常容易。
這樣做可以使得即使在樣式表不斷增大的情況下，仍然可以避免混亂。
5.樣式命名的通用規則
（1）命名所選用的單詞應選擇不過於具體表示某一狀態（如顏色、字型大小大小等）的單詞，以避免當狀態改變時名稱失去意義。
（2）樣式class名由以字母開頭的小寫字母（a-z）、數字（0-9）、下劃線（_）、減號（-）組成。
（3）樣式id名稱由不以數字開頭的小寫字母（a-z）、數字（0-9）、下劃線（_）組成。
（4）模組、型別、狀態、位置等的所使用的單詞或其縮寫，保持上面的順序，盡量保持用兩到三個單詞說清用途。
5.3 css樣式選擇器
1. html標記選擇器
乙個html頁面由很多不同的標記組成，css中的html標記選擇器用來宣告哪些標記採用哪種css樣式。因此，每一種html標記的名稱都可以作為相應的標記選擇器的名稱。
2. class選擇器
class（class）選擇器是一類最常用的選擇器，它用來定義html頁面中需要特殊表現的樣式。class選擇器的名稱可以由使用者自定義，屬性和值跟html標記選擇器一樣，也必須符合css規範，class選擇器的名稱前有乙個圓點（.）做為字首。
如果要使用指定的class選擇器，需要在相應的html標記中，通過class=「class選擇器名字」的形式進行宣告。
3. id選擇器
id（id）選擇器只能在html頁面中使用一次，針對性更強。在html的標記中只需要用id屬性，就可以呼叫css中的id選擇器。id選擇器的名稱由使用者自定義，屬性和值的寫法和其他標記選擇器一樣，但在css中，id選擇器的名稱前有乙個「#」符號做為字首。
4.高階選擇器
（1）偽class選擇器和偽元素選擇器
偽class選擇器和偽元素選擇器，可以為文件中非具體存在的結構指定樣式，或者為某些元素（包括文件本身）的狀態指定樣式，它會根據某種條件而非文件結構應用樣式。
偽類名:link
:visited
:focus
:hover
:active
(2）交集選擇器
交集選擇器由兩個選擇器組成，其結果是選中二者各自元素範圍的交集。其中第乙個必須是標記選擇器，第二個必須是class選擇器或者id選擇器。兩個選擇器之間不能有空格，必須連續書寫。
p.classname
（3）後代選擇器
後代選擇器可用來尋找特定元素或元素組的後代。後代選擇器是用乙個用空格符隔開的兩個或更多的單一選擇器組成的字串。後代選擇器是根據文件中的上下文來選取元素的。兩個選擇器之間用有空格隔開。
div p
（4）子選擇器
這個選擇器與後代選擇器的區別：子選擇器（child selector）僅是指它的直接後代，或者可以理解為作用於子元素的第乙個後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過「>」進行選擇。
div>p
（5）屬性選擇器
屬性選擇器可以根據某個屬性是否存在或屬性的值來尋找元素，因此能夠實現某些非常有意思的效果。可以認為class和id選擇器其實就是屬性選擇器，只不過是選擇了class或者id的值而已。低版本的瀏覽器不支援屬性選擇器，但當前主流的標準瀏覽器都很好的支援屬性選擇器。
屬性選擇器的格式是元素後跟中括號，中括號內帶屬性，或者屬性表示式。
有簡易屬性選擇器和精確屬性值選擇器。
5.4樣式的優先順序
層疊的重要度次序：
（1）標有!important的使用者樣式。
（2）標有!important的作者樣式。
（3）作者樣式。
（4）使用者樣式。
（5）瀏覽器/使用者**應用的樣式。
第五章 CSS美化頁面
標籤 行級層 標籤 塊級層 人生總是艱難險阻的 但是我們依舊應該繼續前行 字型樣式 font字型型別 font family 字型大小 font size 字型風格 font style 字型粗細 font weight 枯藤老樹昏鴉 小橋流水人家 古道西風瘦馬 夕陽西下 斷腸人在天涯 墨漸生微 文...
python第五章 Python學習（第五章）
記錄所有的名片字典 card list defshow menu 顯示資訊 print 50 print 歡迎使用 名片管理系統 v1.0 print print 1.新增名片 print 2.顯示全部 print 3.搜尋名片 print print 0.退出系統 print 50 defnew ...
《CSS揭秘》第五章 字型排印
在雜誌和書籍中，經常可以見到兩端對齊效果。但是在網頁設計中，兩端對齊效果很少被使用。原因是會帶來糟糕的顯示問題。在css第三版中，引入了乙個屬性hyphens none,manual,auto jsfiddle 注 使用chrome瀏覽器測試均不正常。使用safari瀏覽器測試正常 考慮如下 nam...