第7章网页表现语言-CSS

网页设计与制作教程

(第4版）CSS简介CSS样式面板创建并使用内部样式表创建并使用外部CSS样式第7章网页表现语言——CSS

7.1.1CSS的特点和用途

CSS是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。CSS样式表是由一系列样式选择器和CSS属性组成的，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性及精确定位网页元素等属性，从而大大增强了网页的格式化能力。

7.1CSS简介网页设计最初是使用HTML标记来定义页面文档及格式，如标题、段落、表格等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，诞生了一种CSS(CascadingStyleSheet，层叠样式表)的技术。样式就是格式，在网页中，如文字的大小、色彩以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件时，若多个样式文件间所定义的样式发生冲突，将根据层次顺序处理。

在一个页面中频繁地更替文本的颜色和大小，最终生成的HTML代码的长度将臃肿不堪。如果它出现在多个页面中，逐一修改更是困难。除设置文本格式外，还可以使用CSS控制Web页面中块级元素的格式和定位。如h1、p、div标记。可以设置块级元素执行以下操作：（1）设置块级元素的边距和边框（2）将块级元素放置在特定的位置（3）为块级元素添加背景颜色（4）在块级元素周围设置浮动文本对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。CSS的出现简化了这样的工作，CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。当需要更改这些页面的样式设置时，只要在样式表中进行修改，而不用对每个页面逐个修改，从而大大简化了格式化工作。

7.1.2CSS规则

CSS样式设置规则由选择符和声明两部分组成。选择符是标识已设置格式元素的术语，一种有五种类型（如下所示）；而声明则用于定义样式属性。声明由属性和值两部分组成。（1）标签选择符（2）类选择符（3）ID选择符（4）伪类（5）关联选择符7.1CSS简介（1）标签选择符任何HTML元素都可以是一个CSS的标记选择符，标记选择符仅仅是指向特别样式的元素，在“添加样式规则”对话框的“元素”下拉列表中提供了所有可供使用的标记选择符。（2）类选择符类选择符的可以与标记选择符无关，这样，类选择符可以应用于任何元素。这种定义类选择符的形式如下：.类名{样式属性1：值1；样式属性2：值2；……}

（3）ID选择符ID选择符用于定义每个具体元素的样式。指定一个ID选择符要在名字前添加指示符#。使用时通过指定元素的id属性来关联。例如：#index{color:blue}引用时，使用id属性声明即可。例如：<pid="index">本段落的颜色为蓝色</p>（4）伪类伪类是CSS中非常特殊的类，能自动被支持CSS的浏览器所识别。伪类可以指定HTML中的A元素以不同的方式显示链接、已访问过的链接和可激活的链接。其中，一个已访问链接可以定义为以不同颜色显示，甚至以不同字体大小和风格显示。CSS中用4个伪类来定义链接的样式，分别是a:link、a:visited、a:hover和a:active。（5）关联选择符关联选择符是一个用空格隔开的由两个或更多的单一标记选择符组成的字符串，一般格式如下：选择符1选择符2……{属性：值；……}这些选择符具有层次关系，并且它们的优先级比单一的标记选择符大。例如：ph1{color:red}样式由一组规则定义并存放在与要设置格式的实际文本分离的位置（通常在外部样式表或HTML文档的文件头部分中）。因此，可以将h1标签的某个规则一次应用于多个标签（如果在外部样式表中，则可以将此规则一次应用于多个不同页面上的标签）。通过这种方式，CSS可提供非常便利的更新功能。如果用户在一个位置更新CSS规则，使用已定义样式的所有元素的格式设置将自动更新为新样式。

7.1.3CSS常用属性用户可以定义CSS规则的属性，如文本字体、背景图像和颜色、间距和布局属性以及列表元素外观。首先创建新规则，然后定义下列任意属性。1．定义CSS类型属性2．定义CSS样式背景属性3．定义CSS样式区块属性4．定义CSS样式方框属性5．定义CSS样式边框属性6．定义CSS样式列表属性7．定义CSS样式定位属性8．定义CSS样式扩展属性7.1CSS简介

1．CSS样式面板视图在“全部”模式和“正在”模式下，CSS样式面板都允许用户在属性窗格中改变3种视图状态。类别视图：将Dreamweaver支持的CSS属性分为八个类别：字体、背景、区块、边框、方框、列表、定位和扩展名。每个类别的属性都包含在一个列表中，用户可以单击类别名称旁边的加号按钮展开或折叠它。列表视图：按照字母顺序显示Dreamweaver支持的所有CSS属性。属性视图：为默认视图，仅显示那些已进行设置的属性。7.2CSS样式面板

2．CSS样式面板按钮在“全部”模式和“正在”模式下，CSS样式面板还包含4个按钮。附加：附加链接到或导入到当前文档中的外部样式表。新建：新建CSS规则，用户可以选择要创建的样式类型。编辑：编辑当前文档或外部样式表中的样式。删除：删除CSS样式面板中选定的规则或属性，并从它所应用的所有元素中删除格式设置。7.2CSS样式面板

7.3.1创建自定义样式创建自定义样式的方法如下：将插入点放在文档中，然后执行以下操作之一：执行“格式”→“CSS样式”→“新建”命令。在CSS样式面板中，单击面板右下侧的“新建CSS规则”按钮。在文档窗口中选择文本，从属性面板的“目标规则”弹出菜单中选择“新CSS规则”，然后单击“编辑规则”按钮。7.3创建并使用内部样式表

7.3.2创建仅应用于一个HTML元素的样式创建仅应用于一个HTML元素的样式的方法如下：①打开“新建CSS规则”对话框。②在“新建CSS规则”对话框中，指定要创建的CSS规则的“选择器类型”为“ID（仅应用于一个HTML元素）”，然后在“选择器名称”文本框中输入ID名称，例如，#myhead1。7.3创建并使用内部样式表

7.3.3创建重定义HTML标签样式创建重定义HTML标签样式的方法如下：①打开“新建CSS规则”对话框。②在“新建CSS规则”对话框中，指定要创建的CSS规则的“选择器类型”为“标签（重新定义HTML元素）”，然后在“选择器名称”文本框中输入或从下拉列表中选择HTML元素的名称，例如，h1，如图7-18所示。③选择定义规则的位置。7.3创建并使用内部样式表

7.3.4创建链接样式创建重定义HTML标签样式的方法如下：①打开“新建CSS规则”对话框。②在“新建CSS规则”对话框中，指定要创建的CSS规则的“选择器类型”为“复合内容（基于选择的内容）”，然后在“选择器名称”文本框中输入或从下拉列表中选择超链接状态的名称，例如，a:link，如图7-19所示。③选择定义规则的位置。④单击“确定”按钮，完成样式属性的设置。7.3创建并使用内部样式表

7.3.5样式的应用①在文档窗口中，选择要应用CSS样式的对象。②执行下列操作之一：在CSS样式面板中，选择“全部”模式，右键单击要应用的样式的名称，然后从弹出菜单中选择“套用”，如图7-20所示。从“类”弹出菜单中选择要应用的类样式。在文档窗口中，右键单击所选对象，从弹出菜单中选择“CSS样式”，然后选择要应用的样式。执行“格式”→“CSS样式”命令，然后在子菜单中选择要应用的样式。7.3创建并使用内部样式表

7.4.1创建外部样式文件创建外部样式文件的方法如下：①打开“新建CSS规则”对话框。②在“新建CSS规则”对话框中，指定要创建的CSS规则的选择器类型，输入或选择选择器的名称。③选择定义规则的位置为“（新建样式表文件）”，如图7-28