html控制那些网页元素,使用CSS控制网页元素

※任务分析

在项目4中制作网页时，我们通过“属性”面板为页面中的部分文本设置了大小和颜色等属性值。在浏览时，网页内的文本才会显得比较协调。这时我们已经在不知不觉中使用了CSS样式。

本任务中我们要对company.html网页的页面、段落和文本等方面进行样式设置。具体如下：

设置页面：页边距均为2像素、使用素材文件夹project05中的images/bg.jpg作为网页背景图案；

网页中正文部分的字体为“宋体”、大小为“12像素”，行高为1.5倍；

导航菜单及各板块标题的的文本字体为“宋体”、大小为“12像素”，颜色为“白色”；

网页中“栏目导航”中的列表，缩进30像素、使用images/dot.jpg作为项目符号图像，并对边界、填充等属性进行适当调整。

※相关知识

一．什么是CSS

CSS(Cascading Style Sheet，层叠样式表)是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或网页文档的某一部分，通常为文件头部分。

例如，在一个网页或整个网站中，凡是段落中的文字都使用12像素、宋体，则可以通过CSS层叠样式表来统一实现，使网站保持同样的风格。同样，如果要更换网页中的某种格式，只需修改CSS层叠样式表即可，为网页和站点的编辑节省大量时间。

二．CSS分类

CSS可以通常使用两种方法将指定的样式加载到网页元素上：嵌入式样式表和外部样式表。

1．嵌入式样式表

如果样式只在当前网页中使用，可以使用嵌入式样式表。嵌入式样式表一般放在网页头部的一个标签之间。如：

.p {

font-family:宋体;

font-size: 12px;

}

2．外部样式表

如果样式要在多个网页中使用，可以使用外部样式表，外部样式表是一个以.CSS为后缀的外部文件。网页要使用外部样式表来统一风格只需在

中用标签将外部样式表链接起来即可。例如，在当前网页中使用外部样式表mycss.css中的格式：

rel="stylesheet" type="text/css" />

三．CSS规则对话框

单击“CSS”面板中的“新建CSS规则”按钮，可打开“新建CSS规则”对话框。如图5-1所示。

◆图5-1“新建CSS规则”对话框

选择器类型的含义如下：

类(可应用于任何标签)：可以在文档窗口的任何区域或文本中应用类样式。

标签(重新定义特定标签的外观)：重新定义HTML标记的的默认格式。

高级(ID、伪类选择器等)：为特定的组合标签定义层叠样式表，可以使用ID作为属性，以保证文档具有唯一可用的值。

进入“规则定义”对话框后，各选项的含义如下：

1．“类型”选项

用于设置CSS样式的文本格式。

字体：可以选择相应的字体。

大小：大小就是字号，可以直接填入数字，然后选择单位。

样式：设置文字的外观，包括正常、斜体、偏斜体。

行高：设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。

颜色：设置文字的色彩。

注：行高的数值是包括字号数值在内的。如，文字设置为12px，如果要创建一倍行距，则行高应该为24px。

2．“背景”选项

用于设置CSS样式的背景格式。

背景颜色：选择固定色作为背景。

背景图像：选择图像作为背景。

重复：在使用图像作为背景的时，可以使用此项设置背景图像的重复方式。

附件：选择图像做背景的时候，可以设置图像是否跟随网页一同滚动。

水平位置：设置图像水平方向的位置。

垂直位置：设置图像垂直方向的位置。

3．“区块”选项

用于设置CSS样式的区块格式。

单词间距：英文单词之间的距离，一般使用默认设置。

字母间距：设置英文字母间距，使用正值为增加字母间距，使用负值为减小字母间距。

垂直对齐：设置对象的垂直对齐方式。

文本对齐：设置文本的水平对齐方式。

文字缩进：可以设置首行缩进。

4．“方框”选项

用于设置CSS样式的方框格式。

宽：设置对象的宽度。

高：设置对象的高度。

浮动：可以设置文字等对象的环绕效果。

填充：指边框和其中内容之间的空白区域。

边界：是指边框外侧的空白区域。

5．“边框”选项

可以给对象添加边框，设置边框的颜色、粗细、样式。

样式：设置边框的样式。

宽度：设置4个方向边框的宽度。

颜色：设置4个方向边框对应的颜色。

6．“列表”选项

设置CSS样式的列表格式。

类型：设置引导列表项目的符号类型。

