首頁 > 博客列表 > css基本知識

博主信息

博文 40

粉絲 0

評論 0

訪問量 26145

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

1. 認識css

css的基本構(gòu)成：選擇符，屬性，屬性值
例：p{color:#ff0000}
css對大小寫不敏感，推薦使用小寫
屬性與屬性值之間用:分開，多個屬性用;間隔。
css中注釋方式：/* 注釋內(nèi)容 */

2. 放置css的幾種方式

內(nèi)聯(lián)樣式（行內(nèi)引用）
```
<p style=""></p>
```

內(nèi)嵌樣式（內(nèi)部引用）

<!doctype html>
<html>
 <title></title>
 <head>
    <style>
    p{
       color:#ff0000;
       fontsize:15px;
    }
    </style>
 </head>
</html>

外聯(lián)樣式（外部引用）

<!doctype html> 
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css文件地址">
  </head>
</html>

3. CSS選擇器

(1). 基本選擇器

類選擇器（class選擇器）
- 在css中用.來查找。（類選擇器中可以多個屬性，用空格分開）
唯一選擇器（ID選擇器）
- 在css中用#查找。
通配符選擇器(*)
- 匹配所有標(biāo)簽
標(biāo)簽選擇器
- 根據(jù)html中的標(biāo)簽來選擇對應(yīng)的標(biāo)簽名，這個時候該頁面的所有該標(biāo)簽都會被選擇。

(2). 層級選擇器

組合選擇器。多個選擇器用逗號分開：選擇器1，選擇器2，選擇器3。如：div,p
包含選擇器。選擇器1 選擇器2。表示選擇器1包含選擇器2。如：div p
子選擇器。選擇器1>選擇器2.表示選擇器1的子元素為選擇器2.如：div>p
相鄰選擇器。選擇器1+選擇器2.表示選擇緊貼在選擇器1之后的選擇器2元素.如：div+p
兄弟選擇器。選擇器1~選擇器2。表示選擇器1后面的所有兄弟元素選擇器2.如div~p

(3). 屬性選擇器

屬性選擇器：就是通過屬性名或者屬性值來查找某個元素。
名稱介紹
- E element 表示元素標(biāo)簽
- ATT attribute 表示屬性
- VAL value 表示屬性值
標(biāo)簽[屬性]
- E[ATT] , 表示匹配所有具備ATT屬性的 E元素，不考慮屬性值。
- E[ATT=VAL], 匹配所有ATT屬性的值等于VAL的E元素。
- E[ATT~=VAL] 匹配所有ATT屬性具有多個空格分隔的值，其中一個值等于VAL的E元素。
- E[ATT|=VAL],匹配所有ATT屬性具有多個連接分隔符的值，其中一個值以val-開頭的E元素，主要用于lang屬性。比如：’en-us’,’en-gb’（了解即可）。
- E[ATT^=VAL],屬性ATT的值以VAL開頭的E元素。
- E[ATT$=VAL],屬性ATT的值以VAL結(jié)束的E元素。
- E[ATT*=VAL],屬性ATT的值包含VAL的E元素。
```
input[type="text"]{
border:1px solid red;
}
```

(4). 結(jié)構(gòu)性偽類選擇器

偽元素選擇器（不是真正的元素選擇）
- E:first-line E元素的第一行
- E:first-letter E元素的第一個字母
- E:before E元素的內(nèi)容之前
- E:after E元素的內(nèi)容之后
結(jié)構(gòu)性偽類選擇器

（內(nèi)容待添加）

(5). 狀態(tài)偽類選擇器

:link 設(shè)置超鏈接a在未被訪問前的樣式
:hover 設(shè)置元素在鼠標(biāo)懸浮時候的樣式（適用于所有元素，不限于超鏈接）
:active 設(shè)置超鏈接被a被激活時的樣式（點了鼠標(biāo)還沒放開的時候狀態(tài)）
:visited 設(shè)置超鏈接a被訪問過的樣式

(6). 選擇器優(yōu)先級

內(nèi)聯(lián)樣式，優(yōu)先級1000
id選擇器，優(yōu)先級100
類和偽類，優(yōu)先級10
元素選擇器，優(yōu)先級1
通配符選擇器，優(yōu)先級0

當(dāng)包含多種選擇器時，需要多種選擇器的優(yōu)先級相加后再做比較.選擇器的優(yōu)先級不會超過最大優(yōu)先級數(shù)量級1000，如果選擇器的優(yōu)先級一樣，則使用靠后的樣式。
并集（組合）選擇器的優(yōu)先級是單獨計算。
如果在樣式的最后加上 !important,優(yōu)先級則為最高，超過內(nèi)聯(lián)樣式。所以在開發(fā)中，盡量避免使用。

4. CSS的基本屬性

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

php學(xué)習(xí)準(zhǔn)備內(nèi)容

2023-03-02 18:03:17

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