（自考專升本）《css》知識(shí)點(diǎn)學(xué)習(xí)知識(shí)點(diǎn)串講筆記

《css》知識(shí)點(diǎn)學(xué)習(xí)筆記

一、什么是CSS?

全稱:層疊樣式表，修飾和美化HTML頁(yè)面中的元素（靜態(tài)、動(dòng)態(tài)都可以）

二、如何用css

1.基本語(yǔ)法：選擇器{樣式1；樣式2}樣式:color:red;

例子:hl{color:red;font-size:20px;}

三、在哪里寫入CSS樣式？

1.內(nèi)部樣式：〈style>〈/style>寫在html頁(yè)面中head標(biāo)簽內(nèi)

2.夕卜部樣式:在html頁(yè)面head標(biāo)簽內(nèi):〈linkhref="css文件地址”>

3.行內(nèi)樣式:在某一個(gè)標(biāo)簽內(nèi)，style=""<pstyle="color:red;n>我是標(biāo)簽</p>

備注:優(yōu)先級(jí)行內(nèi)樣式〉內(nèi)部樣式》外部樣式

四、CSS選擇器

1.標(biāo)簽元素選擇器：標(biāo)簽名{}

2.類選擇器：<pclass="one">p標(biāo)簽</p>.one{}

3.id選擇器:<pid="two”>p標(biāo)簽〈/p>#two{}

備注：id選擇器需要注意:一個(gè)html頁(yè)面中不能有重復(fù)的id名字

優(yōu)先級(jí)：標(biāo)簽選擇器（class選擇器<id選擇器

4.層次選擇器：

（1）AB{}選中頁(yè)面中A標(biāo)簽下的所有B元素（包括孫子）

例：ulli{color:red;}---->所有的li標(biāo)簽內(nèi)容都是紅色

<ul>

<li>222</li>

</ul>

（2）A>B{}選擇頁(yè)面中A標(biāo)簽下兒子輩的B元素

例:ul>li{coloured;}---->第一個(gè)的li標(biāo)簽內(nèi)容是紅色

<ul>

<ol>

<li>222</li>

</ol>

</ul>

（3）A+B{}選中A標(biāo)簽相鄰的兄弟元素B,且只選中第一個(gè)

例：hl+p{color:red;}---->第一個(gè)p標(biāo)簽內(nèi)容變紅

〈111>我是標(biāo)題</111>

〈P>我是段落</p>

<P>我是段落</p>

（4）A、B{}選中A標(biāo)簽相鄰的所有兄弟元素B

例：hl'p{color:red;}---->所有p標(biāo)簽內(nèi)容都變紅

<hl〉我是標(biāo)題</hl>

<P>我是段落</p>

<p>我是段落</p>

5.結(jié)構(gòu)偽類選擇器：

(1)A:nth-child(index){}A代表標(biāo)簽選擇器，index代表下標(biāo)（從1開始計(jì)數(shù)）

(2)A:nth-child(參數(shù)){)參數(shù)的值：odd奇數(shù)行、even偶數(shù)行

(3)A:first-child{}選擇第一個(gè)A元素

(4)A:last-chiId{}選擇最后一個(gè)A元素

例：

li:first-child{color:red;}——＞第一個(gè)li標(biāo)簽內(nèi)容變紅

li:last-child{color:red;}—＞最后一個(gè)li標(biāo)簽內(nèi)容變紅

li:nth-child(3){color:red;}—＞第三個(gè)個(gè)li標(biāo)簽內(nèi)容變紅

li:nth-child(odd){color:red;}—＞奇數(shù)行l(wèi)i標(biāo)簽內(nèi)容變紅

li:nth-child(even){color:red;}一＞偶數(shù)行l(wèi)i標(biāo)簽內(nèi)容變紅

<ul>

<li>lll</li>

<li>222</li>

<li>333</li>

<li>444</li>

<li>555</li>

</ul>

(5)A:hover{)鼠標(biāo)滑過A元素后的樣式

例：span:hover{color:red;}----->當(dāng)鼠標(biāo)滑倒span標(biāo)簽上，標(biāo)簽內(nèi)容變成紅色

<span>鼠標(biāo)滑過變成紅色</span>

(6)a:visited{}鼠標(biāo)訪問過a標(biāo)簽后的樣式

例：a:visited{color:green;}--)當(dāng)鼠標(biāo)點(diǎn)擊了a標(biāo)簽,a標(biāo)簽顏色變?yōu)榫G

色

<ahref="">百度</a>

6.屬性選擇器：

(1)A[attr]:選中帶有attr屬性的所有A元素

(2)A[attr="B"]:選擇帶有attr屬性并且值為B的所有A元素

(3)B"]:選擇帶有attr屬性并且值開頭字母為B的所有A元素

