第5章层叠样式表基础

合集下载

相关主题

层叠样式表

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

(4)“CSS面板工具栏”显示与CSS操作的常用工具和按钮，从左到右依次是。【显示类别视图】按钮用于分类显示当前所选规则的属性。【显示列表视图】按钮用于以列表形式显示当前所选规则的属性，已设置好的属性位于列表的最上端。【只显示设置属性】按钮用于只显示当前所选规则已经设置好的属性。
(2)ID选择器 ID选择器的使用方法和类选择器基本相同。ID选择器使用时需要设置标签的ID属性，对与一个网页而言，每一个标签均可以使用 ID="ID名"的形式对ID属性进行名称的指派。在定义ID选择器时，要在ID名称前面加一个“#”号。例如，以下为网页中的层定义了样式。 #apDiv1 { position:absolute; left:37px; top:12px; width:137px; height:135px; z-index:1; } 然后只需要在层(div)标签中设置ID属性为“apDiv1”，该层就具有了以上样式。设置完的层HTML代码如下。 <div id="apDiv1"></div>
6．CSS样式面板的基本操作完整CSS样式面板如右图所示，默认显示的是 CSS面板的“全部”选项卡。
下面按从上到下和从左到右的顺序详细介绍CSS样式面板。 (1)“关联菜单”是与CSS面板和CSS样式操作有关的详细菜单，该菜单比较简单，各菜单命令基本能做到见名知意，在此不作详细介绍。 (2)“所有规则”框显示当前页面所嵌入、链接和导入样式中的CSS规则。 (3)“属性列表”显示当前选择规则的详细属性列表，点击属性列表右侧的属性值可以对属性值进行修改。
b.第二种是通过导入方式导入外部样式表。这种导入方式会在<head></head>标签内添加一对<style></style>标签，然后通过@import方式导入外部样式表，完整代码如下所示。 <style type="text/css"> <!-@import URL("/css/css5-1.css"); --> </style> 通过@import方式导入外部样式表时，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式样式表效果。推荐使用链接的方式添加外部样式表。
3．CSS选择器每个样式都是由一系列规则组成，每条规则有两部分：选择器和声明。每条声明又是属性和值的组合。规则左边是选择器，右边是CSS属性和值。CSS选择器指明文档中要应用此样式的元素，可以有多种形式。
(1)类选择器类选择器能够把相同的元素分类定义成不同的样式，对HTML标签均可以使用class=“类名” 的形式对类属性进行名称指派，且允许重复使用。类选择器的名称前面要加一个点号(．)。以下为一个应用了类样式的段落： <p class="text">渭南师范学院传媒工程系</p>

