第7章精通CSS样式

1、7.1.1了解了解CSS样式的发展历程样式的发展历程CSS 是Cascading Style Sheets（层叠样式表）的缩写，它是一种对Web 文档添加样式的简单机制，是一种表现HTML 或XML 等文件外观样式的计算机语言，它是由W3C 来定义的。CSS 用来作为网页的排版与布局设计，在网页设计制作中无疑是非常重要的一环。CSS 是以已有的基础来弥补HTML 中的不足，也让网页设计更为灵活。 随着CSS的广泛应用，CSS技术也越来越成熟。CSS现在有3个不同层次的标准，即CSS 1、CSS 2 和CSS 3。 CSS 1是CSS 的第一层次标准，它正式发布于1996年12月，在1999年1

2、月进行了修改。该标准提供简单的CSS样式表机制，使得网页的编写者可以通过附属的样式对HTML 文档的表现进行描述。 CSS 2是1998 年5 月正式作为标准发布的，CSS 2基于CSS 1，包含了CSS 1的所有特点和功能，并在多个领域进行完善，将样式文档与文档内容相分离。CSS 2 支持多媒体样式表，使得网页设计者能够根据不同的输出设备给文档制定不同的表现形式。 CSS 3 目前还处于工作草案阶段，还没有正式发布，在该工作草案中制定了CSS 3的发展路线，详细列出了所有模块，并计划在未来进行规范。7.1.2CSS样式的优势样式的优势CSS 样式可以为网页上的元素精确地定位和控制传统的格式属

3、性（如字体、尺寸、对齐等），还可以设置如位置、特殊效果、鼠标滑过之类的HTML属性。7.1.3CSS样式的不足样式的不足 CSS 的功能虽然很强大，但是它也有某些局限性。CSS 样式表的主要不足是，它局限于主要对标签文件中的显示内容起作用。显示顺序在某种程度上可以改变，可以插入少量文本内容，但是在源HTML（或XML）中做较大改变，用户需要使用另外的方法，例如使用XSL转换（或XSLT）。 同样，CSS 样式表的出现比HTML 要晚，这就意味着一些最老的浏览器不能够识别用CSS 所写的样式，并且CSS 在简单文本浏览器中的用途也有限，例如为手机或移动设备编写的简单浏览器等。 在Dreamwea

4、ver CC中全面支持最新的CSS 3属性设计，重新规划了“CSS设计器”面板，并且对CSS样式的创建方法和创建流程进行了改进，使得用户在Dreamweaver中创建CSS样式更加方便和快捷。 “CSS设计器”是Dreamweaver中非常重要的面板之一，CSS样式的创建与管理全部集成在全新的“CSS设计器”面板中。在该面板中支持可视化的创建与管理网页中的CSS样式，在该面板中包括“源”、“媒体”、“选择器”和“属性”4个部分，每个部分针对CSS样式不同的管理与设置操作。7.1.4CSS样式的基本语法样式的基本语法CSS语言由选择器和属性构成，样式表的基本语法如下：CSS选择器属性1: 属性值

5、1; 属性2: 属性值2; 属性3: 属性值3; 7.2.1“源源”选项区选项区“CSS设计器”面板上的“源”选项区用于确定网页使用CSS样式的方式，是使用外部CSS样式表文件还是使用内部CSS样式。单击“源”选项区右上角的“添加源”按钮 ，在弹出菜单中提供了3种定义CSS样式的方式7.2.2“媒体媒体”选项区选项区 在“CSS设计器”面板中新增了有关媒体查询的功能，在“媒体”选项区中可以为不同的媒介类型设置不同的CSS样式。7.2.3“选择器选择器”选选项区项区 “CSS设计器”面板中的“选择器”选项区用于在网页中创建CSS样式，网页中所创建的所有类型的CSS样式都会显示在该选项区的列表中，

6、单击“选择器”选项区右上角的“添加选择器”按钮 ，即可在“选择器”选项区中出现一个文本框，用于输入所要创建的CSS样式的名称。7.2.4“属性属性”选项区选项区 “CSS设计器”面板中的“属性”选项区主要用于对CSS样式的属性进行设置和编辑，在该选项区中将CSS样式属性分为5种类型，分别是“布局”、“文本”、“边框”、“背景”和“其他”。单击不同的按钮，可以快速切换到该类别属性的设置。7.3.1通配符选择器通配符选择器在CSS样式中提供了多种类型的CSS选择器，在创建CSS样式时，首先需要了解各种类型选择器的作用，以便选择合适的选择器创建CSS样式，本节将向读者介绍CSS样式中的各种选择器类型

