网页制作实用教程 张淑清 第5章 网页内容的修饰－CSS样式

《网页制作实用教程 张淑清 第5章 网页内容的修饰－CSS样式》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章网页内容的修饰－CSS样式教学内容：CSS样式的类型、创建CSS样式、编辑CSS样式、设置CSS样式的基本属性、链接和导出CSS样式表、CSS在网页中的应用。教学重点和难点：掌握在网页中添加、应用CSS样式的方法。5.1初识CSSCSS样式就像word中的格式刷,可以对众多网页中的文本及文本区外观进行统一控制。5.1.1样式表的概念样式表是为了弥补HTML语言而开发，调整字间距、行间距、取消链接的下划线、固定背景图像等样式表可以实现原来的HTML标记无法实现的效果。1．样式表的优点（1）内容结构和格式控制相分离（2）精确控制网页外观（3）制作体积下，下载页面快（4）快速规格网页样式（

2、5）兼容不同浏览器2．样式表标记定义样式表的部分用标记来表示。样式表的内容应该位于标记之间。在Dreamweaver中为指定字体、字号、文字颜色来定义样式表的时候，在代码视图中出现的HTML代码会出现字体{font-family}或者{font-size}等属性，并且以冒号为间隔设置属性值。属性和属性由分号来区分。应用样式表的文字包括在标记之间。有注释标记来套用样式表是因为样式表在Explorer和Netscape4.0以上的浏览器中才被支持，使用该注释标记是为了在其他浏览器中被忽略通过。5.

3、1.2CSS样式的类型1．类样式（class）类样式的名称必须以句点（英文状态）开头，后跟字母或字母和数字组合（例如，.mycss）。为类样式命名时，不能使用body，table等与“标签”样式相冲突的HTML标签名称。class的类别定义在代码中是写在标记之间，并放在标记之下，一份网页只要写一次即可。2．标签样式标签样式表示重新定义特定HTML标签的外观。3．高级样式高级样式会对某一具体的标签组合或者含有特定ID属性的标签应用样式。高级样式还常用于设定超链接，即通过“新建CSS样式”对话框的“选择器”下拉菜单中提供的四个选项，定义超链接的四种状

4、态。a:link：超链接文字的一般状态a:visited：超链接文字已链接过的状态a:hover：鼠标光标移到超链接文字上的状态a:active：超链接文字正在链接中的状态5.2使用CSS编辑器使用CSS编辑器可以创建、编辑和删除CSS样式。并且可以将外部样式表文件附加到当前文档。“附加样式表”：单击该按钮会打开“链接外部样式表”对话框，可选择要链接到或导入到当前文档中的外部样式表。“新建CSS规则”：打开“新建CSS样式”对话框，可以选择创建的样式类型。如类样式、标签样式或高级样式。“编辑样式”：打开“CSS样式定义”对话框，可编辑当前文档或外部样式表中的样式。“删除CSS规则”：删除“

5、CSS样式”面板的所选样式，并从应用该样式的所有元素中删除格式，但是不删除对该样式的引用。5.2.1创建CSS新样式1．创建标签样式例1：将页面背景色设置成土黄色(#996600)，页面左边界、上边界均为0。操作步骤如下:①单击“CSS样式”面板中的“新建CSS样式”按钮。在“新建CSS样式”对话框中，“选择器类型”设置为“标签”，在“标签”下拉菜单中选择body，“定义在”设置为“仅对该文档”，然后单击“确定”按钮，创建一个名为body的标签样式。②在“body的CSS规则定义”对话框中设置该样式的属性，在“分类”的“背景”项中设置网页的背景颜色为“#996600”。然后将“分类”切换到

6、“方框”，在边界区域分别设置页面的上、左边界为“0”像素。③单击“确定”按钮后，在“CSS样式”面板中会增加body样式名称，并且定义的样式会自动应用到页面中。④将页面切换到“拆分”视图，我们会发现body标签出现在代码里，是包围在这对标记之间，并且镶嵌在网页的标记下。⑤保存网页，按F12键预览网页。2．创建类样式例2：为页面设置标题，将标题设置为“黑体，24点数（pt）”。具体操作如下：①单击“CSS样式”面板中的“新建CSS样式”按钮。在“新建CSS样式”对话框中，“选择器类型”设置为“类”，名称输入“.style2”，“定义在”设置为“仅对

7、该文档”，单击“确定”按钮。②在出现的“.style2的CSS规则定义”对话框中，设置类型项中的字体为“黑体”，大小为“24点数（pt）”。③单击“确定”按钮。④保存网页，按F12键预览网页。3．创建高级样式参见教材第5章[实例3]。5.2.2编辑CSS样式1．管理CSS样式修改例2中创建的.style2样式。将样式名称改为.biaoti,字体设置为新宋体，字号设置为36像素,颜色设置为#339966。操作如下：①打开“