復合選擇器
選擇器和層疊性權重計算
選擇器命名規則
*文字與字型屬性
*繼承性
*盒模型
*浮動*定位
*彈性布局
*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-overflowcolor
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-radius2、背景顏色和文字顏色都可以被過度
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 乙個...