7、，以及不同CSS选择器的使用方法。 在进行网页设计时，可以利用通配选择器设置网页中所有的HTML标签使用同一种样式，他对所有的HTML元素起作用。通配选择器的基本语法如下。 * 属性:属性值; *表示页面中的所有HTML标签，属性表示CSS样式属性名称，属性值表示CSS样式属性值。动手实践动手实践使用通配符选择器控制网页默认边界使用通配符选择器控制网页默认边界动手实践动手实践使用标签选择器控制网页整体属性使用标签选择器控制网页整体属性动手实践：使用通配符选择器控制网页默认边界最终文件：光盘最终文件文件第7章7-3-1.html视 频：光盘视频第7章7-3-1.swf7.3.2标签选择器标签选择

8、器 HTML文档是由多个不同标签组成的，标签选择器可以用来控制标签的应用样式。例如，P选择器，可以用来控制页面中所有标签的样式风格。标签选择器的基本语法如下。 标签名称 属性:属性值; 标签名称表示HTML标签名称，如、等HTML标签。 动手实践：使用标签选择器控制网页整体属性最终文件：光盘最终文件文件第7章7-3-2.html视 频：光盘视频第7章7-3-2.swf7.3.3类选择器类选择器 类选择器用来为一系列的标签定义相同的显示样式，其基本语法如下。 .类名称 属性:属性值; 类名称表示类选择符的名称，其具体名称由CSS定义者自己命名。在定义类选择器时，需要在类名称前面加一个英文句点（.

9、）。 .font01 color: black; .font02 font-size: 12px;动手实践动手实践使用类选择器控制网页中部分文字效果使用类选择器控制网页中部分文字效果7.3.4ID选择器选择器 ID选择器定义的是HTML页面中某一个特定的元素，即一个网页中只能有一个元素使用某一个ID的属性值。ID选择器的基本语法如下。 #ID名称 属性:属性值; ID名称表示ID选择器的名称，其具体名称由CSS定义者自己命名。动手实践动手实践使用使用ID选择器控制页面指定元素选择器控制页面指定元素动手实践：使用类选择器控制网页中部分文字效果最终文件：光盘最终文件文件第7章7-3-3.html视

10、 频：光盘视频第7章7-3-3.swf动手实践：使用ID选择器控制页面指定元素最终文件：光盘最终文件文件第7章7-3-4.html视 频：光盘视频第7章7-3-4.swf7.3.5伪类及伪对象选择器伪类及伪对象选择器 伪类也属于选择器的一种，包括:first-child、:link、:visited、:hover、:active、:focus和:lang等，但是由于不同的浏览器支持不同类型的伪类，因而没有一个统一的标准，很多的伪类并不常用到，其中，有一组伪类是浏览器都支持的，即超链接伪类，包括:link、:visited、:hover和:active。7.3.6复合选择器复合选择器 当仅仅想对

11、某一个对象中的“子”对象进行样式设置时，复合选择器就派上了用场，复合选择器指选择器组合中前一个对象包含后一个对象，对象之间使用空格作为分隔符。动手实践动手实践使用伪类及伪对象选择器设置超链接文使用伪类及伪对象选择器设置超链接文字样式字样式动手实践动手实践创建复合选择器创建复合选择器动手实践：使用伪类及伪对象选择器设置超链接文字样式最终文件：光盘最终文件文件第7章7-3-5.html视 频：光盘视频第7章7-3-5.swf动手实践：创建复合选择器最终文件：光盘最终文件文件第7章7-3-6.html视 频：光盘视频第7章7-3-6.swf7.3.7群选择器群选择器 对于单个HTML对象进行样式指定

12、，同样可以对一组选择器进行相同的CSS样式设置。 h1,h2,h3,p,span font-size: 12px; font-family: 宋体; 动手实践动手实践使用群选择器同时设置页面中多个元素使用群选择器同时设置页面中多个元素动手实践：使用群选择器同时设置页面中多个元素最终文件：光盘最终文件文件第7章7-3-7.html视 频：光盘视频第7章7-3-7.swf CSS 样式能够很好地控制页面的显示，以达到分离网页内容和样式代码。在网页中应用的CSS 样式表有4 种方式：内联CSS 样式、嵌入CSS 样式、外部CSS 样式和导入CSS 样式。在实际操作中，可根据设计的具体要求来进行选择。

13、7.4.1内联内联CSS样式样式动手实践动手实践使用内联使用内联CSS样式样式动手实践：使用内联CSS样式最终文件：光盘最终文件文件第7章7-4-1.html视 频：光盘视频第7章7-4-1.swf7.4.2内部内部CSS样式样式 内部CSS 样式就是将CSS 样式代码添加到与 标签之间，并且用 与 标签进行声明。这种写法虽然没有完全实现页面内容与CSS 样式表现的完全分离，但可以将内容与HTML 代码分离在两个部分进行统一的管理。动手实践动手实践使用内部使用内部CSS样式样式动手实践：使用内部CSS样式最终文件：光盘最终文件文件第7章7-4-2.html视 频：光盘视频第7章7-4-2.sw

