CSS選擇器和樣式

CSS

CSS：
- 選擇器：
- - 通配符選擇器：
  - 基本選擇器：
  - - 標簽選擇器：
    - 類選擇器：
    - ID選擇器：
    - 基本選擇器的優先級別:
  - 群組選擇器:
  - 派生選擇器：
  - - 后代選擇器：
    - 子代選擇器：
    - 相鄰兄弟選擇器：
  - 屬性選擇器：
  - 錨偽類:
- 樣式：
- - 樣式優先級：
  - 常用樣式：

CSS：

CSS：層疊樣式表 (Cascading Style Sheets)，樣式定義如何顯示HTML 元素，是為了解決內容與表現分離的問題，多個樣式定義可層疊為一，樣式通常存儲在樣式表中。

選擇器：

選擇器：選擇你所需要修飾的HTML元素。

通配符選擇器：

通配符選擇器：*

*{

}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{color: red;}</style></head><body><h1>一級標簽</h1><h2>二級標簽</h2><h3>三級標簽</h3><h4>四級標簽</h4><h5>五級標簽</h5><h6>六級標簽</h6><p>今天天氣正好</p><p>風過林梢</p><span>我們正當年少</span><span>追尋幸福時光</span></body>
</html>

?
?

基本選擇器：

標簽選擇器：

直接寫標簽。

標簽{

}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{color: red;}</style></head><body><h1>一級標簽</h1><h2>二級標簽</h2><h3>三級標簽</h3><h4>四級標簽</h4><h5>五級標簽</h5><h6>六級標簽</h6><p>今天天氣正好</p><p>風過林梢</p><span>我們正當年少</span><span>追尋幸福時光</span></body>
</html>

?
?

類選擇器：

.類名{

}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.myclass{color: red;}</style></head><body><h1 class="myclass">一級標簽</h1><h2>二級標簽</h2><h3 class="myclass">三級標簽</h3><h4>四級標簽</h4><h5 class="myclass">五級標簽</h5><h6>六級標簽</h6><p>今天天氣正好</p><p>風過林梢</p><span>我們正當年少</span><span>追尋幸福時光</span></body>
</html>

?
?

ID選擇器：

#ID名{

}

id唯一，不能重復！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#myid{color: red;}</style></head><body><h1 id=myid>一級標簽</h1><h2>二級標簽</h2><h3>三級標簽</h3><h4>四級標簽</h4><h5>五級標簽</h5><h6>六級標簽</h6><p>今天天氣正好</p><p>風過林梢</p><span>我們正當年少</span><span>追尋幸福時光</span></body>
</html>

?
?

基本選擇器的優先級別:

ID選擇器 > 類選擇器 > 標簽選擇器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{color: red;}.myclass{color: green;}#myid{color: blue;}</style></head><body><p id="myid" class="myclass">今天陽光正好</p><p class="myclass">微風吹過林梢</p></body>
</html>

?
?

群組選擇器:

標簽之間用英文逗號隔開。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">h1,p,span{color: red;}</style></head><body><h1>一級標簽</h1><h2>二級標簽</h2><h3>三級標簽</h3><h4>四級標簽</h4><h5>五級標簽</h5><h6>六級標簽</h6><p>今天天氣正好</p><p>風過林梢</p><span>我們正當年少</span><span>追尋幸福時光</span></body>
</html>

?
?

派生選擇器：

派生選擇器又稱：上下文關系選擇器。
?
通過依據元素在其位置的上下文關系來定義樣式。

后代選擇器：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">ul a{color: red;}</style></head><body><ul><li><a href="#">超鏈接1</a></li><li><a href="#">超鏈接2</a></li><li><a href="#">超鏈接3</a></li></ul><ul><li><a href="#">超鏈接4</a></li><li><a href="#">超鏈接5</a></li><li><a href="#">超鏈接6</a></li><li><a href="#">超鏈接7</a></li></ul><a href="#">超鏈接8</a><a href="#">超鏈接9</a><a href="#">超鏈接10</a></body>
</html>

子代選擇器：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">li>a{color: red;}</style></head><body><ul><li><a href="#">超鏈接1</a></li><li><a href="#">超鏈接2</a></li><li><a href="#">超鏈接3</a></li></ul><ul><li><a href="#">超鏈接4</a></li><li><a href="#">超鏈接5</a></li><li><a href="#">超鏈接6</a></li><li><a href="#">超鏈接7</a></li></ul><a href="#">超鏈接8</a><a href="#">超鏈接9</a><a href="#">超鏈接10</a></body>
</html>

?
?

相鄰兄弟選擇器：

