柚子快報(bào)激活碼778899分享：前端 html css的使用

http://yzkb.51969.com/

css三種使用方式

1.行內(nèi)式

?

kashfvbjdhfihkdalkjgjhd

2.內(nèi)嵌式? ??

?

3.外聯(lián)式

css的注釋

/*p {

? ? width:300px;

? ? padding:400px;

? ? border: 2px solid #099;

}*/

css長(zhǎng)度單位

px像素，em字體大小的倍數(shù)，%百分比

顏色設(shè)置方式

1使用顏色名

2rgb方式表示顏色?rgb(100,200,230)0~255

3hex十六進(jìn)制方式表示顏色#367836十六進(jìn)制兩個(gè)表示一個(gè)元色

? ? ?}

css選擇器

標(biāo)簽選擇器:標(biāo)簽名{}

類名選擇器：.class名{}

id選擇器：#id名{}

全局選擇器：*{}?

權(quán)重：id選擇器>class選擇器>標(biāo)簽選擇器>全局選擇器? ? ? ?

顯示模式

默認(rèn)顯示模式：

塊級(jí)元素block:在頁(yè)面上是一個(gè)快，能夠獨(dú)占一行，可以設(shè)置寬和高

排版標(biāo)簽：h1~h6，p,pre,he,div;

列表標(biāo)簽：ul,ol,li；

表單標(biāo)簽：form,option

行內(nèi)元素inline:顯示在一行內(nèi)，不能獨(dú)占一行，無法顯示高和寬? ? ? ?

文本標(biāo)簽：em,strong,del,ins,sub,sup,span

超鏈接 ：a

表單標(biāo)簽：label? ?

行內(nèi)塊元素inlin-block：顯示在一行但是可以設(shè)置寬和高

圖片標(biāo)簽：img

表單標(biāo)簽：input,button,textare,select

框架標(biāo)簽：iframe

修改顯示模式：

使用css屬性中的display屬性：block,inline,inline-block

字體樣式

font-size字體大小長(zhǎng)度

font-weith字體粗細(xì)：normal,lighter,bold,100~900數(shù)字

font-style斜體字nomal,italic

font-family字體族科

字體列表：font-family: "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", Verdana, Roboto, Noto, "Helvetica Neue", sans-serif !important;

serif:非襯線，san-serif襯線

font復(fù)合屬性：最少兩個(gè)字體大小和字體名稱用空格隔開（一般不用）

復(fù)合屬性在子屬性后面復(fù)合屬性生效，子屬性在復(fù)合屬性的前面相應(yīng)的子屬性生效

文字樣式

letter-spacing 字間距?

word-spacing 詞間距

text-decoration 文本修飾線屬性值：none,underline,overline,line-throught

text-indent 首行縮進(jìn)?

text-align 文本水平對(duì)齊方式 屬性值：left,right,center

vertical-align 文本垂直對(duì)齊方式 屬性值：baseline：基線對(duì)齊。
top：頂線對(duì)齊。
middle：中線對(duì)齊。
bottom：底線對(duì)齊。
sub：下標(biāo)字。
super：上標(biāo)字。
長(zhǎng)度：元素底部與基線的距離 |

?line-height ? ? | 行高 ? ? ? ? ? ? ? ? | 長(zhǎng)度 ? ? ?

背景樣式

屬性名 ? ? ? ? ? ? ? ?| 作用 ? ? ? ? ? ? ? ? | 屬性值 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| background-color ? ? ?| 背景顏色 ? ? ? ? ? ? | 顏色 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |?

| background-image ? ? ?| 設(shè)置背景圖像地址 ? ? | url(地址) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?|

| background-repeat ? ? | 設(shè)置背景圖像重復(fù)方式 | repeat：重復(fù)。
repeat-x：橫向重復(fù)。
repeat-y：縱向重復(fù)。
no-repeat：不重復(fù)。 |

| background-position ? | 設(shè)置背景圖像位置 ? ? | 關(guān)鍵字。
兩個(gè)長(zhǎng)度表示的坐標(biāo)。
百分比? ??

| background-attachment | 背景圖像固定 ? ? ? ? | scroll：隨元素滾動(dòng)，默認(rèn)值。
fixed：固定。?