14、f7.4.3外部外部CSS样式样式 外部CSS 样式是CSS 样式中较为理想的一种形式。将CSS 样式代码单独编写在一个独立文件之中，由网页进行调用，多个网页可以调用同一个外部CSS样式文件，因此能够实现代码的最大化使用及网站文件的最优化配置。7.4.4导入导入CSS样式样式 导入样式与链接样式基本相同，都是创建一个单独的CSS 样式文件，然后再引入到HTML 文件中，只不过语法和运作方式上有区别。采用导入的CSS 样式，在HTML 文件初始化时，会被导入到HTML 文件内，作为文件的一部分，类似于内嵌样式。而链接样式是在HTML 标签需要CSS 样式风格时才以链接方式引入。导入外部样式是指在

15、嵌入样式的 与标签中，使用import 导入一个外部CSS 样式。动手实践动手实践使用外部使用外部CSS样式样式动手实践动手实践使用导入使用导入CSS样式样式动手实践：使用外部CSS样式最终文件：光盘最终文件文件第7章7-4-3.html视 频：光盘视频第7章7-4-3.swf动手实践：使用导入CSS样式最终文件：光盘最终文件文件第7章7-4-4.html视 频：光盘视频第7章7-4-4.swf7.5.1布局样式设置布局样式设置 通过CSS样式可以定义页面中元素的几乎所有外观效果，包括文本、背景、边框、位置和效果等，在Dreamweaver CC中为了方便初学者的可视化操作，提供了集成的“CS

16、S设计器”面板，在该面板中设置几乎所有的CSS样式属性，完成CSS样式属性的设置后，Dreamweaver会自动生成相应的CSS样式代码。 布局样式主要用来定义页面中各元素的位置和属性，如元素的大小和定位方式等，通过padding(填充)和margin(边界)属性还可以设置各元素（如图像）水平和垂直方向上的空白区域。7.5.2文本样式设置文本样式设置 文本是网页中最基本的重要元素之一，文本的CSS样式设置是经常使用的，也是在网页制作过程中使用频率最高的。在“CSS设计器”面板中的“属性”选项区中单击“文本”按钮，在“属性”选项区中将显示文本相关的CSS属性。动手实践动手实践文本样式设置文本样式

17、设置动手实践动手实践布局样式设置布局样式设置动手实践：布局样式设置最终文件：光盘最终文件文件第7章7-5-1.html视 频：光盘视频第7章7-5-1.swf动手实践：文本样式设置最终文件：光盘最终文件文件第7章7-5-2.html视 频：光盘视频第7章7-5-2.swf7.5.3边框样式设置边框样式设置 通过为网页元素设置边框CSS样式，可以对网页元素的边框颜色、粗细和样式进行设置。在“CSS设计器”面板中的“属性”选项区中单击“边框”按钮，在“属性”选项区中将显示边框相关的CSS属性。7.5.4背景样式设置背景样式设置动手实践动手实践背景样式设置背景样式设置动手实践动手实践边框样式设置边框

18、样式设置动手实践：边框样式设置最终文件：光盘最终文件文件第7章7-5-3.html视 频：光盘视频第7章7-5-3.swf动手实践：背景样式设置最终文件：光盘最终文件文件第7章7-5-4.html视 频：光盘视频第7章7-5-4.swf 在使用HTML编写的页面中，背景只能使用单一的色彩或利用背景图像水平垂直方向平铺，而通过CSS样式可以更加灵活的对背景进行设置。在“CSS设计器”面板中的“属性”选项区中单击“背景”按钮，在“属性”选项区中显示背景相关的CSS属性。动手实践动手实践其他样式设置其他样式设置动手实践：其他样式设置最终文件：光盘最终文件文件第7章7-5-3.html视 频：光盘视频第7章7-5-3.swf7.5.5其他样式设置其他样式设置 通过CSS样式对列表进行设置，可以设置出非常丰富的列表效果。在“CSS设计器”面板中的“属性”选项区中单击“其他”按钮，在“属性”选项区中显示列表控制相关的CSS属性。7.5.6编辑编辑CSS样式样式 当一个CSS样式创建完毕后，在网站升级维护工作中只需要修改CSS样式即可。动手实践动手实践使用使用CSS过渡实现网页特效过渡实现网页特效动手实践：使用CSS过渡实现网页特效最终文件：光盘最终文件文件第7章7-6.html视 频：光盘视频第7章7-6.s