學習web前端的必備知識點之CSS知識

css基本內(nèi)容，類選擇符，id選擇符，偽類，偽元素，結(jié)構(gòu)，繼承，特殊性，層疊，元素分類，顏色，長度，url，文本，字體，邊框，塊級元素，浮動元素，內(nèi)聯(lián)元素，定位。

鏈接：

link標簽：

樣式：

h1 { color: red; };

@import指示引入多個外部樣式表的鏈接

@import url(styles.css);

p { color: red };

css注解

/* dashucoding */

內(nèi)聯(lián)樣式：

規(guī)范：

選擇符 + 聲明

p { color: red; } // 選擇符 屬性 值

p { font-weight: bold; }

偽類和偽元素

屬性說明

:link超鏈接是一個未訪問過的地址

:visited訪問過的網(wǎng)頁

:active處于活躍的狀態(tài)

a { color: red; }; a:visited { color: red; };

偽元素：

:first-letter 和 :first-line 首字母 和 首行

p:first-letter { color: red; }

css有個特點是繼承，可以依賴于祖先-后代關系。

!important有這個標記，表示這條規(guī)則優(yōu)先

p { color: red !important; }

元素分類：

三種類型：塊級元素，內(nèi)聯(lián)元素，列表項元素

塊級元素有段落，標題，列表，表格，div，body等。內(nèi)聯(lián)元素有a，em，span等。列表項元素有l(wèi)i元素。

dispaly: block | inline | list-item | none

顏色：

rgb(100 %, 100 %, 100 %) 紅藍綠 ，白色

單位：

em 給字體的font-size值

文本：

文本縮進

text-indent <長度> | <百分比>

p { text-indent: -4em; }

text-align屬性

用于元素中文本行的對齊方式

text-align: left | center | right | justify

white-space空白

white-space pre | nowrap | normal

p { white-space: normal; } 將如何空白壓縮成單個空白符

white-space屬性值為pre，可以將元素內(nèi)的空白忽略。

p { white-space: pre; }

行高：

line-height文本行的基線間的距離。

縱向?qū)R，vertical-align

vertical-align: baseline使元素的基線同父元素的基線對齊。

vertical-align: sub; vertical-align: super;

低端對齊： vertical-align

頂端對齊：vertical-align

vertical-align: top; vertical-align: text-top;

中間對齊：

vertical-align: middle;

文字間隔：

word-spacing 長度 | normal

word-spacing: 0.3em;

字母間隔：

letter-spacing: 長度 | normal

文本轉(zhuǎn)換：

text-transform uppercase | lowercase | capitalize | none

文本修飾：

text-decoration: none | overline | line-through

框：

width 長度 | 百分比 | auto

height 長度 | auto

margin 長度 | 百分比 | auto

margin: top right bottom left

margin-top

margin-right

margin-bottom

margin-left

border-width // thin medium thick

border-style: none;

padding

浮動與清除

float: left | right | none

float: none 用于防止元素浮動

清除浮動元素

clear left | right | both | none

clear原理是增加元素的上邊界，使它在低于浮動元素的位置結(jié)束，清除元素的上邊界寬度當有效地忽略。

list-style-type disc

disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none

list-style-type

disc 為實心圓

circle 為空心圓

square 實心或空心方塊

列表項圖像

list-style-image

列表項位置：list-style-position

list-style-position: inside | outside

定位：

position: static | relative | absolute | fixed | inherit

溢出：

overflow: visible | hidden | scroll | auto | inherit

溢出剪切：

overflow-clip: rect | auto | inherit

元素剪切：

clip rect | auto | inherit

元素可見性：

visibility: visible | hidden | collapse | inherit

相對定位：

position: relative;

絕 對定位：

position: relative;

固定定位：

position: fixed;

層疊定位：

z-index: integer | auto

輪廓：

outline, outline-color, outline-style, outline-width

邊框：

border-top-color, border-right-color, border-bottom-color

border-left-color, border-top-style

border-right-style, border-left-style

實例：

dashu

dashu2

1

2