网页设计入门与提高

第10章CSS3快速入门内容简介CSS（CascadingStyleSheet，层叠样式表）在网页制作时经常会被使用到，它与HTML和JavaScript结合能够制作出绚丽夺目的网页。使用CSS只要对相应的代码做出简单修改就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。与之前的版本相比，CSS3增加了许多新的功能，也在原来的基础上对某些内容做出了修改。本章向读者介绍CSS3的基础知识，通过本章的学习，读者不仅可以了解CSS3的发展和优缺点，还可以掌握CSS3中的新增颜色，也能够对CSS3中的新增属性有一定的认识。本章重点：了解CSS3的发展历史了解CSS3的优缺点熟悉浏览器对CSS3的支持情况掌握HSL和HSLA的使用掌握RGBA和Opacity的使用熟悉CSS3中新增加的选择器了解CSS3中新增的多种属性10.1了解CSS3CSS3是CSS的升级版本，也是对CSS2的扩展，它增加了修改了许多新的功能。下面简单了解CSS3的基础知识，包括它的发展、优缺点和浏览器的支持情况。10.1.1CSS3发展概述

在20世纪90年代初，HTML语言诞生，各种形式的样式表也开始出现。各种不同的浏览器结合自身的显示特性，开发了不同的样式语言，以便于读者自己调整网页的显示效果，这时的样式语言仅供读者使用，而不是供设计者使用。随着HTML的发展，1994年初，哈坤·利提出了CSS的最初想法，伯特·波斯当时正在设计Argo浏览器，他们决定共同开发CSS。10.1.2CSS3优缺点CSS3在为开发者带有全新体验的同时，还存在着一些负面影响。开发者在使用时应该扬长避短，这样才能更好的理解和学习CSS3。落伍的IE浏览器CSS3新增的许多功能在IE浏览器中无法看到效果，但是随着IE浏览器新版本的发布，它对CSS3和HTML5的支持功能也在增加。出于安全性考虑，应该尽量避免将这些新功能用于重要的设计中，同时也应该保证，当这些效果不起作用时有替代的解决方案。验证问题和代码冗余目前的CSS3规范并不是最终版本，不同的浏览器都在使用各自的私有属性（例如Chrome浏览器使用-webkit-，Opera浏览器使用-o-）实现新功能，这可能会为CSS验证埋下隐患。同时，这还使CSS代码显得十分冗余。反面效果设计页面时并不是一定要使用CSS3的新增属性，不恰当的使用可能会带来一些反面效果，阴影效果就是一个例子。10.1.3浏览器支持情况CSS3为广大Web开发者带来了全新的体验，但是并非所有的浏览器都提供对它的支持。各个主流的浏览器都定义了各自的私有属性，以便用户体验CSS3的新特性。浏览器这种定义自己的私有属性的方法可以避免不同的浏览器在解析相同属性时出现冲突，但是也为开发者带来了麻烦，因为Web开发者不仅需要使用更多的CSS样式代码，而且还非常容易导致同一个页面在不同的浏览器之间表现不一致。1．CanIUseCanIUse的功能非常强大，它不仅可以检测浏览器对CSS3的支持情况，也能检测HTML5和SVG等其他内容。2．findmebyIPfindmebyIP是一个简单实用的在线应用，帮助开发者检测使用的浏览器版本是否支持CSS3和HTML5，支持哪些属性。10.2CSS3新增颜色CSS3比之前的CSS2有许多不同，模块化细分的同时也新增了新的功能。例如，开发者可以使用RGB、十六进制或者英文颜色名称（例如black代表黑色）设置背景。CSS3中定义了一些新的属性，设置这些属性还可以控制色调、饱和度、亮度和透明度等信息。本节介绍CSS3中新增的与颜色有关的属性，包括HSL、HSLA、RGBA和Opacity四个属性。10.2.1HSL属性HSL色彩模式是工业界的一种颜色标准，它是通过对色调、饱和度、亮度三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。HSL即是代表色调、饱和度和亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。色调

即Hue，0或者360表示红色，120表示绿色，240表示蓝色，开发者也可以取其他数值来确定颜色。饱和度

即Saturation，它的值在0%到100%之间。0%意味着灰色，而100%是全彩。亮度

即Lightness，它也是一个百分比值，在0%到100%之间。0%表示黑色，100%表示白色。10.2.2HSLA属性HSLA是在HSL的基础上增加一个透明度的设置，它是HSL颜色值的扩展，带有一个alpha通道，规定了对象的不透明度。HSLA的使用语法如下：hsla(hue,saturation,lightness,alpha)

