Dreamweaver网页设计与制作教程课件第8章 样式表

第8章样式表第8章样式表第8章样式表内容提要CSS的基础知识创建CSS样式定义CSS属性编辑CSS样式样式冲突第8章样式表8.1CSS简介1、什么是CSSCSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。

页面内容存放在HTML文档中表现形式

存放在另一个文件(.css

)中HTML文档的某一部分通常为文件头部分

第8章样式表8.1CSS简介2、CSS的特点CSS将页面的内容与表现形式分离，解决了网页制作当中普遍存在的这个问题。样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表可以同时改变站点中所有页面的布局和外观，从而层叠样式表极大地提高了工作效率。第8章样式表8.1CSS简介采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势：1．表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。2．提高页面浏览速度对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。3．易于维护和改版只要简单的修改几个CSS文件就可以重新设计整个网站的页面。4．使用CSS布局更符合现在的W3C标准

第8章样式表8.1CSS简介3、css的写法语法格式为：selector{property:value}其中selector（选择符）是可以是多种形式，通常是将要定义样式的HTML标记，例如BODY、P、TABLE……，可以通过此方法定义其property（属性）和value（值），属性和值要用冒号隔开。例如：body{color:black}，此例的效果是使页面中的文字为黑色。如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称通常是几个单词的组合。例如：p{font-family:“TimesNewRoman”}(定义段落字体为TimesNewRoman)。如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开。例如：p{text-align:left;color:green}(段落左对齐;并且段落中的文字为绿色)。此外，CSS中还可以进行选择符组、类选择符、ID选择符、包含选择符和包含选择符等具体的设置。第8章样式表8.1CSS简介可以在CSS中插入注释来说明代码的含义，注释有利于以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以"/*"开头，以"*/"结尾，如下:

/*定义段落样式表*/

p

{

text-align:center;/*文本居中排列*/

color:black;/*文字为黑色*/

font-family:arial/*字体为arial*/

}第8章样式表8.1CSS简介4、初识css面板第8章样式表8.1CSS简介1）．显示类别视图设置方式及其功能：单击“CSS样式面板”左下角显示类别视图按钮将CSS样式面板切换为类别视图状态，如右图所示。在此种视图下，将CSS属性划分为9个类别，分别是“字体”、“背景”、“区块”、“边框”、“方框”、“列表”、“定位”、“扩展”和“表、内容、引用”。可以通过单击加号展开属性列表，通过点击减号折叠属性列表。第8章样式表8.1CSS简介2）.显示列表视图按钮设置方式及其功能：单击“CSS样式面板”左下角显示列表视图按钮将CSS样式面板切换为列表视图状态，如图所示。将已定义样式显示在视图的前面，方便使用。在该状态下，将全部的样式按字母顺序进行列表，这样可以根据字母排列顺序进行编辑和查找。第8章样式表8.1CSS简介3）.只显示设置属性按钮设置方式及其功能：单击“CSS样式面板”左下角只显示设置属性按钮将CSS样式面板切换为只显示设置属性状态，如图8.4所示。在该状态下，将全部已经设置的属性按字母顺序进行排列显示。通过单击面板下方的“添加属性”链接来添加新的属性。第8章样式表8.2创建CSS样式利用dreamweaver中“CSS样式面板”中创建样式规则按钮来创建一个新的样式。具体操作步骤如下：第一步：将光标定位在文档中，然后在“CSS样式面板”中，单击面板右下角“新建CSS规则”按钮或者利用“文本”菜单中“CSS样式”中的新建“CSS规则”命令，打开“新建CSS规则”对话框，如图所示。第8章样式表8.2创建CSS样式第二步：在“新建CSS规则”对话框中，选择所要创建的选择器类型。第三步：在名称框中输入相应的名称、选择已有的标签或是某种链接状态或ID。第四步：选择新建CSS规则要定义的位置。第五步：单击“确定”按钮，出现“CSS规则定义”对话框，如图所示，完成相应的属性设置。

