笔记_css3选择器字体.docVIP

第十三章css3本节学习目标11css3介绍22css3新增选择器33css3文本字体背景CSS即层叠样式表（Cascading StyleSheet）CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等CSS3 是最新的 CSS 标准。CSS3 完全向后兼容，因此您不必改变现有的设计。css3中存在了优雅降级和渐进增强的特点什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）？　　渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。观点则认为应关注于内容本身。　　优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。观点认为应该针对那些最高级、最完善的浏览器来设计网站。　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。在HTML中，通过各种各样的属性，我们可以给元素增加很多附加信息。在css3中，增加了如下所示的三个属性选择器，使得属性选择器有了通配符的概念。（1）、新增属性选择器[att*=val][att^=val][att$=val]1、 [att*=val] : 表示att属性值中包含val字符的选择器写法 用法：Css：style [class*=p] { background:red; }/styleHtml：div class=div1 p class=p1第一段/p p class=divp2第二段/p p class=p3第三段/p/div2、 [att^=val]： 表示att属性中以val为属性值开头字符的选择器写法用法：Css：style [class^=p] { background:red; }/styleHtml：div class=div1 p class=p1第一段/p p class=divp2第二段/p p class=p3第三段/p/div3、[att$=val] 表示att属性中以val为属性值结尾字符的选择器写法用法：Css：style [class$=f] { background:red; }/styleHtml：div class=div1 p class=p1f第一段/p p class=fdivp2第二段/p p class=pf3第三段/p/div复习css2中的属性选择器：E[att]E[att=”val”]E[att~=val]E[att|=val]1、[class] : 表示给设有class属性的所有元素设置样式用法：div class=”div1”/divdiv class=”div2”/div[class] { color:red;}2、 [att=“val”]: 表示att属性等于val的元素 用法：Css：style [class=“div1”] { background:red; }/styleHtml：div class=div1 /divdiv class=adiv1 /div3、[class~=val] : 表示给class属性值包含val字符的元素设置样式，适用于由空格分隔的属性值；用法：div class=”div1 top”/divdiv class=”div1”/divdiv class=”top div1”/div[class~=div1] { color:red ; }4、[att |=val] : 表示给att属性值为val开头连字符的元素设置样式；用法：div class=”div1”/divdiv class=”div1-aa”/divdiv class=”aa-div1”/divdiv class=”div1aa”/div[class|=div1] { color:red; } 伪元素选择器：（5个）伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。如果你的网站只需要兼容webkit、fi