property：就是指将要被设置的性质，例如 color。 value：赋给property的值，例如赋给color的值可以为red或者#FF0000。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS实例5-1</title> <style type="text/css"> <!-body{ background-color:#FFFFFF; color:#FF0000; } a{ color:#FF0000; } --> </style> </head> <body> 渭南师范学院<a href="http://www.wntc.edu.cn/cmgcx/index.asp" target="_blank">传媒工程系 </a> </body> </html>
(3)单击【确定】按钮，打开“#text的CSS规则定义”对话框。CSS规则设置同“自定义样式” 中规则设置。
4.标签样式设置标签样式的步骤如下： (1)在CSS面板右下角单击“新建CSS规则”按钮，打开“新建CSS规则”对话框。 (2)在“选择器类型”下拉框中选择“标签(重新定义HTML元素)”下拉项，在“选择器名称” 文本域中选择或输入p标签。
第5章
层叠样式表基础
目录
1、层叠样式表基础知识 2、网页样式设计 3、单元同步练习
目标通过本节的学习，了解层叠样式表的基础知识，如语言规范、定义等，使用CSS面板定义样式，及如何应用样式。
5.1层叠样式表基础
样式设计是指应用HTML语言和CSS(层叠样式表)设计网页的外观样式。CSS是Cascading Style Sheet的缩写，译为“层叠样式表”或“级联样式表”。虽然CSS在网页里与HTML编写在一起，但是它不属于HTML，它可以扩展HTML的功能，调整字间距、行间距，取消链接的下划线、多种链接效果，固定背景图像等样式可以实现原来HTML标签无法实现的效果。
3．ID样式具体定义步骤如下： (1)在CSS面板右下角单击“新建CSS规则”按钮，打开 “新建CSS规则”对话框。 (2)在“选择器类型”下拉框中选择“ID(仅应用于一个 HTML元素)”下拉项，在“选择器名称”文本域中输入“#text”，单击【确定】按钮后将会弹出“将样式表文件另存为”对话框，在该对话框中可以指定 CSS文件存放的位置并给CSS文件命名；
5.1.2 使用Dreamweaver定义样式
1．定义样式的基本方法
定义类样式界面
定义标签样式界面
定义复合样式界面
2．自定义样式利用CSS自定义的样式可以应用于任何HTML标签。设置自定义样式的步骤如下： (1)在CSS面板右下角单击“新建CSS规则”按钮，打开“新建CSS规则”对话框。 (2)在“选择器类型”下拉框中选择“类(可应用于任何HTML)”下拉项，在“选择器名称”文本域中输入 “.text”，从“选择规则定义位置”下拉框中选择“仅限该文档”下拉项。若选择“新建样式表文件”下拉项，单击【确定】按钮后将会弹出“将样式表文件另存为”对话框，在该对话框中可以指定CSS文件存放的位置并给CSS文件命名。
(3)外部样式表外部样式表将CSS写成一个后缀为".css"外部 CSS文件，在HTML文档头中通过连接或导入的方式引用该文件进行样式控制。
外部样式表有两种导入方式，如下图。 a.第一种是通过链接的方式导入。这种导入方式会在<head></head>标签内使用<link>标签将样式表文件链接到HTML文件内，如<link href="css5-1.css" rel="stylesheet" type="text/css" />。
现打算将默认链接、访问过的链接和单击时的链接状态设置为红色且无下划线，而鼠标经过时的链接状态则设置为绿色且包含下划线，具体操作步骤如下。 (1)在CSS面板右下角单击“新建CSS规则”按钮，打开 “新建CSS规则”对话框。 (2)在“选择器类型”下拉框中选择“复合内容(基于选择的内容)”下拉项，在“选择器名称”文本域中选择或输入“a:link”，再从“选择规则定义位置”下拉框中选择一种规则定义位置，这里选择“仅限该文档” 。
5.1.1 层叠样式表基础知识
样式设计是指应用HTML样式和CSS（层叠样式表）设计网页的外观样式。CSS是Cascading Style Sheet 的缩写，我们把它译为“层叠样式表”或“级联样式表”。 1．样式表的优点（1）同时更新站点的许多页面，更快更容易（2）制作体积小，下载页面快（3）样式和结构分离
(3)单击【确定】按钮，在打开的“a:link的CSS 规则定义”对话框里进行样式规则设置。 (4)单击【确定】按钮，重复上面的操作，分别进行其它三种链接状态的设置。在设置 a:hover状态时，选择“下划线”复选框，在 “颜色”框中输入“#0F0”。
(5)单击【确定】按钮，这样页面中有链接的对象就自动应用样式了。在浏览器中预览网页，当鼠标未置于链接文本上时，初始浏览效果左下图所示。当鼠标置于链接文本上时浏览效果如右下图所示。
(2)内嵌样式表
也叫内部样式表(Internal Style Sheet)，内嵌样式表使用<style></style>标签在head区域内定义样式，内部样式表只对所在的网页有效，可针对具体页面进行具体调整，以下为内嵌样式表。 <style type="text/css"> <!-#apDiv1 { position:absolute; left:37px; top:12px; width:137px; height:135px; z-index:1; } --> </style>
2．CSS的基本语法（1）CSS的基本语法 CSS样式表的样式规则是由三个部分构成： Selector（选择器），Property（属性）和Value （属性的取值）。基本的格式如下。 Selector {property:value; property:value;…; property:value}
Hale Waihona Puke Baidu
(3)单击【确定】按钮，打开“.text的CSS规则定义”对话框。在其中可以设置样式。 (4)完成设置后，单击【确定】按钮，在CSS样式面板中随即出现定义好的样式。
(5)对于自定义样式，需要进行自定义样式的应用。如下所示： <p class="text">渭南师范学院传媒工程系(有样式)</p> <p>渭南师范学院传媒工程系(无样式)</p> 以上两个段落一个应用了样式，另一个没有应用样式。在浏览器中的预览的效果如下图所示。
(3)单击【确定】按钮，打开“p的CSS规则定义” 对话框。CSS规则设置同“自定义样式”中规则设置。
5．链接样式超链接默认的样式为文字蓝色并有下划线，要改变超链接的默认样式就需要使用链接样式。在此首先了解一下链接的四种状态。分别是a:link、 a:visited、a:hover以及a:active。a:link，链接默认状态，即没有触发任何鼠标事件时所呈现的状态； a:visited，访问过的链接状态，即当链接被单击后所呈现的状态；a:hover，鼠标经过时的链接状态，即当把鼠标放置在有链接的对象上时所呈现的状态； a:active，鼠标单击时的链接状态，即单击链接但未释放鼠标时所呈现的状态。
(3)标签选择器标签选择器也称标记选择器，HTML中的每个标签都有默认的样式，标签选择器的主要作用是提供重新定义HTML元素样式的方法。例如，以下为给<p>标签定义的样式。 p{ font-family: "宋体"; font-size: 24px; color: #FF0000; } 以上样式定位文档中的p标签的样式为“字体为宋体，字号为24px，颜色为红色”。应用该样式的页面中的所有p标签都将具有“字体为宋体，字号为24px，颜色为红色”的样式。
(4)关联选择器该选择器可定义以上三种选择器样式和链接的四种样式a:link、a:visited、a:hover和a:active。此外，还可对选择器进行集体和嵌套声明。详细内容将在后续章节中展开。
4．CSS的使用方式 CSS按其使用位置的不同，主要分为以下三种类型：行内样式(inline Style Sheet)、内嵌样式(Internal Style Sheet)和外部样式表(External Style Sheet)。 (1)行内样式表也叫内联样式表(Inline Style)，行内样式直接定义在 HTML标签内，只对所在标签有效，行内样式定义在 HTML标签的style属性中。例如，给一个段落添加样式，代码如下。 <p style="background-color:#0000FF; color:#FF0000; font-size:24px; ">渭南师范学院</p> 行内样式是最为简单的CSS使用方法，但由于需要为每一个标签设置style属性，不推荐使用。

第5章 层叠样式表基础

第5章层叠样式表基础