(4)A[attr$二”B"]:選擇帶有attr屬性并且值結(jié)尾字母為B的所有A元素

例：

input[name]{width:200px;height:40px;}----->選中所有含有name屬性的input標(biāo)

簽

input[name=,,username]{width:200px;height:40px;}

---->選中所有name屬性值為username的input標(biāo)簽

input[name]{width:200px;height:40px;}---->選中name值首字母為u的

input標(biāo)簽

input[name$=,,x,?]{width:200px;height:40px;}---->選中name值結(jié)尾字母為x的

input標(biāo)簽

<inputtype="text"name="username”>

<inputtype="radio“name="sex”>

<inputtype="radio“name="sex”>

總結(jié)：

1、頁(yè)面中盡量不要用id選擇器

2、li多用nth-child選擇器

3、在表單獲取動(dòng)態(tài)數(shù)據(jù)時(shí)，多用屬性選擇器

五、CSS樣式：選中器{屬性:值;}

1.字體樣式

(1)font-size:Ipx;字體大小

(2)font-weight:normal;字體正常大小

font-weight:bold;字體加粗

font-weight:bolder字體更粗

(3)font-style:normal;字體風(fēng)格:正常

font-style:italic;字體風(fēng)格:斜體

font-style:oblique;字體風(fēng)格:傾斜

(4)font-family:宋體”；字體樣式

2.文本樣式：

(1)color:顏色；文本顏色百度搜索:css顏色對(duì)照表#FFFFFF白色

(2)text-align:left或center或right;文本左居中右對(duì)齊

(3)line-height:npx;文字垂直居中對(duì)齊,需要n的值與元素的height相等

例：p(

width:400px;

heigth:40px;

text-align:center;文本水平居中

1ine-height:40px;文本垂直居中

)

＜p＞哈哈哈＜/p＞

(4)text-decoration:none(沒有線)、underline(下劃線)、overline(上劃線)、line-

through(貫穿線)

(5)word-spacing:lem;文字與文字之間的間距

(6)text-indent:lem;文字首行縮進(jìn)

(7)text-shadow:顏色x軸y軸模糊半徑;

例：text-shadow:red10px10px5px;通常結(jié)合文本顏色一起使用

color:green;

3.背景樣式：

(1)background-color:顏色；背景顏色

(2)background-image:ulr(圖片路徑)；背景圖片

(3)background-repeat:no-repeat(不平鋪)、repeat-x(沿x軸平鋪)、repeat-y(沿著

y軸平鋪)

(4)background-position:x軸像素、y軸像素；

(5)background-size:寬度高度；

(6)background:linear-gradient(to方向，顏色1,顏色2);

4.鼠標(biāo)滑過樣式：

(1)cursor:值；text文本、wait等待、help幫助、pointer小手、corsshair十字光

標(biāo)

例：span{

cursor:pointer;----＞鼠標(biāo)滑倒span標(biāo)簽上，鼠標(biāo)變成小手

)

＜span＞鼠標(biāo)滑過變樣子＜/span＞

5.盒子模型

(1)盒子組成：元素本身+內(nèi)邊距(padding)+邊框(border)+外邊距(margin)

(2)內(nèi)邊距:padding用法

padding:值；只寫一個(gè)值，設(shè)置元素上下左右方向的內(nèi)邊距

padding:值1值2;寫兩個(gè)值，值1上下方向、值2左右方向

padding:值1值2值3;寫三個(gè)值,值1上方向、值2左右方向、值

3下方向

padding:值1值2值3值4;寫四個(gè)值，分別代表上右下左

例：p(

padding:10px;——＞元素本身在上下左右四個(gè)方向距離邊框都有10像素

padding:10px5px;----＞上下方向有10像素，左右方向有5像素

padding:5px6px7px;----＞上5像素，左右距離6像素,下7像素

padding:Ipx2px3px4px;----＞上Ipx、右2px、下3px、左4Px

)

＜P＞我是段落〈/p＞

備注:用來(lái)控制元素本身距離邊框的距離

(3)margin:用法同padding一樣

備注:margin

特殊用法：margin:0auto;讓元素居中，前提是:此元素有寬度

(4)border:Ipxsolid顏色；solid是實(shí)線，可替換為:dotted虛線

(5)border-raidus:用法同padding一樣；通常設(shè)置值為元素的寬高一半

六、浮動(dòng)與display

1.display用法

(1)display:inline;----＞將元素定義為:行內(nèi)元素

(2)display:block;----＞將元素定義為：塊級(jí)元素

(3)display:inline-block;---＞行內(nèi)元素特性：同行排列、塊級(jí)元素特性:設(shè)置寬高

這玩楞是個(gè)坑,盡量別用

(4)display:none;-----＞隱藏元素

2.浮動(dòng)用法：

(1)float:left;----＞讓元素左浮動(dòng)

(2)float:right;----＞讓元素右浮動(dòng)

(3)浮動(dòng)特性：

當(dāng)元素浮動(dòng)時(shí),下一個(gè)元素會(huì)被覆蓋,文本內(nèi)容、圖片內(nèi)容不會(huì)被覆蓋

例：浮動(dòng)不會(huì)覆蓋文字.html

當(dāng)多個(gè)元素同浮動(dòng)時(shí)，多個(gè)元素同行顯示,inline-block的特性

例：多個(gè)元素浮動(dòng)同行排列.html

當(dāng)父級(jí)元素寬度為400,子級(jí)三個(gè)元素寬度總和超過400,那么三個(gè)元素在浮動(dòng)時(shí)候，

第三個(gè)元素會(huì)另起