首頁(yè) > 博客列表 > css基本知識(shí)

博主信息

博文 40

粉絲 0

評(píng)論 0

訪問量 26117

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

1. 認(rèn)識(shí)css

css的基本構(gòu)成：選擇符，屬性，屬性值
例：p{color:#ff0000}
css對(duì)大小寫不敏感，推薦使用小寫
屬性與屬性值之間用:分開，多個(gè)屬性用;間隔。
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中用.來查找。（類選擇器中可以多個(gè)屬性，用空格分開）
唯一選擇器（ID選擇器）
- 在css中用#查找。
通配符選擇器(*)
- 匹配所有標(biāo)簽
標(biāo)簽選擇器
- 根據(jù)html中的標(biāo)簽來選擇對(duì)應(yīng)的標(biāo)簽名，這個(gè)時(shí)候該頁(yè)面的所有該標(biāo)簽都會(huì)被選擇。

(2). 層級(jí)選擇器

組合選擇器。多個(gè)選擇器用逗號(hào)分開：選擇器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). 屬性選擇器

屬性選擇器：就是通過屬性名或者屬性值來查找某個(gè)元素。
名稱介紹
- E element 表示元素標(biāo)簽
- ATT attribute 表示屬性
- VAL value 表示屬性值
標(biāo)簽[屬性]
- E[ATT] , 表示匹配所有具備ATT屬性的 E元素，不考慮屬性值。
- E[ATT=VAL], 匹配所有ATT屬性的值等于VAL的E元素。
- E[ATT~=VAL] 匹配所有ATT屬性具有多個(gè)空格分隔的值，其中一個(gè)值等于VAL的E元素。
- E[ATT|=VAL],匹配所有ATT屬性具有多個(gè)連接分隔符的值，其中一個(gè)值以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元素的第一個(gè)字母
- 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)懸浮時(shí)候的樣式（適用于所有元素，不限于超鏈接）
:active 設(shè)置超鏈接被a被激活時(shí)的樣式（點(diǎn)了鼠標(biāo)還沒放開的時(shí)候狀態(tài)）
:visited 設(shè)置超鏈接a被訪問過的樣式

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

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

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

4. CSS的基本屬性

(1). 字體屬性

color：字體顏色
font-style：字體的樣式（正?；蛘咝斌w）（斜體：font-style:italic;）
font-size：字體的大小
font-family：字體族科（使用哪種字體，必須客戶端存在的字體）
font-weight：指定字體的粗細(xì)（font-weight:bold;值也可以是數(shù)字，最大為900）
font-variant：設(shè)置字體為小型的大寫字母（font-variant:small-caps;）
font 簡(jiǎn)寫屬性：斜體/小型大寫字母/粗體/(字體/行高)/族科
letter-spacing：設(shè)置字的間距
word-spacing：設(shè)置單詞的詞間距（對(duì)中文無效）
opacity：設(shè)置顏色的透明度（值從0-1，數(shù)字越小越透明）
overflow | overflow-x | overflow-y 當(dāng)內(nèi)容溢出元素框時(shí)隱藏|自動(dòng)|顯示混動(dòng)條
text-overflow 讓溢出的文字以省略號(hào)顯示
white-space 設(shè)置文字是否在同一行顯示

(2).文本屬性

text-align:元素內(nèi)容對(duì)齊方式（值：默認(rèn)：left，center，right）
text-decoration:指定文本是否有修飾，默認(rèn)為none
- underline：下劃線
- overline：上劃線
- line-through：刪除線，中間劃線
text-indent：文本首行縮進(jìn)
text-wrap：設(shè)置當(dāng)前行超過指定容器的邊界時(shí)是否換行。
vertical-align：設(shè)置對(duì)象內(nèi)容垂直的對(duì)齊方式。
line-height：設(shè)置對(duì)象的行高（當(dāng)字體的行高和容器高度相同的時(shí)候，文本就會(huì)居中顯示）

(3).背景屬性

background-color：背景顏色默認(rèn)值：transparent透明的
background-image：背景圖片（background-image:url(‘./img/123.jpg’);）
background-repeat:背景圖片是否重復(fù)。
- 默認(rèn)值：repeat：背景圖默認(rèn)向水平和錘子方向重復(fù)。
- repeat-x:背景圖水平方向重復(fù)鋪平。
- repeat-y：背景圖片垂直方向重復(fù)鋪平。
- no-repeat：不會(huì)重復(fù)
- inherit：屬性設(shè)置從父元素繼承。
background-size：設(shè)置背景圖片大?。╞ackground-size:80px 60px;）
background-position：設(shè)置背景圖片相對(duì)于外層容器的位置。
background-attachment：背景圖片是否隨內(nèi)容滾動(dòng)。

background 背景屬性簡(jiǎn)寫

background: #00ff00 url('smiley.gif') no-repeat fixed center;

(4).尺寸屬性

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

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

0條評(píng)論

作者最新博文

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

2023-03-02 18:03:17

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