第8章样式表8.2创建CSS样式在dreamweaver中“CSS样式面板”中创建样式规则中提供了三种样式类型，分别是类，标签和高级。1．自定义CSS样式(类样式)：可以将样式属性设置为任何文本范围或文本块。如.self{color:#66ff00}强调的一点是在样式名称前必须加“.”，并且包含任何字母和数字的组合。如果没有输入开头的句点，在Dreamweaver中将自动输入。2.HTML标签样式：重定义标记的格式。创建或更改标签的CSS样式时，所有用标记设置了格式的文本都立即更新。如h1{font.family:TimesNewRoman}。3.CSS链接样式：重定义链接有关的格式。有如下四种：A:link:设置正常状态下链接文字的样式。A:active:设置鼠标单击时的链接文字的外观。A:visited:设置访问过的链接外观。A:hover:设置鼠标放置链接文字上文字的效果。第8章样式表8.2创建CSS样式1、定义css类样式假设一个或多个网页中的某些元素使用特殊样式，应该选择定义一个类样式，并把该样式应用到相应的元素上。类样式是唯一可以应用于文档中任意元素的CSS样式类型。在类样式定义完成之后，与当前文档关联的所有类样式都会在“CSS样式”面板或者元素“属性面板”的“样式”列表中。用户亦可以先选择要添加样式的元素，进而在“CSS样式”面板或属性面板中的“样式”列表中选择要添加的类样式。第8章样式表8.2创建CSS样式例如，将一个网页文件如图，要求创建类样式的方法实现将文章标题设置为仿宋体，大小为20pt，颜色为蓝色；正文的内容设置为宋体，大小为14pt，颜色为绿色。第8章样式表8.2创建CSS样式具体操作步骤如下：1.在“CSS样式”面板中单击新建样式规则按钮，弹出“新建CSS样式”对话框，在选择类样式中选择“类”选项。2.将“新建CSS规则”相应的参数设置为如图所示。第8章样式表8.2创建CSS样式3.单击确定，弹出“.timu的CSS规则定义”对话框，将其参数按要求设置为如图所示。第8章样式表8.2创建CSS样式4.仿照上述步骤创建名为.zhengwen的类样式，将其字体设为宋体，大小为14pt,颜色为绿色。在CSS样式面板中会显示出以创建的两个样式。5.在文档中选择唐诗的题目，通过“属性面板”中的“样式”下拉列表应用.timu样式，或者选择CSS样式面板中右键单击所选样式，弹出快捷菜单选择“套用”命令。同样的方法应用正文样式。效果见下图。第8章样式表8.2创建CSS样式2、重定义HTML标签样式在设计制作网页的过程中，有时要对网页中某些特定元素更改样式，这时就可以采用重定义HTML标签样式。要想对某项重新设置，就选择某标签。譬如要设置表格样式可选择“table”或“td”，设置图像样式选择“img”等。

第8章样式表8.2创建CSS样式例如：<b>标签的作用在于把文字显示为粗体，这是浏览器对<b>标签的默认属性的解释。但可以通过样式表对其进行改写。具体操作步骤如下：1.在“CSS样式”面板中单击新建样式规则按钮，弹出“新建CSS样式”对话框，在选择类样式中选择“标签”选项。2.将“新建CSS规则”相应的参数设置为如下图所示。第8章样式表8.2创建CSS样式3.单击确定，弹出“b的CSS规则定义”对话框，将其参数按要求设置为如图所示。4.在文档中代码视图当中，body区中写<b>这个字是粗体</b>，看到的效果不是粗体，而是正常。这是因为<b>的font.weight属性被重新定义了，所以在显示的时候会优先解析CSS对其的定义。第8章样式表8.2创建CSS样式3、修改超级链接样式文字链接可以说是网页中最常见的页面元素了，默认的文字链接样式都是带下划线的效果，网页设计和制作者通常需要改变这一陈不变的外观，以使之符合页面的整体效果，自从样式表得到广泛的应用后，这项操作就变得非常方便。在Dreamweaver8中CSS样式类型中的“高级”可以实现这一功能。操作方法类似于重定义HTML标签的操作方法。定义后的链接状态也会直接应用到文档中。第8章样式表8.2创建CSS样式例如：默认情况下的链接文字，文字格式是带有下划线的蓝色字体，而且字体也很大，为了使网页的设计风格整体一致，通过CSS样式表来改变其显示格式。具体的操作步骤如下：1．新建一个页面，在文档中写入“这是一个超级链接”，在属性面板中设定它的链接为“#”。2．在CSS样式面板中点击“新建CSS规则”按钮，弹出对话框，在“定义在”一栏选择“仅对该文档”，在“选择器类型”一栏里选择“高级”。打开选择器下拉列表，如图。可以看到动态链接的4种状态。第8章样式表8.2创建CSS样式a:link——超级链接的正常状态；a:visited——访问过的超级链接状态。a:hover——光标移至超级链接上时的状态；a:active——选中超级链接的状态。3．接下来对这几种状态分别设定，首先从下拉菜单中选择a:link，点击“确定”按钮后弹出样式表设置窗口，设定该样式无下划线，颜色为#FF6600（橙色）。4．用同样方法设定a:visited，设定其为无下划线，颜色为#FFFF00（黄色）。5．接下来设定a:hover，设定其为有划线，颜色为#FF6600（橙色）。6．a:active不用设置，它会自动依照a:hover而定。注意：必须按照这样a:link、a:visited、a:hover、a:active的顺序来设置，否则不会出现预期的效果。

第8章样式表8.2创建CSS样式4、定义样式规则的位置

CSS样式表按其所在位置分三种，分别是内嵌样式表、内部样式表和外部样式表。1.内嵌样式表

是写在使用它的标签(Tag)内的，例如要在<p>标签中使用，其语法为：<pstylefont-size:20pt>这段文字使用了内嵌样式表，更改了字体大小为20</p>。2.内部样式表不同于内嵌样式表，其是写在html网页的<head></head>标签之间的，所以它对本网页全部有效。应注意的是，因为它不是写在某一个标签内的，所以在写的时候要注意，自己想在那个标签内使用这个样式表，再定义的时候也要写清楚，否则会造成整个页面的混乱。3.外部样式表外部样式表就是将样式表的内容单独写到一个记事本中，并保存为后缀为.css的文件，如果想使用外部样式表需附加进来。

这三种样式表区别不大，只是用外部样式表可以使代码重复使用，方便其它页面调用同样的CSS样式表。在dreamweaver8中，在新建CSS样式规则的时候，在新建CSS规则对话框中“定义在”中选择定义样式规则的位置。第8章样式表8.3定义css属性在“CSS规则定义”对话框”中，可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来格式化页面。但是需要明确的是，在定义某个CSS样式的时候，不必对每一个项都进行设置，需要什么效果，对相应的项进行设置就可以。第8章样式表8.3定义css属性

1、类型属性在类型属性当中，主要是对文本等样式的设置，如图。第8章样式表8.3定义css属性2、背景属性在HTML中，背景只能使用单一的色彩或利用图像水平垂直方向的平铺。使用CSS之后，有了更加灵活的设置。如图所示。

第8章样式表8.3定义css属性3、区块属性在CSS规则定义”对话框左侧选择“区块”项，能在右边区域设置CSS样式的区块格式。如图所示。第8章样式表8.3定义css属性4、方框属性前面讲述过设置过图像的大小、设置图像水平和垂直方向上的空白区域、设置图像是否有文字环绕效果等。方框设置进一步完善、丰富了这些设置。如图所示。第8章样式表8.3定义css属性5、边框属性边框样式设置能给对象添加边框，设置边框的颜色、粗细、样式。如图。在CSS规则定义”对话框左侧选择“边框”项，能在右边区域设置CSS样式的边框格式。样式设置边框的样式，如果选中“全部相同”复选框，则只需要设置“上”样式，其他方向的样式和“上”相同。第8章样式表8.3定义css属性6列表属性CSS中有关列表的设置丰富了列表的外观。在CSS规则定义”对话框左侧选择“列表”项，能在右边区域设置CSS样式的列表格式。如图。第8章样式表8.3定义css属性7定位属性“定位”项实际上是对层的设置，不过因为DW提供了可视化的层制作功能，所以此项设置在实际操作中几乎不会使用。

第8章样式表8.3定义css属性8扩展属性CSS样式还能实现一些扩展功能，这些功能集中在扩展面板上。这个面板主要包括3种效果：分页、光标和过滤器。在CSS规则定义”对话框左侧选择“扩展”项，能在右边区域设置CSS样式的扩展格式。第8章样式表8.4编辑css样式1、更改css样式为了使网页设计的风格统一更加完美，有时需要更改设置好的CSS样式。在Dreamweaver8可以通过“CSS样式面板”进行更改。操作如下：打开CSS样式面板如图，在“所有规则”当中选中要更改的样式，使用右下角“编辑CSS规则按钮”，即弹出该样式的规则定义对话框，并对其进行设置。或者在“属性”区域中进行更改设置；或者双击“所有规则”中所要更改的样式名称，即弹出该样式的规则定义对话框，并对其进行设置。第8章样式表8.4编辑css样式2、删除css样式如果想要删除已有的样式，同样可以通过CSS样式面板删除。打开CSS样式面板如图，在“所有规则”当中选中要更改的样式，使用右下角“删除CSS规则按钮”即可以删除已有的样式规则。第8章样式表8.4编辑css样式3、导出css样式在Dreamweaver8可以将网页当中的内部样式导出，方法一：将光标定位在该文档当中，单击“文件”菜单，选择“导出”当中的“CSS样式”命令，或者利用“文本”菜单当中的“导出”命令，会弹出如图所示的对话框。选择保存路径，并写上文件名字即可。第8章样式表8.4编辑css样式

应用外部样式表在制作网页过程中，有时需要使用已有的“外部样式表”文件。通常来讲，有两种方式可以使用外部样式表，一种是链接样式表，其代码如下：<linkhref="N1.css"rel="stylesheet"type="text/css"/>/*N1.css为外部样式表文件的名称*/来实现，另一种是导入样式表，其代码如下：<styletype="text/css">@import"mystyle.css";/*mystyle.css为外部样式表文件的名称*/</style>第8章样式表8.4编辑css样式两种方式后