项目符号图像：可以选择图像作为项目的引导符号。

位置：决定列表项目缩进的程度。

7．“扩展”选项

利用CSS实现一些扩展功能。

分页：通过样式来为网页添加分页符号。

光标：通过样式改变鼠标形状。

过滤器：使用CSS语言实现过滤器(滤镜)效果。将在任务4中作专门介绍。

※任务实施

一．设置页面样式

1．打开站点example中的company.html文件。

2．在CSS样式面板中单击“全部”按钮，可以看到此网页文件中已经包含了一些CSS样式。如图5-2所示。由于之前我们在制作网页时设置过一些文本的字体、大小等样式，面板中这四个样式就是在我们操作时由Dreameaver自动生成的样式。

3．选中此面板中的“样式”所在行，再单击此面板右下角的“删除样式表”按钮，删除这些样式。

4.逐一选中页面中曾经使用过样式的文本块、单元格等对象，通过“属性”面板将其样式设置为“无”。

此时网页中的内容会变得很不协调，很不美观。接下来，我们逐步让其美观起来。

5．单击“属性”面板中的“页面属性”按钮，打开“页面属性”对话框，设置页面属性如图5-3所示。

6．单击“确定”，这些样式就被建立到当前网页文件中了。网页中有了背景图片，且文字也设置成了宋体、12像素，页面的四个边距均为2像素。

此时CSS面板中自动增加了两个样式“body,td,th”和“body”样式。

二．设置段落样式

1．在CSS样式面板中单击右下方的“新建CSS规则”按钮，打开“新建CSS规则”对话框。

在“选择器类型”选项中选择“标签”，在“标签”下拉列表中选择“p”，在“定义在”选项中选择“仅对该文档”。如图5-4所示。设置完毕后，单击“确定”按钮。

 

◆图5-3“页面属性”对话框◆图5-4“新建CSS规则”对话框

2．在“p的CSS规则定义”对话框中选择“类型”选项，设置字体为“宋体”，大小为“12像素”，行高为“1.5倍行高”。如图5-5所示。

3．再选择“方框”选项，设置边界值：上、下均为0像素，左右均为8像素。如图5-6所示。

 

◆图5-5  p的“类型”样式◆图5-6  p的“方框”样式

4．单击“确定”按钮完成段落的CSS设置。

由于是对p标签(段落标记)设置的样式，所以此时网页中所有的段落都会使用这个样式表的属性设置。

三．设置文本样式

1．在CSS样式面板中单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中，设置“选择器类型”为“类”，在“标签”中输入“.text”，在“定义在”选项中选择“仅对该文档”。单击“确定”按钮。

2．在“.text的CSS规则定义”对话框中选择“类型”选项，设置粗细为“粗体”，颜色为“#FFFFFF”(白色)。如图5-7所示。

3．通过“标签选择器”选中导航菜单所在的表格，在“属性”面板中设置样式为“text”。如图5-8所示。

   

◆图5-7

.text的“类型”样式◆图5-8在“属性”面板中应用CSS样式

用同样的方法再建立一个“.bottom”样式，如下：

1．新建“.bottom”类。如图5-9所示。

2．样式中的属性值分别是：字体为“宋体”；字号为“12像素”，行高为“1.5倍行高”；颜色为“#FFFFFF”。

3．通过“标签选择器”选中网页底部的单元格，将其样式设置成.bottom。

◆图5-9新建“.bottom”样式

四．设置列表样式

1．在CSS样式面板中单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中，设置“选择器类型”为“类”；在“标签”中输入“.list”；在“定义在”选项中选择“仅对该文档”。单击“确定”按钮。

2．在“.list的CSS规则定义”对话框中选择“类型”选项，设置字体为“宋体”，大小为“12像素”，行高为“2倍行高”。

3．选择“区块”选项，设置文字缩进为“30像素”。如图5-10所示。

4．选择“列表”选项，设置项目符号图像为“images/dot.gif”，位置为“外”。如图5-11所示。

5．单击“确定”按钮完成段落的CSS设置。

6．选中网页“栏目导航”中的列表(在“标签选择器”中单击

• 标记)，在“属性”面板中设置其样式为“.list”。

列表样式应用前后的效果是明显不同的，分别如图5-12和图5-13所示。

 

◆图5-10  .list的“区块”样式◆图5-11  .list的“列表”样式

        

◆图5-12没有使用.list样式的效果◆图5-13使用.list样式后的效果