本文參考：W3school
CSS 簡介
簡介
- CSS 指層疊樣式表(Cascading Style Sheets)
- 樣式規定如何顯示HTML元素
- 樣式通常存放在樣式表中
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在CSS文件中
- 多樣式可層疊爲一
層疊次序
樣式表優先順序
- 內聯樣式（在 HTML 元素內部）
- 內部樣式表（位於 標籤內部）
- 外部樣式表
- 瀏覽器缺省設置
如果有多個樣式表時，瀏覽器會按上述順序進行使用樣式表，優先級高的沒有才會使用優先級低的
CSS 基礎語法
通過一個例子來介紹CSS語法
將 h1 元素內的文字顏色定義爲紅色，同時將字體大小設置爲 14 像素
h1 {color:red; font-size:14px;}
CSS 規則由兩部分組成：選擇器，聲明(可以有多個)
- 選擇器：需要改變樣式的 HTML 元素
- 聲明：由一個屬性和一個值組成，需要顯示的樣式
上面例子中CSS語句結構如下
注意： 聲明需要用花括號括起來
引號
如果值爲兩個及以上的單詞，需要給值加上引號
p {font-family: "sans serif";}
空格
空格不會影響 CSS 在瀏覽器的工作效果
一般書寫格式如下
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
選擇器分組
對選擇器進行分組使得分組的選擇器就可以共享相同的聲明
h1,h2,h3,h4,h5,h6 {
color: green;
}
繼承
- 在CSS中，，子元素將繼承最高級元素所擁有的屬性(有些瀏覽器不支持)
- 如設置body的字體爲Verdana，根據繼承網頁中所有子元素顯示的字體應該都爲Verdana
- 若不希望子元素繼承父元素的屬性，只需指定子元素對應的屬性值即可
CSS 派生選擇器
派生選擇器根據上下文關係來定義樣式
將列表中的strong元素變爲藍色，其他地方的不變
li strong {
color: blue;
}
根據上下文關係來定義樣式，無需爲 strong 元素定義特別的 class 或 id，代碼更加簡潔。
CSS id選擇器
id選擇器爲特定id的HTML元素指定樣式，id選擇器以#來定義
<p id="red_p">這個段落是紅色。</p>
#red_p {color:red;}
注意： 每個id在每個HTML中只能出現一次
id選擇器加派生選擇器
定義一個樣式給id爲sidebar中的p元素
#sidebar p {
font-style: italic;
}
定義一個樣式給id爲sidebar中的h2元素
#sidebar h2 {
font-size: 1em;
font-style: italic;
text-align: right;
}
CSS 類選擇器
類選擇器爲該類中的HTML元素指定樣式，類選擇器以.來定義
指定樣式給類爲center的元素
.center {text-align: center}
注意： 類名的第一個字符不能使用數字，Mozilla 或 Firefox識別不了。
類選擇器加派生選擇器
指定一個樣式給fancy類中的td元素
.fancy td {
color: #f60;
background: #666;
}
定義一個class爲fancy的td元素
<td class="fancy">
給該表格指定樣式
td.fancy {
color: #f60;
background: #666;
}
CSS 屬性選擇器
爲擁有指定屬性的 HTML 元素設置樣式，只需要有該屬性即可
爲所有含有title屬性的元素指定樣式
[title]
{
color:red;
}
屬性和值選擇器
爲含有title屬性且值爲t1的元素指定樣式
[title=t1]
{
border:5px solid blue;
}
爲含有title屬性且值中含爲hello的元素指定樣式(屬性值用空格分隔)
[title~=hello] { color:red; }
爲含有title屬性且值中含爲hello的元素指定樣式(屬性值用-連字符分隔)
[lang|=en] { color:red; }
| 屬性選擇器 | 作用 |
|---|---|
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 |
| [attribute$=value] | 匹配屬性值以指定值結尾的每個元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
CSS 創建
外部樣式表
-
外部樣式表可以應用多個界面
-
可以通過修改文件來改變整個網頁的外觀
-
每個頁面使用link來鏈接外部樣式表，link在文檔頭部，如下，瀏覽器會從mystyle.css 中讀取樣式聲明，並根據它來顯示文檔。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> -
樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子：
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}
內部樣式表
-
內部樣式表用於定義單個文檔的樣式
-
使用style標籤在文檔頭部定義內部樣式表，如
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
內聯樣式
-
內聯樣式將需要顯示的樣式定義在標籤內
-
內聯樣式使用標籤的style屬性，如定義元素p內聯樣式
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>