HTML5第四天筆記

選擇器：

1，關係選擇器

1)群組選擇器h2,p,.text,#box{樣式}

用逗號隔開

2）子元素選擇器父元素>子元素{樣式}

用大於號>隔開

3）後代選擇器祖先後代{樣式}

用空格隔開

 

顏色具有繼承性

2，動態偽類選擇器(常用於a標籤）

:link 連結時的狀態

:visited 存取後的狀態

:hover 滑鼠放上去的狀態

:active active 點時的狀態滑鼠

原則：愛恨原則LoVeHAte 依序這樣寫

一般寫a{} a:hover{}即可

3，:nth選擇器

:first-child:第一個子元素

:last -child:最後一個子元素

:nth-child(n):第n個子元素n:0,1,2...n 2n 2n+1...從0開始，每次累加1

奇偶行不同色：：nth-​​child(2n+1) nth-child(2n) 

CSS屬性

1，文字屬性（文字樣式、字體屬性、字體樣式）

font-size:12px/14px; 字體樣式）

font-size:12px/14px; 字體樣式）

font-size:12px/14px; 字體樣式）

font-size:12px/14px; 字體樣式大小（瀏覽器預設文字大小16px）

font-family:微軟雅黑;

font-weight:100-900/bold/bolder/normal 字體加粗

color:#000000; italic(斜體）/normal;

2,段落屬性

text-align:left/center/right 文字水平對齊方式

vertical-align:top/middle/bottom 文字垂直對齊方式

text-indent:20px /2em 文字縮排

line-height:20-24px/150%/1.5 行間距

text-decoration:underline(底線)/overline(上劃線)/line-through(刪除線)/none 文字修飾

特殊使用：

一行文字、有高度、垂直居中的設定方法：

line-height:height;（行高=高度）

letter-spacing:10px; 字與字之間的距離

letter-spacing:10px; 字與字之間的距離

letter-spacing:10px; 字與字之間的距離

letter-spacing:10px; 字與字之間的距離
word-spacing:1px; 單字與單字間的距離（多用於英文網站）

text-transform:capitalize(每個單字首字母大寫）uppercase(全部大寫)lowercase(全部小寫）（多用於英文網站）

white-space:normal/nowrap(不換行)

3，背景屬性（background）

background-color:#000000/rgba()/red

background-image:url(圖片的路徑)

-repeat:repeat/repeat-x/repeat-y/no-repeat;(設定背景影像的顯示方式）

background-position:水平方向垂直方向

水平方向：+300px -300px 20% left center right

垂直方向：+300px -300px 20% top center bottom

background是複合屬性，可以省略-後面的。

例：background:#ff0000 url(../img/1.jpg) no-repeat 20px 30px;

4，列表屬性（list-style）複合屬性（主要用於ul ol li）

list- style-image:url();新增清單項目前面的圖片

list-style-type:none (列表前的圓點）

list-style-position：inside/outside🎜🎜list-style:none;最最常用🎜🎜 以上就是HTML5第四天筆記的內容，更多相關內容請關注PHP中文網（www.php.cn）！ 🎜🎜🎜🎜🎜