HTML5權威指南讀書筆記【第三部分】
來源：程序員人生 發布時間：2014-12-18 08:37:52 閱讀次數：4059次
1、span.class1.class2會選擇同時指定class1和class2的元素
2、[href]匹配所有具有href屬性的元素
3、[class~=“class2”]空格隔開的多個屬性
4、[lang|=“en”]匹配連字符隔開的分割包括1個同名字符
5、選擇器示例：
后代 #mytable td
子代 body > * > span, tr > th(緊跟無間隔)
兄弟 p + a（p后面的同級別的a，只匹配第1個）
普通兄弟 p ~ a (p后面所有同級別的a)
6、偽元素選擇器
::first-line 文本元素的首行 動態評估
::first-letter 文本元素的首字母
a:before {
content:“the text before a”
}
a:after {
content:“the text after a”
}
7、計數器
counter-reset: paracount(計數器名稱) 10(初始值 默許為1 后面的數字相當于在1的基礎上增加的值) 后面可以添加更多計數器名稱
計數器初始化后可以作為before after的content值
content:counter(paracount , lower-alpha) “.”
counter-increment計數器增量
counter-increment: paramount 2; 默許為1
8、:root選擇html
9、:first-child匹配任意元素的第1個子元素 對應:last-child
10、p > span:first-child匹配作為p元素第1個子元素的任意span元素
11、:only-child匹配僅含有1個子元素的元素的子元素（好繞）
12、:only-of-type匹配父元素包括的唯1類型的子元素
13、body:nth-child(2) body的第2個子元素
14、:enabled匹配所有無禁用的元素
15、:checked + span 包括checked屬性的兄弟元素
16、:valid :invalid 對加驗證的元素的匹配 <input required />
:valid背后原理選中所有并不是無效的input元素
17、:required :optional
18、:link用于匹配為點擊過的超鏈接樣式 :visited用于匹配點擊過的超鏈接樣式
19、:hover 匹配鼠標目前所指區域所屬的元素 會選擇嵌套的多個元素
20、:active 匹配鼠標按下或手指按下是的元素，松手釋放
21、:focus匹配當前取得焦點的元素 可輸入區域
22、a:not([href*=“apress”])匹配子元素沒有包括apress字符串的href元素的所有元素
23、:empty匹配沒有任何子元素的元素 :lang(en)匹配基于lang全局屬性值的元素
24、簡寫屬性 border 寬度 樣式 色彩 順序可互換 自動辨認
25、border-top-left-radius 屬性記憶規則先上下后左右 設定值時 先水平方向半徑后垂直方向半徑
如果只提供1個值那末水平與垂直的值相同
26、border-radius /分隔水平和垂直的值 兩值全局水平跟垂直 4值左上右上右下左下
27、背景示例：
background-color:lightgray;
background-image:url(banana.png);圖象浮于背風景之上
background-size:40px 40px;
background-repeat:repeat-x;延x軸重復填充
background-size可設定值contain判斷圖象長寬，取大值適配到容器對應長度 cover取小值縮放
background-position 左 上 距離，常常在no-repeat布局時使用 除具體像素 可使用top bottom center等
先定義垂直方向，后定義水平方向。
background-attachment背景附著方式 fixed 固定在視窗上 local scroll
background:lightgray top right no-repeat border-box content-box local url(banana.png);
28、box-shadow陰影 hoffset offset blur spread color inset
29、display設置為inline的元素設置margin top bottom 無效
30、overflow:hidden隱藏掉溢出的內容 overflow:scroll添加轉動條
31、visibility visible可見 collapse不可見且不占空間（只能利用于表相干元素 大部份閱讀器不支持，對元素display利用none值可以實現相同效果） hidden 不可見占空間
32、display:block 上下辨別類似于p標簽效果但可利用于所有元素
33、display:inline 閱讀器會疏忽掉某些屬性，如width height margin
34、display:inline-block 上下辨別取消，但是不會像inline1樣疏忽元素
35、display:run-in 當兄弟元素為塊級則插入元素作為塊級元素的1部份處理
如果兄弟元素為行內，那末插入元素作為塊級
36、float:left 移動元素，使其左側界挨著包括塊的左側界，或另外一個浮動塊的右側界
right同理，none元素位置固定
37、clear可以指定浮動元素的1個邊界或兩個邊界不能挨著另外一個浮動元素
38、position:static relative 根據static值肯定重新定位元素
absolute相對頁面 fixed相對閱讀器
39、z-index控制層次 index越小越靠后 默許為0
40、可伸縮元素不能包括浮動元素 -webkit-box-flex:3 1 依照比例分配
41、box-align垂直方向對齊方式 默許是拉伸 -webkit-box-align:end;對齊底部
42、box-pack:justify 設置了max-width以后 當到達最大寬度以后根據box-flex的值按比例分配空閑區域
43、whitespace:pre-line 空白符被緊縮 添加換行并保存原有換行
44、letter-spacing字母間距 word-spacing單次間距 line-height行高
45、text-indent首行縮進
46、text-transform:uppercase 轉換為大寫
47、援用web字體
@font-face {
font-family:’MyFont’;
font-style:normal;
font-weight:normal;
src:url(‘http://xxx/MyFont.woff');
}
p {
font-family:MyFont, cursive;
}
48、動畫過渡：
#banana:hover {
-webkit-transition-delay:100ms;
-webkit-transition-property:各種改變的屬性；(省略時為所有屬性)
-webkit-transition-duration:500ms;
(-webkit-transition-timing-function:linear)中間值變化曲線
}
反向過渡：（過渡恢復初始狀態）
#banana {
-webkit-transition-delay:100ms;
-webkit-transition-duration:250ms;
}
49、動畫：不會真正改變終究的狀態
animation-name:’AnimationName’;
@-webkit-keyframes AnimationName {
from {
動畫開始狀態
}
50% {
}
70% {
}
to {
動畫結束狀態
}
}
animation-direction:alternate;結束以后反方向履行，normal結束以后立刻恢復初始狀態
animation-play-state:paused 動畫停止 playing 動畫開始播放
50、變換
-moz-transform:rotate(⑷5deg) scaleX(1.2);
⑷5代表逆時針旋轉
-moz-transform-origin:right top;
以甚么位置作為旋轉的中心點
51、color元素1般用于設置文本的色彩
52、opacity透明度
53、table border-collapse:collapse不要為相鄰元素繪制兩個邊框
border-spacing:10px設置邊框的間隔
empty-cells:hide 隱藏空白cell邊框
caption-side:top bottom控制標題的位置
54、ol list-style-type:lower-alpha;列表前面的序號，同時可以在單獨列表項中單獨指定樣式
list-style-image:url(‘banana-vsmall.png’);圖片充當序號
list-style-position:inside outside序號相對列表項內容框的位置
55、cursor:progress 設置鼠標的樣式
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
