CSS基礎整理

2021-10-14 07:37:53 字數 3911 閱讀 1974

復合選擇器

選擇器和層疊性權重計算

選擇器命名規則

*文字與字型屬性

*繼承性

*盒模型

*浮動*定位

*彈性布局

*css相關屬性

1_ id選擇器

2_ class選擇器(類選擇器)

3_ 標籤選擇

4_ 通配選擇器 *1_ 元素關係選擇器

2_ 偽類選擇器

3_ 序號選擇器(結構性偽類選擇器)

同一型別中 (父元素的子元素為同一型別)

e:first-child{}>>> e元素的父元素中第乙個子元素

(ie7)

e:last-child{}>>>e元素的父元素中最後乙個子元素

(ie9)

e:nth-child(n){}>>>e元素的父元素中第n個子元素

(ie9)

e:nth-last-child(n){}>>>e元素的父元素中倒數第n個子元素

(ie9)

不同型別中(不常用)

e:first-of-type{}(ie9)

e:last-of-type{}(ie9)

e:nth-of-type(n){}(ie9)

e:nth-last-of-type{}(ie9)

4_ 屬性選擇器(不常用)

[attr]

[attr=「val」]

[attr~=「val」]

[att|=「val」]

[attr^=「val」]

[attr$=「val」]

[attr*=「val」]

5_ 狀態偽類選擇器

e:empty{}e:focus{}e:checked{}e:enabled{}e:disabled{}

6_ 偽元素(虛擬 動態建立的元素)

e::before{}>>> 成為匹配元素 e的第乙個子元素,必須設定content屬性表示其內容

e::after{}>>> 成為匹配元素 e的最後乙個子元素

e::selection{}>>> 應用於文件中被使用者高亮的部分

e::first-letter{}>>>選中元素中第一行的第乙個字母

e::first-line{}>>>選中元素中第一行

**::before和::after必須配合content屬性來使用,content用來定義插入的內容,content必須有值,至少是空。

::before和::after偽元素的用法.

font-weight

font-family

simsun 宋體

字型格式(.eot / .woff2 / .woff / .ttf / .svg)

@font-face 定義字型 阿里巴巴惠普商用字型(

font-size

text-indent首行縮排

text-align對齊方式

line-height

color

text-overflow

color

font- 開頭的

list- 開頭的

line- 開頭的

text- 開頭的

文字相關屬性普遍具有繼承性,只要給祖先標籤設定,即可在後代所有標籤中生效

在繼承的情況下,選擇器的權重計算失效,選擇就近原則

清除浮動常用方法

.clearfix::after
// 讓內部有浮動的盒子的父元素形成bfc,設定父元素的 overflow: hidden
相對定位的元素,會在老家留坑,本質上上仍然是原來的位置,渲染在新的地方,相當於是「影子」,不會對其他元素產生任何影響

相容到ie10

// 設定在容器上,常用設定單行子盒子水平垂直居中

disply: flex; //設定盒子為彈性盒

justify-content: center; //水平居中

align-items: center; //垂直居中

定義在容器上的6個屬性

定義在專案(子元素)上的6個屬性

box-shadow屬性

box-shadow: 10px   20px   20px   rgba(0, 0, 0 , .5)

x偏移量 y偏移量 模糊量 顏色

陰影延展

box-shadow: 10px   20px   20px   20px   rgba(0, 0, 0 , .5)

陰影延展

內陰影

box-shadow: inset 10px   20px   20px   20px   rgba(0, 0, 0 , .5)

內陰影

多陰影

box-shadow屬性可以設定多個陰影,用逗號隔開

box-shadow:2px 2px 2px red, 4px 4px 4px blue, 6px 8px 6px green;

padding有背景色

屬性值

下面為3d變換

相關屬性

過度從ie10開始相容,移動端相容良好;相對於js動畫優點是動畫更細膩,記憶體開銷小;相當於補間動畫

transition: all .5s ease 0s

哪些屬性可以過度

1、所有數值型別的屬性,都可以參與過度,如width, height, left, top, right, border-radius

2、背景顏色和文字顏色都可以被過度

3、所有變形,包括2d和3d,都能被過度

css基礎知識整理

1 什麼是css?css通常稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式。css以html為基礎,提供了豐富的功能,如字型 顏色 背景的控制及整體排版等,而且還可以針對不同的瀏覽器...

css基礎知識整理

1 css分類樣式分為3類 內聯 內嵌 外部 1 內聯 寫在標籤裡面,樣式為style 舉例說明 我是第一行h 執行樣圖 style 寬度為100畫素,高度為110畫素,背景是綠色 給這乙個div標籤定css樣式。2 內嵌 在裡面內嵌在head內部body外部 即舉例 我是洋洋1 我是洋洋2 我是洋...

CSS基礎知識整理二

下面是定義乙個盒子的border div下面是定義乙個盒子的寬度,其寬度由padding left padding right margin left margin right border left border right和自己本身物體的寬度組成 div 以上案例中div的寬度為232px 乙個...