第6章 CSS层叠样式表2 标签选择器CSS和锚伪类CSS　课件

2023-02-21

| 71页

| 247人阅读

| 31人下载

普通

内容正文：

学习目标了解什么是CSS样式表。掌握CSS规则的基本语法、存在形式和选择器的类型。能够创建并灵活运用类选择器CSS规则、标签选择器CSS规则、锚伪类CSS规则。能够编辑、删除CSS规则。能够附加外部CSS样式表文件。 6.1 第6章　使用CSS层叠样式表 6.2　标签选择器规则和锚伪类规则的创建与应用 6.2.1　利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页最终效果如图所示。 6.1 第6章　使用CSS层叠样式表 6.2　标签选择器规则和锚伪类规则的创建与应用 6.2.1　利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页（1）规划站点新建文件夹“baiyangdian_lvyou（6.2）”，将素材文件夹中所有文件和文件夹拷贝到“baiyangdian_lvyou（6.2）”文件夹中。（2）定义站点在Dreamweaver CC 2015中，单击菜单“站点”→“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“白洋淀旅游”，本地站点文件夹设置为baiyangdian_lvyou（6.2）文件夹。打开“chaiputai.html”网页文件。 6.1 第6章　使用CSS层叠样式表 6.2　标签选择器规则和锚伪类规则的创建与应用 6.2.1　利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页（3）在开始制作本案例之前，已经创建并应用如下类选择器规则。  .title类选择器规则美化文章标题。  .content类选择器规则美化文章内容。  .copyright类选择器规则美化版权信息部分。  .image类选择器规则设置图像边框、边界、填充。  .input类选择器规则美化表单元素。接下来，我们将创建以下标签选择器CSS规则美化网页。  创建<td>标签选择器规则美化网中的其它文字。  创建锚伪类CSS规则美化导航中的超链接。  创建<body>标签选择器规则设置背景与外边界。 6.1 第6章　使用CSS层叠样式表 6.2　标签选择器规则和锚伪类规则的创建与应用 6.2.1　利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页（4）创建<td>标签选择器规则 1）添加选择器。点击菜单“窗口”→“CSS设计器”命令，打开“CSS设计器”面板。选择“源”窗格中的源“css_file.css”，在“选择器”窗格中点击添加选择器图标，输入选择器名称“td”。 6.1 第6章　使用CSS层叠样式表 6.2　标签选择器规则和锚伪类规则的创建与应用 6.2.1　利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页（4）创建<td>标签选择器规则 2）在“选择器”窗格中选择“td”选择器，在“属性”窗格中点击文本图标，切换到“文本”属性，将“font-family”设置为“宋体”、将“font-size”设置为“12px”、“color”设置为“#333333”、“line-height”设置为“140%”。保存网页，预览，可以看到原来没有应用CSS规则的文字发生的变化。 6.1 第6章　使用CSS层叠样式表 6.2　标签选择器规则和锚伪类规则的创建与应用 6.2.1　利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页（5）创建<body>标签选择器规则 1）添加选择器。选择“源”窗格中的源“css_file.css”，在“选择器”窗格中点击添加选择器图标，输入选择器“body”。 6.1 第6章　使用CSS层叠样式表 6.2　标签选择器规则和锚伪类规则的创建与应用 6.2.1　利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页（5）创建<body>标签选择器规则 2）在“选择器”窗格中选择“body”选择器，在“属性”窗格中点击布局图标，切换到“布局”属性。设置“margin”为0px。 3）在“属性”窗格中点击背景图标，切换到“背景”属性，设置“background-image”中的“url”为“../images/t1.gif”，即设置背景图片为“t1.gif”,也可以点击其后的文件夹图标，选择“t1.gif”图片；设置“background-repeat”为，即设置背景重复。 6.1 第6章　使用CSS层叠样式表 6.2　标签选择器规则和锚伪类规则的创建与应用 6.2.1　利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页（5）创建<body>标签选择器规则 4）保存网页，按F12预览，可以看到网页边界和背景应用CSS规则后的效果。 6.1 第6章　使用CSS层叠样式表 6.2　标签选择器规则和锚伪类规则的创建与应用 6.2.1　利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页（6）创建锚伪类C