在上述语法中，alpha参数定义不透明度，它的值是在0和1之间浮点数值。其中，0表示完全透明，1表示完全不透明。10.2.3RGBA属性RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红（Red）、绿（Green）、蓝（Blue）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。RGBA有时候会被描述为一个颜色空间，但是它其实仅仅是RGB模型附加了额外的信息。10.2.4Opacity属性

在前面两节中，HSLA和RGBA两个属性中都涉及到了透明度的概念，实际上，CSS3还为开发者提供了opacity属性。opacity属性在声明元素的不透明度，该属性类似于alpha透明度，不透明度的值是0到1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。10.3CSS3新增选择器

要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的，CSS3新增了多种选择器，下面对这些选择器进行简单了解。10.3.1属性选择器

在CSS2中已经引入了属性选择器，属性选择器可以根据元素的属性及属性值来选择元素。CSS3中增加了更高级的选择器，这些选择器包含了更多的部分值属性选择器，按照规范的说法，应该将它们称为“子串匹配属性选择器”。CSS3中新增加的3个属性选择器及其说明如下所示。[attribute^="val"]匹配具有attribute属性、且值以value开头的元素。[attribute$="val"]匹配具有attribute属性、且值以value结尾的元素。[attribute*="val"]匹配具有attribute属性、且值中含有value的元素。10.3.2结构化伪类选择器

结构化伪类选择器用于向某些选择器添加特殊的效果。在介绍新增的结构性伪类选择器之前，了解一下伪类选择器和伪元素选择器。伪类选择器是指已经定义好的选择器，不能随便取名，例如作用在a元素中的a:link、a:visited、a:hover和a:active。伪元素选择器并不是真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，例如first-line、first-letter、before和after是4种伪元素选择器。CSS3中新增加了一些结构化伪类选择器，如表10-1对这些选择器进行了说明。

表10-1结构化伪类选择器

选择器名称说明E:root匹配文档的根元素。在HTML中，根元素永远是htmlE:nth-child(n)匹配父元素中的第n个子元素EE:nth-last-child(n)匹配父元素中的倒数第n个结构子元素EE:nth-of-type(n)匹配同类型中的第n个同级兄弟元素EE:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素EE:last-child匹配父元素中最后一个E元素E:first-of-type匹配同级兄弟元素中的第一个E元素E:only-child匹配属于父元素中唯一子元素的EE:only-of-type 匹配属于同类型中唯一兄弟元素的EE:empty匹配没有任何子元素（包括text节点）的元素E10.3.3目标伪类选择器CSS3中新增了一种目标伪类选择器，用于匹配相关URL指向的E元素。基本语法如下：

