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