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

概述1、span.class1.class2会选择同时指定class1和class2的元素 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; 默许为18、:root选择HTML9、:first-child匹配任意元素的第1个子元素 对应:last-child10、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 :optional18、: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 scrollbackground:lightgray top right no-repeat border-Box content-Box local url(banana.png);28、Box-shadow阴影 hoffset offset blur spread color inset29、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 margin34、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越小越靠后 默许为040、可伸缩元素不能包括浮动元素 -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 设置鼠标的样式 总结

以上是内存溢出为你收集整理的HTML5权威指南读书笔记【第三部分】全部内容，希望文章能够帮你解决HTML5权威指南读书笔记【第三部分】所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。