HTML5应用开发和 与实践课件第9章CSS3基础.ppt

;;9.1 CSS3概述;9.2 CSS3新特性;4．多背景图 CSS3允许背景属性设置多个属性值，如background-image、background-repea、background-size、background-position、background-originand、background-clip等，这样就可以在一个元素上添加多层背景图片。如果要设计复杂的网页效果（如圆角、背景重叠等），就不用再为HTML文档添加多个无用的标签了，使用该属性还可以优化网页文档的结构。 5．文字阴影 text-shadow在CSS2中就已经存在，但并没有被广泛应用。CSS3采用了该特性，并重新进行了定义。该属性提供了一种新的跨浏览器的方案使文字看起来更醒目。 6．开放字体类型 @font-face是最被期待的CSS3特性之一，它在CSS2中就已经被引入了，但是它在网站上仍然没有像其他CSS3属性那样被广泛普及，这主要受阻于字体授权和版权问题，潜入的字体很容易从网站上下载到，这是字体厂商的主要顾虑。 7．开放字体类型 Border-radius属性可以实现不使用背景图片也能给HTML元素添加圆角。它可能是现在使用的最多的CSS3属性，之所以这么受欢迎，其主要是因为使用圆角比较美观，而且不会与设计和可用性产生冲突。它不同于添加JavaScript或多个HTML标签，仅需要添加一些CSS属性。这个方案简洁而有效，可以让开发人员免于花费更多得时间来寻找精巧的浏览器方案和基于JavaScript圆角。; 为了便于初学者了解选择器的一个发展方向，这里先简单介绍一下CSS 1以及CSS 2中的选择器。下面先来看一下在CSS 1中增加了哪些选择器。CSS 1中定义的选择器如表9-1所示。 表9-1 CSS 1中定义的选择器; CSS 1中的选择器的功能是非常弱的，覆盖范围也非常有限。例如，上表最后3个选择器在CSS 2中已经被重新定义，目前的是规范和增强这些选择器的功能。升级到CSS 2后，选择器类型和功能都获得了极大的扩充和增强，以便Web设计师在复杂结构中能自由渲染页面。CSS 2中定义的选择器如表9-2所示。 表9-2 CSS 2中定义的选择器;;使用这个[att^=val]属性选择器的运行结果如图9-2所示。 图9-2 使用[att^=val]属性选择器的示例 ;2．[att$=val]属性选择器 [att$=val]属性选择器的含义是：如果元素用att表示的属性之属性值的结尾字符为用val指定的字符的话，则该元素使用这个样式。例如，可以将属性选择器“[id=mr1]”修改成“[id$=mr1]” 如果将使用的[att=val]属性选择器改为使用如下的[att$=val]属性选择器，并且将val指定为“-1”，则页面中id为“jlmr1-1”、“jlmr2-1”的div元素的背景色都变为红色，这主要是因为这些元素的id属性的结尾字符都为“-1”字符。另外需要注意的是该属性选择器中必须在指定匹配字符前加上“\”这个转义字符。 style type=text/css [id$=\-1]{ background-color:red; } /style;使用这个[att$=val]属性选择器的运行结果如图9-3所示。 图9-3 使用[att$=val]属性选择器的示例 ;3．[att*=val]属性选择器 [att*=val]属性选择器的含义是：如果元素用att表示的属性之属性值中包含用val指定的字符的话，则该元素使用这个样式。例如，将属性选择器“[id=mr1]”修改成“[id*=mr1]”。 如果将使用的[att=val]属性选择器改为使用如下的[att*=val]属性选择器，则页面中id为“mr1”、“jlmr1-1”、“jlmr1-2”的div元素的背景色都变为红色，这主要是因为这些元素的id属性中都包含“mr1”字符。 style type=text/css [id*=mr1]{ background-color:red; } /style;使用这个[att*=val]属性选择器的运行结果如图9-4所示。 图9-4 使用[att*=val]属性选择器的示例 ; 结构性伪类选择器指的是根据HTML元素之间的结构关键进行筛选的伪类选择器。结构性伪类选择器如下表9-3所示。 表9-3 CSS 3新增的结构性伪类选择器;下面对几种比较重要的结构性伪类选择器进行讲解。 1．:root伪类选择器 :root伪类选择器将样式绑定到页面的根元素中，所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是制定包含着整个页面的“html”部分。 【例