HTML5权威指南读书笔记【第三部分】
来源：程序员人生 发布时间：2014-12-18 08:37:52 阅读次数：3873次
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 设置鼠标的样式
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
