HTML5权威指南读书笔记【第三部分】

HTML5权威指南读书笔记【第三部分】

1、span.class1.class2会选择同时指定class1和class2的元素 2、[href]匹配所有具有href属性的元素 3、[class~=“class2”]空格隔开的多个属性 4、[lang|=“en”]匹配连字符隔开的分割包含一个同名字符 5、选择器示例： 后代 #mytable td 子代 body > * > span, tr > th(紧跟无间隔)  兄弟 p + a（p后面的同级别的a，只匹配第一个） 普通兄弟 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匹配任意元素的第一个子元素 对应:last-child 10、p > span:first-child匹配作为p元素第一个子元素的任意span元素 11、:only-child匹配仅含有一个子元素的元素的子元素（好绕） 12、:only-of-type匹配父元素包含的唯一类型的子元素 13、body:nth-child(2) body的第二个子元素 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 属性记忆规则先上下后左右 设定值时 先水平方向半径后垂直方向半径  如果只提供一个值那么水平与垂直的值相同 26、border-radius /分隔水平和垂直的值 两值全局水平跟垂直 四值左上右上右下左下 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 上下区分取消，但是不会像inline一样忽略元素 35、display:run-in 当兄弟元素为块级则插入元素作为块级元素的一部分处理 如果兄弟元素为行内，那么插入元素作为块级 36、float:left 移动元素，使其左边界挨着包含块的左边界，或者另一个浮动块的右边界 right同理，none元素位置固定 37、clear可以指定浮动元素的一个边界或者两个边界不能挨着另一个浮动元素 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(‘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(-45deg) scaleX(1.2); -45代表逆时针旋转 -moz-transform-origin:right top; 以什么位置作为旋转的中心点 51、color元素一般用于设置文本的颜色 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 设置鼠标的样式