html.筆記4
第四章 初識CSS
1.CSS(層疊樣式表)
2.CSS語法
選擇器{
屬性名1:屬性值1;
屬性名2:屬性值2;
}
3.引用CSS的三中方式
第一種: 行內樣式
例: <a style="color:red;">內部樣式</a>
第二種: 內部樣式
在head標簽中，寫入style標簽.
例:
<head>
......
<style type="text/css">
h1{
......
}
</style>
</head>
第三種: 外部樣式
使用步驟:
a) 創建一個以.css為後綴的文件(css文件)
b) 在html中通過link引入css文件
<link rel="stylesheet" href="css文件路徑"/>
4.基本選擇器
4.1 標簽選擇器
標簽名{}
4.2 類選擇器
.class屬性值{}
4.3 id選擇器
#id屬性值{}
5.層次選擇器
5.1 後代選擇器
父元素 子元素{}
5.2 子選擇器
父元素>子元素{}
5.3 相鄰兄弟選擇器
本元素+相鄰兄弟元素{}
5.4 通用兄弟選擇器
本元素~兄弟元素{}
6.結構偽類選擇器
E F:first-child{} //第一個子元素
E F:last-child{} //最後一個子元素
E F:nth-child(?){} // ?表示第幾個子元素,還可以使odd奇數，even偶數
E F:first-of-type{} //指定類型的第一個元素
E F:last-of-type{} //指定類型的最後一個元素
E F:nth-of-type(?){} //?表示指定類型第幾個子元素
註意:
E F:nth-child(n)在父級裏從一個元素開始查找，不分類型.
E F:nth-of-type(n)在父級裏先看類型，再看位置.
7. 屬性選擇器
E[attr] //具有屬性attr的元素
E[attr=val] //屬性attr的值是val的元素
E[attr^=val] //屬性attr的值以val開頭的元素
E[attr$=val] //屬性attr的值以val結尾的元素
E[attr*=val] //屬性attr的值包含val的元素
html.筆記4