注意：效果作用在后者。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*a和a挨在一起的，作用于后者的a*/a+a{color: red;}</style></head><body><ul><li><a href="#">超鏈接1</a></li><li><a href="#">超鏈接2</a></li><li><a href="#">超鏈接3</a></li></ul><ul><li><a href="#">超鏈接4</a></li><li><a href="#">超鏈接5</a></li><li><a href="#">超鏈接6</a></li><li><a href="#">超鏈接7</a></li></ul><a href="#">超鏈接8</a><a href="#">超鏈接9</a><a href="#">超鏈接10</a></body>
</html>

?
?

屬性選擇器：

單個屬性：
input[placeholder]{color: red;}
?

單個屬性+值：
input[placeholder=“請輸入賬號…”]{color: red;}
?

多個屬性：
input[name][placeholder]{color: red;}
?

多個屬性+值：
input[name=“name”][type=“text”]{color: red;}

?
?

錨偽類:

監聽超鏈接的各種狀態（未訪問、已訪問、鼠標懸停、鼠標按下）。

a:link {color: #FFCCFF} ------>未訪問的鏈接
a:visited {color: #66FF66} ------> 已訪問的鏈接
a:hover {color: #33FFFF} ------>鼠標移動到鏈接上
a:active {color: #000033} ------> 選定的鏈接

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">a:link {color: #FFCCFF}		/* 未訪問的鏈接 */a:visited {color: #66FF66}	/* 已訪問的鏈接 */a:hover {color: #33FFFF}	/* 鼠標移動到鏈接上 */a:active {color: #000033}	/* 選定的鏈接 */</style></head><body><a href="http://www.jd.com">京東</a></body>
</html>

?
?

樣式：

分類：

內部樣式表

外部樣式表

行內樣式表

樣式優先級：

行內樣式 > 內部樣式或外部樣式（內外部樣式表要看加載順序）。

為什么行內樣式最優先呢？
? ? ? ?因為行內樣式最后加載。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--外部樣式表--><link rel="stylesheet" type="text/css" href="../../css/new_file.css"/><!--內部樣式表--><style type="text/css">p{color: red;}</style></head><body><!--行內樣式--><p style="color: blue;">今天天氣真好</p></body>
</html>

?
?

常用樣式：

1.字體屬性

? ? ? ? ? font-family(字體)

? ? ? ? ? font-size（大小）

? ? ? ? ?font-style（風格）

? ? ? ? ? ? ? ? ?---- normal標準樣式

? ? ? ? ?? ? ? ? ---- italic斜體

? ? ? ? ? ? ? ? ? ---- oblique傾斜

? ? ? ? ? ? ? ? ? ---- inherit從父類繼承的字體樣式

? ? ? ? ?font-weight(字體加粗)

? ? ? ? ?? ? ? ?----normal標準樣式

? ? ? ? ?? ? ? ?----bold粗體

? ? ? ? ?? ? ? ?----bolder更粗

? ? ? ? ? ? ? ? ?----lighter更細

? ?

2.文本屬性

? ? ? ? ?letter-spacing(字母間隔)

? ? ? ? ?text-decoration（劃線修飾）

? ? ? ? ? text-align（文本對齊方式）

? ? ? ? ?text-indent(文本縮進)

? ? ? ? ?line-height（行高）

?

3.背景

? ? ? ? ? background-color

? ? ? ? ? background-image

? ? ? ? ?background-repeat

?

4.邊框

? ? ? ? ? border-bottom

? ? ? ? ? solid(實線)

? ? ? ? ?dashed(虛線)

? ? ? ? ?double(雙實線)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{/*設置字體樣式-------------------------------------------*/font-family: "微軟雅黑";/*設置字體*/font-size: 50px;/*設置字體大小*/font-style: italic;/*設置字體樣式 - 傾斜*/font-weight: bold;/*設置字體粗細*//*設置文本樣式-------------------------------------------*/letter-spacing: 20px;/*設置文本間隔*/text-decoration: underline;/*設置文本劃線 - 下劃線*/text-align: center;/*設置文本對齊方式 -- 居中*/color: white;/*設置文本顏色*//*設置背景樣式 --------------------------------------------*/background-color: red;/*設置背景顏色*/}a{text-decoration: none;/*設置字體劃線 - 去除劃線*/}div{width: 500px;height: 500px;background-image: url(../img/花.jpg);/*設置背景圖片*/background-repeat: repeat-y;/*設置平鋪方式*/border: orange 1px solid;/*設置邊框 - 顏色,粗細,實線*/}</style></head><body><p>今天天氣真好</p><a href="#">百度一下</a><br /><div></div></body>
</html>