| background ? ? ? ? ? ?| 背景復(fù)合屬性 ? ? ? ? | 多個(gè)值使用空格分隔 ? ?

列表樣式

| 屬性名 ? ? ? ? ? ? ?| 作用 ? ? ? ? ? ? ? | 屬性值 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?|

| ------------------- | ------------------ | ----------------------------------------- |

| list-style-type ? ? | 設(shè)置列表項(xiàng)圖標(biāo) ? ? | none：無 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?|

| list-style-position | 設(shè)置列表項(xiàng)圖標(biāo)位置 | outside：在li外面。
inside：在li里面。 |

| list-style-image ? ?| 自定義列表項(xiàng)圖標(biāo) ? | url(圖片地址) ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| list-style ? ? ? ? ?| 復(fù)合屬性 ? ? ? ? ? | 多個(gè)值使用空格分隔 ? ? ? ? ? ? ? ? ? ? ? ?|

> **注意：** 只有 ul、ol、li 這些標(biāo)簽設(shè)置列表樣式才有效果！

表格樣式

?屬性名 ? ? ? ? ?| 作用 ? ? ? ? ? ? ? ? ? ? ? ? | 屬性值 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| --------------- | ---------------------------- | ------------------------------------ |

| table-layout ? ?| 設(shè)置列寬固定 ? ? ? ? ? ? ? ? | auto：默認(rèn)值。
fixed：固定。 ? ? ?|

| border-spacing ?| 設(shè)置單元格之間的距離 ? ? ? ? | 長(zhǎng)度 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |

| border-collapse | 合并單元格邊框 ? ? ? ? ? ? ? | separate：默認(rèn)值。
collapse：合并 |

| caption-side ? ?| 標(biāo)題位置 ? ? ? ? ? ? ? ? ? ? | top：表格上面。
bottom：表格下面 ?|

| empty-cells ? ? | 沒有內(nèi)容的單元格顯示還是隱藏 | show：顯示，默認(rèn)值。
hide：隱藏 ? |

> **注意：** 表格相關(guān)的屬性只能設(shè)置到 table 標(biāo)簽上才生效！

?組合選擇器

#### ① 后代元素選擇器

```css

選擇器1 選擇器2 {}

```

#### ② 子元素選擇器

```css

選擇器1 > 選擇器2 {}

```

#### ③ 交集選擇器

```css

選擇器1選擇器2 {}

.item.active {}

.active.item {}

div.item {}

```

#### ④ 并集選擇器

```css

選擇器1, 選擇器2 {}

```

?偽類選擇器

```

:link ? ? ? 選擇未訪問過的超鏈接

:visited ? ?選擇已訪問過的超鏈接

:hover ? ? ? ? 鼠標(biāo)懸停在元素上

:active ? ? ? ?鼠標(biāo)懸停在元素上且鼠標(biāo)按鍵按下不抬起

```

多個(gè)偽類選擇器一起使用，請(qǐng)按照 :link、:visited、:hover、:active 順序書寫 (love hate 記憶法)

```

選擇器權(quán)重（優(yōu)先級(jí)）

#### ① 單個(gè)選擇器之間的權(quán)重

```

ID選擇器 > 類選擇器、偽類選擇器 > 標(biāo)簽名選擇器 > 全局選擇器

```

#### ② 組合選擇器優(yōu)先級(jí)比較規(guī)則

```

1. 兩個(gè)組合選擇器，先比較ID的數(shù)量，數(shù)量多者權(quán)重高，比較結(jié)束

2. ID數(shù)量無法分勝負(fù)，比較類、偽類的數(shù)量，數(shù)量多者權(quán)重高，比較結(jié)束

3. 類、偽類的數(shù)量無法分勝負(fù)，比較標(biāo)簽名的數(shù)量，數(shù)量多者權(quán)重高， 比較結(jié)束

4. 兩個(gè)選擇器權(quán)重一致，后面覆蓋前面

```

> **組合： ** 并集選擇器的組合，各自計(jì)算各自的權(quán)重，不會(huì)放在一起計(jì)算。

?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

柚子快報(bào)激活碼778899分享：前端 html css的使用

http://yzkb.51969.com/

好文閱讀