如下代码演示了E:target选择器的简单使用：.E:target{ /*样式代码*/}p:target{ border:2pxsolid#D4D4D4; background-color:#e5eecc;10.3.4UI元素状态伪类选择器CSS3中新增了4种UI元素状态伪类选择器，其说明如表10-2所示。

表10-2UI元素状态伪类选择器选择器名称说明E:enabled匹配所有用户界面（form表单）中处于可用状态的E元素E:disabled匹配所有用户界面（form表单）中处于不可用状态的E元素E:checked匹配所有用户界面（form表单）中处于选中状态的元素EE::selection匹配E元素中被用户选中或处于高亮状态的部分10.3.5否定伪类否定伪类用于匹配所有不匹配简单选择符s的元素。基本语法如下：.E:not(s):{attribute}例如，下面样式表示设置非p元素的所有元素的背景色：:not(p){ background-color:#ff0000;}10.3.6通用兄弟选择器CSS3中的通用兄弟选择器是指E~F，用于匹配E元素之后的F元素。基本语法如下：E~F:{attribute}例如，下面样式表示匹配div元素之后的p元素背景颜色：div~p{ background-color:#00FF00;10.4CSS3新增属性

除了新增颜色、新增选择器外，CSS3中还增加许多属性，使用这些属性可以更加快速的设计网页效果。10.4.1边框属性

在CSS2中使用border属性只能设置纯色或者简单的线条，CSS3中添加了新的边框样式，可以使用图片设置边框样式和颜色，还可以添加阴影框，甚至可以实现创建圆角边框的功能。例如，表10-3列出了CSS3中新增的边框属性，并对这些属性进行了说明。

表10-3新增加的边框属性属性名称说明border-image设置边框背景图像border-image-outset指定边框图像区域超出边框的量border-image-repeat图像边框平铺方式，其值包括repeated（平铺）、rounded（铺满）和stretched（拉伸）border-image-slice指定图像边框的向内偏移border-image-source指定用作边框的图片border-image-width指定图片边框的宽度border-shadow设置边框的阴影效果border-radius设置边框的圆角效果10.4.2背景属性CSS3中新增加的背景属性有3个，它们分别是background-clip、background-origin和background-size。background-clip属性

指定背景的绘制区域。background-origin属性

指定背景图片的定位区域。background-size属性

指定背景图片的尺寸。

10.4.3文本属性CSS3中新增加了一系列的文本属性，通常这些属性可以对文本进行操作，如表10-4列出了这些属性。

表10-4新增加的文本属性属性名称说明hanging-punctuation指定标点字符是否位于线框之外punctuation-trim指定是否对标点字符进行修剪text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行text-emphasis向元素的文本应用重点标记以及重点标记的前景色text-justify指定当text-align设置为"justify"时所使用的对齐方法text-outline指定文本的轮廓text-overflow指定当文本溢出包含元素时发生的事情text-shadow向文本添加阴影text-wrap 指定文本的换行规则word-break指定非中日韩文本的换行规则word-wrap允许对长的不可分割的单词进行分割并换行到下一行10.4.4盒模型属性

盒模型可以轻松地创建适应浏览器窗口的流动布局或者自适应字体大小的布局。CSS3中增加了一系列的盒模型属性，如表10-5所示。

表10-5盒模型属性属性名称说明overflow-x检索或设置当对象的内容超过其指定宽度时如何管理内容overflow-y检索或设置当对象的内容超过其指定高度时如何管理内容overflow-style指定溢出元素的首选滚动方法box-align定义子元素在盒子内垂直方向上的空间分配方式box-direction定义盒子的显示顺序box-flex定义子元素在盒子内的自适用尺寸box-flex-group定义自适应子元素群组box-lines定义子元素分列显示box-ordinal-group定义子元素在盒子内的显示位置box-orient定义盒子分布的坐标轴box-pack定义子元素在盒子内水平方向的空间分配方式10.4.5用户界面属性

用户界面属性用来定义与界面有关的内容，如表10-6对这些属性进行了说明。表10-6用户界面属性属性名称说明appearance允许将元素设置为标准用户界面元素的外观box-sizing允许以确切的方式定义适应某个区域的具体内容icon为创作者提供使用图标化等价物来设置元素样式的能力nav-down指定在使用arrow-down导航键时向何处导航nav-index设置元素的tab键控制次序nav-left指定在使用arrow-left导航键时向何处导航nav-right规定在使用arrow-right导航键时向何处导航nav-up规定在使用arrow-up导航键时向何处导航outline-offset对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓resize指定是否可由用户对元素的尺寸进行调整zoom设置或检索对象的缩放比例10.4.6新增的其他属性CSS3中新增加了多种属性，除了前面几节介绍的属性外，还包含多列类布局属性和动画属性等多个属性，如表10-7对这些属性进行了说明。

表10-7CSS3中新增的其他属性属性名称说明columns可以同时定义多栏的数目和每栏宽度column-width可以定义每栏的宽度column-span定义元素可以在栏目上定位显示column-rule定义每栏之间边框的宽度、样式和颜色column-rule-color定义每栏之间边框的颜色column-rule-width定义每栏之间边框的宽度column-rule-style定义每栏之间边框的样式column-gap定义两栏之间的间距距离column-fill定义栏目的高度是否统一column-count可以定义栏目的数目column-break-before定义元素之前是否断行column-break-after定义元素之后是否断行10.4.6新增的其他属性@keyframes定义动画animation所有动画属性的简写属性，除了animation-play-state属性animation-name定义@keyframes动画的名称animation-duration定义动画完成一个周期所花费的秒或毫秒animation-timing-function定义动画的速度曲线animation-delay定义动画何时开始animation-iteration-count定义动画被播放的次数animation-direction定义动画是否在下一周期逆向地播放animation-play-state定义动画是否正在运行或暂停animation-fill-mode定义对象动画时间之外的状态transition简写属性，用于在一个属性中设置四个过渡属性transition-property规定应用过渡的CSS属性的名称transition-duration指定过渡效果花费的时间transition-timing-function指定过渡效果的时间曲线transition-delay指定过渡效果何时开始10.5实战——CSS3属性制作漂亮按钮CSS3的功能非常强大，本章简单介绍了CSS3的基础知识和新增属性，本节实战将利用CSS3中的属性制作页面中常见的按钮。例如，图10-15显示了第一个页面中的按钮内容。10.5实战——CSS3属性制作漂亮按钮

图10-15页面中的漂亮按钮1根据图10-15的页面效果设计页面，实现步骤如下：（1