第四章:CSS基礎
我終於來更新了，最近寫APP策劃要死了；
目錄
1.瞭解CSS的作用和優點;
- 更多排版和頁面佈局控制：可控制字號、行間距、字間距、縮排、邊距以及定位；
- 樣式和結構分離：頁面種使用的文字歌是和顏色可獨立於網頁主體（body部分）進行配置和儲存；
- 樣式可以儲存：CSS允許將樣式儲存到單獨的文件中並將其與網頁關聯。修改樣式可以不用修改網頁程式碼。
- 文件變得更小：由於歌是從文件中分離出來，因此實際文件會變得更小。
- 網站維護變得更容易：要是修改樣式，修改樣式表CSS系列就可以了。
配置css的方法：
- 內聯樣式：內聯樣式是指將程式碼直接寫入網頁的主體區域，作為HTML標籤屬性。只適合提供樣式屬性的特定元素。
- 嵌入樣式：嵌入樣式再網頁的頁頭區域（<head></head>)進行定義。應用與整個網頁文件。
- 外部樣式：外部樣式用單獨檔案編碼。網頁在頁頭區域使用link元素連結到檔案。
- 匯入樣式：匯入樣式與外部樣式相似，同樣是將包含了樣式定義的文字檔案與網頁文件連結。但是沒用#import指令將尾部樣式表匯入嵌入樣式，或匯入另一個尾部樣式表；
CSS語法基礎：
- 樣式表由規則構成，這些規則嗎，描述了要應用的樣式。每一條規則都包含一個選擇符和一個宣告 ；
- CSS樣式規則選擇符可以是HTML元素的名稱、類名或者id；
- CSS樣式規則宣告是指你要設定的CSS屬性極其值；
2.用CSS在網頁上配置顏色;
background-color屬性：配置元素背景顏色；
以下樣式規則將網頁背景配置成黃色：
<style> body{background-color: yellow;} </style>結果：
color屬性：用於配置元素的文字顏色；
以下是CSS樣式規則將網頁上的文字的顏色變成藍色；
結果：
配置背景顏色和文字色時；一個選擇符要配置多個屬性時，用分號（；）分隔不同的宣告。
以下是CSS樣式配置網頁為黃底藍字：
<style> body{color: blue; background-color: yellow; } </style>
CSS顏色語法：
CSS語法允許通過多種方式配置顏色：
- 顏色的英文名稱（英文）；
p {color:red} - 十六進位制顏色值： ‘#’ +六位十六進位制 eg：#FF0000；
-
p{color:#FF0000} - 十六進位制短顏色值：‘#’+三位十六進位制 eg： #F00；
-
p{color:#F00} - 十進位制顏色值 ： eg: rgb(225,0,0);
p{color:rgb(255, 0, 0)} - CSS3新增的HSL顏色值：色調/飽和度/亮度 eg：hsl（0， 100%， 50%）；
p{color:hsl(0, 100%, 50%);}CSS3 Color Modle不僅允許配置顏色,還允許配置顏色的透明度,這是使用RGBA(Red, Blue, Alpha)實現的.CSS3新增的還有HSLA(Hue, Saturation,Lightness, Alpha)顏色、opacity屬性以及CSS漸變背景。
3.配置內聯樣式;
內聯樣式通過HTML標記的style屬性來實現。屬性值是樣式規則宣告。每個宣告都是由屬性和值構成 ；屬性和值以冒號隔開。
以下是將<h1>標題文字設為紅色，將背景設為灰色:
<h1 style="color:red; background-color: #cccccc;">這是標題1</h1>結果：
內聯樣式不常用。它效率不高，會為網頁文件帶來額外的程式碼，而且不便於維護。但內聯樣式在某些情況下好用，比如通過內容管理系統或部落格發表一篇文章，並需要對預設樣式進行少許調整，從而更好的表達自己的想法。
4.配置嵌入式樣表;
嵌入樣式應用與整個網頁文件，這種樣式要放到網頁Head部分的<style>元素中。使用XHTML語法時<style>標記要求定義一個type屬性。要向該屬性賦值“text/css”來指定CSS MINE型別。HTML5語法中不需要type屬性。
以下時用嵌入式來設定文字背景顏色和網頁文字顏色：
<style> body{background-color: deepskyblue; color:palevioletred;} </style>結果：
嵌入式的優點：所有樣式都位於網頁的同一個位置，所以它比內聯樣式更容易維護。並且只需要為<h2>選擇符進行一次樣式編碼，兩個<h2>都會運用這個樣式。
缺點：很少會有網站只有一個網頁。在每個網頁的Hesd部分重複編碼CSS同樣時無效率和難以維護的。
5.配置外部樣式表;
外部樣式表時包含CSS樣式規則的文字檔案，使用.css副檔名。這種.css檔案通過link元素與網頁關聯。因此，多個網頁可關聯同一個.css檔案。.css檔案不包含任何HTML標記，它只包含CSS樣式規則；
外部CSS的優點：只需要在一個檔案中配置樣式。這意味著以後維護和修改會更加方便。
link元素：
link元素將外部樣式表與網頁關聯，位於網頁Head部分。時獨立標記（void標記）。link元素由三個屬性：rel、href和type；
1.rel屬性的值是“stylesheet”；
2.href屬性的值是.css檔名；
3.type屬性的值是“text/css”。 這是CSS 的MINE型別。type屬性在HTML5中可選，在XHTML中必需。
eg:用link元素將css資料夾中的learn.css檔案外聯到index.html網頁檔案：
<!--index.html檔案中的head部分--> <head> <title>Paragraph Example</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/learn.css" > </head><!--learn.css檔案中的內容被外聯--> body{ background-color: gray; color:blue; }結果：
6.CSS的class、ID和後代選擇符
class選擇符
class選擇符配置某一類CSS規則，並將其應用與網頁的一個或多個區域。配置一類樣式時，要將選擇符配置成類名。在類名前面新增句點符號（.）。類名必須以字母開頭，可包含數字、連字元和下劃線。不能有空格。
eg：將網頁文字的段落文字的文字設定成紅色：
.p{color:red}eg：也可以設計一個不是識別符號的類名，然後樣這個樣式運用於你想運用的元素裡：
.eg{color:blue;}一類樣式應用與任何元素。這是使用class屬性來做到的，例如class="eg'。 注意這時不要在類名前面新增句點。
eg：在<li>元素中運用eg類：
<li class="eg">我是測試</li>ID選擇符
用id選擇符向網頁上的單個區域應用獨特的CSS規則。class選擇符可與在網頁上多次應用，而id在每個網頁上只能應用一次。為某個id配置屬性樣式時，要在id名稱前新增#符號。id名稱可以包含字母、數字、連字號和下劃線。id名稱不能有空格。
eg：在learn.css檔案配置名為estart的id：
#estart {color:blue;}使用id屬性，即id=“estart”，可用於所有你想運用的元素
eg：將id為estart運用於<div>中：
<div id="estart">這是一個測試吶</div>後代選擇符
後代選擇符在容器（父）元素的上下文中配置一個元素。它允許為網頁上的特定區域配置CSS，同時減少class和id的數量。先列出容器選擇符（可以是元素選擇符、class、id），再列出要配置樣式的選擇符。
eg：nav中的<h2>配置成綠色：
nav h2{color:#00ff00}
為了獲得最大的相容性，要慎重選擇class和id名稱。隨著越來越熟悉CSS，會逐漸體會到後代選擇符的強大和高效，可以它配置特定上下文中的元素，同時不需要再HTML程式碼中編寫額外的class或者id。
span元素
<span>元素再網頁中定義一個上下不留空格的內斂區域。適合格式化一個包含在其他區域（比如<p>, <blockquote> , <div>）中的區域。
正常書寫<h1>和<nav>的結果：
在加入<sapn>元素以後 在CSS元素中新增margin-bottom:0 （邊距的意思）之後：
<h1><span class="companyname"> Trillium Media Design</span></h1>
<nav>
<b>
<a href="home.html">Home</a>
<a href="services.html">Services</a>
<a href="contast.html">Contact</a>
</b>
</nav>
7.理解CSSD優先順序;
- 較區域性的樣式規則優先與較全域性的元素（比如p和div）；
- 離要設計的元素越緊的樣式優先順序越高：
HTML屬性 》 內聯樣式 》 嵌入式樣式 》 外部樣式 》 瀏覽器預設值