CSS學習 學習資源 http://www.csszengarden.com/ CSS語法檢查http://jigsaw.w3.org/css-validator/ 配置CSS的方法： 1.行內式 行內式通過直接設置元素的style屬性來引入css <div style="width: 100px; ...
CSS學習
--------學習資源
CSS語法檢查http://jigsaw.w3.org/css-validator/
配置CSS的方法：
1.行內式
行內式通過直接設置元素的style屬性來引入css
<div style="width: 100px; height: 100px;">行內式</div>
優點：元素的樣式簡單明瞭
缺點：代碼不易維護
2.內嵌式
通過在head標簽中加入style標簽來引入CSS
<head>
<style type="text/css">
/*樣式*/
</style>
</head>
缺點：不能被多個頁面重覆使用
3.鏈接式
通過link標簽來引入CSS文件
<head>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
優點：頁面在載入元素的同時也會載入其樣式
缺點：增加了http請求
4.導入式
通過在head標簽中加入style標簽及@import來引入CSS
<head>
<style type="text/css">
@import""
</style>
</head>
缺點：導入式會在整個頁面載入完畢後，再載入CSS文件，這樣會導致頁面在打開時，先顯示的是無樣式的頁面，閃爍一下之後，頁面才有了樣式
CSS選擇符和聲明：
CSS語法基礎
- CSS樣式規則選擇符
選擇符可以是HTML元素名稱，類名或id
- CSS樣式規則聲明
聲明是你要設置的CSS屬性（例如顏色）及其值
一個選擇符要配置多個屬性可以用分號（；）
例：body{color: blue; background-color: yellow}將網頁配置成黃底藍字
如果需要更多的顏色就可以參考http://webdevbasics.net/color的”網頁安全調色板”
body{color: #3399cc; background-color: #FFFFCC}將網頁配置成淺黃底中藍字
配置內聯CSS：
通過修改style實現
<body style=" color: #008080;">
但是如果在body內<p style="color: red">文本 </p>就會覆蓋了body的全局樣本。如果有10個段落都需要以這種方式配置，就會造成大量冗餘代碼，因此並不高效
配置嵌入CSS：
嵌入樣式應用於整個網頁文檔，這種樣式要放到網頁head部分的<style>元素中。
例子：
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
<style>
body{ background-color: #E6E6FA;color: #191970}、
h1{background-color: #AEAED4;color: #191970}
</style>
</head>
配置外部CSS：
當CSS位於網頁文檔外部的時候，CSS的靈活性與強大才真正的顯露無疑。外部樣式表是包含CSS樣式的文本文件，使用.css拓展名。這種.css文件通過link元素與網頁關聯。因此多個網頁可以關聯一個.css文件。.css文件不包含任何HTML標記----它只含CSS樣式規則
優點是只需在一個文件內配置樣式
Link元素
Link元素位於網頁的head部分，是獨立標記(void標記).link元素使用三個屬性：rel , href和type
- rel屬性的值是”stylesheet”
- href屬性的值是.css文件名
- type的屬性的值是”text/css”,這個是CSS的MIME類型。Type在HTML5中可選，但在XHTML中必須
例如
<link rel=”stylesheet” href=”color.css”>
CSS的class, ID和後代選擇符
------這些東西都要放在<style></style>里
例子 <style>
.feature{color : #FF0000;}
main p {color : #00ff00;}
#new {color: #FF00CC;}
</style>
Class選擇符:
Class選擇符配置一類CSS規則，並將其應用於網頁的一個或多個區域，配置一類樣式時，要將選擇符配置成類名。在類名前添加句點符號（.）。類名必須以字母開頭，可包含數字，連字型大小和下劃線但是不能有空格，以下代碼配置名為feature的一類樣式
.feature{color: #FF0000;}
一類的樣式可以應用於任何元素。這是使用class屬性做到的
例：<li class=”feature”>123456</li>
ID選擇符：
Class用於網頁上多次響應使用，而id在每個網頁上只能使用一次。配置id時記得在前面添加#號
#content{color:#333333;}
<div id=”content”>123456</div>
後代選擇符:
用後代選擇符在容器元素的上下文配置一個元素。
例如：將main元素中的段落配置成綠色文本
- main p {color : #00ff00;}
span元素
<span>元素在網頁中定義一個上下不留空的內聯區域。以<span>標記開頭,以</span>結尾。適合格式化一個包含在其他區域（比如<p>
,<blockquote>或<div>)中的區域。
CSS的層疊（局部優先，作用範圍越小越優先）
例如導入的.css中body { background-color: #FFFFCC（黃色）;
color: #000000（黑色）; }
但是同時又在html的head中定義
<style>
body { color: #0000FF（藍色）; }
</style>
顯示的頁面為黃底藍字
