第8章 样式表.

Presentation on theme: "第8章 样式表."— Presentation transcript:

1 第8章 样式表

2 第8章 样式表 内容提要 CSS的基础知识 创建CSS样式 定义CSS属性 编辑CSS样式 样式冲突 第8章 样式表

3 8.1 CSS简介 1、什么是CSS CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。 页面内容 存放在HTML文档中 存放在另一个文件(.css )中 HTML文档的某一部分 通常为文件头部分 表现形式 第8章 样式表

4 8.1 CSS简介 2、CSS的特点 CSS将页面的内容与表现形式分离，解决了网页制作当中普遍存在的这个问题。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表可以同时改变站点中所有页面的布局和外观，从而层叠样式表极大地提高了工作效率。 第8章 样式表

5 8.1 CSS简介 采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势： 1．表现和内容相分离
将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。 2．提高页面浏览速度 对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。 3．易于维护和改版 只要简单的修改几个CSS文件就可以重新设计整个网站的页面。 4．使用CSS布局更符合现在的W3C标准 第8章 样式表

6 8.1 CSS简介 3 、css的写法 语法格式为：selector {property: value}
其中selector（选择符）是可以是多种形式，通常是将要定义样式的HTML标记，例如BODY、P、TABLE……，可以通过此方法定义其property（属性）和value（值），属性和值要用冒号隔开。 例如：body {color: black}，此例的效果是使页面中的文字为黑色。 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称通常是几个单词的组合。例如：p {font-family: “ Times New Roman ”} (定义段落字体为Times New Roman) 。 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开。例如：p {text-align: left; color: green} (段落左对齐;并且段落中的文字为绿色)。 此外，CSS中还可以进行选择符组、类选择符、ID选择符、包含选择符和包含选择符等具体的设置。 第8章 样式表

7 8.1 CSS简介 可以在CSS中插入注释来说明代码的含义，注释有利于以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以"/*" 开头，以"*/" 结尾，如下: 　　/* 定义段落样式表 */ 　　p 　　{ 　　text-align: center; /* 文本居中排列 */ 　　color: black; /* 文字为黑色 */ 　　font-family: arial /* 字体为arial */ 　　} 第8章 样式表

8 8.1 CSS简介 4、 初识css面板 第8章 样式表

9 8.1 CSS简介 1）．显示类别视图 设置方式及其功能：单击“CSS样式面板”左下角显示类别视图按钮将CSS样式面板切换为类别视图状态，如右图所示。在此种视图下，将CSS属性划分为9个类别，分别是“字体”、“背景”、“区块”、“边框”、“方框”、“列表”、 “定位”、“扩展”和“表、内容、引用”。可以通过单击加号展开属性列表，通过点击减号折叠属性列表。 第8章 样式表

10 8.1 CSS简介 2）.显示列表视图按钮 设置方式及其功能：单击“CSS样式面板”左下角显示列表视图按钮将CSS样式面板切换为列表视图状态，如图所示。将已定义样式显示在视图的前面，方便使用。在该状态下，将全部的样式按字母顺序进行列表，这样可以根据字母排列顺序进行编辑和查找。 第8章 样式表

11 8.1 CSS简介 3）.只显示设置属性按钮 设置方式及其功能：单击“CSS样式面板”左下角只显示设置属性按钮将CSS样式面板切换为只显示设置属性状态，如图8.4所示。在该状态下，将全部已经设置的属性按字母顺序进行排列显示。通过单击面板下方的“添加属性”链接来添加新的属性。 第8章 样式表

12 8.2 创建CSS样式 利用dreamweaver中“CSS样式面板”中创建样式规则按钮来创建一个新的样式。具体操作步骤如下：
第一步：将光标定位在文档中，然后在“CSS样式面板”中，单击面板右下角“新建CSS规则”按钮或者利用“文本”菜单中“CSS样式”中的新建 “CSS规则”命令，打开“新建CSS规则”对话框，如图所示。 第8章 样式表

13 8.2 创建CSS样式 第二步：在“新建CSS规则”对话框中，选择所要创建的选择器类型。
第三步：在名称框中输入相应的名称、选择已有的标签或是某种链接状态或ID。 第四步：选择新建CSS规则要定义的位置。 第五步：单击“确定”按钮，出现“CSS规则定义”对话框，如图所示，完成相应的属性设置。 第8章 样式表

14 8.2 创建CSS样式 在dreamweaver中“CSS样式面板”中创建样式规则中提供了三种样式类型，分别是类，标签和高级。
1．自定义CSS样式(类样式) ：可以将样式属性设置为任何文本范围或文本块。如.self{color:#66ff00}强调的一点是在样式名称前必须加“.”，并且包含任何字母和数字的组合。如果没有输入开头的句点，在Dreamweaver中将自动输入。 2.HTML标签样式：重定义标记的格式。创建或更改标签的CSS样式时，所有用标记设置了格式的文本都立即更新。如h1{font.family: Times New Roman }。 3.CSS链接样式：重定义链接有关的格式。有如下四种： A:link:设置正常状态下链接文字的样式。 A:active:设置鼠标单击时的链接文字的外观。 A:visited:设置访问过的链接外观。 A:hover:设置鼠标放置链接文字上文字的效果。 第8章 样式表

15 8.2 创建CSS样式 1、定义css类样式 假设一个或多个网页中的某些元素使用特殊样式，应该选择定义一个类样式，并把该样式应用到相应的元素上。类样式是唯一可以应用于文档中任意元素的CSS样式类型。在类样式定义完成之后，与当前文档关联的所有类样式都会在“CSS样式”面板或者元素“属性面板”的 “样式”列表中。用户亦可以先选择要添加样式的元素，进而在“CSS样式”面板或属性面板中的“样式”列表中选择要添加的类样式。 第8章 样式表

16 8.2 创建CSS样式 例如，将一个网页文件如图，要求创建类样式的方法实现将文章标题设置为仿宋体，大小为20pt，颜色为蓝色；正文的内容设置为宋体，大小为14pt，颜色为绿色。 第8章 样式表

17 8.2 创建CSS样式 具体操作步骤如下： 1.在“CSS样式”面板中单击新建样式规则按钮，弹出“新建CSS样式”对话框，在选择类样式中选择“类”选项。 2.将“新建CSS规则”相应的参数设置为如图所示。 第8章 样式表

18 8.2 创建CSS样式 3.单击确定，弹出“.timu的CSS规则定义”对话框，将其参数按要求设置为如图所示。 第8章 样式表

19 8.2 创建CSS样式 4.仿照上述步骤创建名为.zhengwen的类样式，将其字体设为宋体，大小为14pt,颜色为绿色。在CSS样式面板中会显示出以创建的两个样式。 5.在文档中选择唐诗的题目，通过“属性面板”中的 “样式”下拉列表应用.timu样式，或者选择CSS样式面板中右键单击所选样式，弹出快捷菜单选择“套用”命令。同样的方法应用正文样式。效果见下图。 第8章 样式表

20 8.2 创建CSS样式 2、重定义HTML标签样式 在设计制作网页的过程中，有时要对网页中某些特定元素更改样式，这时就可以采用重定义HTML标签样式。要想对某项重新设置，就选择某标签。譬如要设置表格样式可选择“table”或“td”，设置图像样式选择“img”等。  第8章 样式表

21 8.2 创建CSS样式 例如：<b>标签的作用在于把文字显示为粗体，这是浏览器对<b>标签的默认属性的解释。但可以通过样式表对其进行改写。 具体操作步骤如下： 1.在“CSS样式”面板中单击新建样式规则按钮，弹出“新建CSS样式”对话框，在选择类样式中选择“标签”选项。 2.将 “新建CSS规则”相应的参数设置为如下图所示。 第8章 样式表

22 8.2 创建CSS样式 3.单击确定，弹出“b的CSS规则定义”对话框，将其参数按要求设置为如图所示。
4.在文档中代码视图当中，body区中写<b > 这个字是粗体</b>，看到的效果不是粗体，而是正常。这是因为<b>的font.weight属性被重新定义了，所以在显示的时候会优先解析CSS对其的定义。 第8章 样式表

23 8.2 创建CSS样式 3、修改超级链接样式 文字链接可以说是网页中最常见的页面元素了，默认的文字链接样式都是带下划线的效果，网页设计和制作者通常需要改变这一陈不变的外观，以使之符合页面的整体效果，自从样式表得到广泛的应用后，这项操作就变得非常方便。在Dreamweaver 8中CSS样式类型中的“高级”可以实现这一功能。操作方法类似于重定义HTML标签的操作方法。定义后的链接状态也会直接应用到文档中。 第8章 样式表

24 8.2 创建CSS样式 例如：默认情况下的链接文字，文字格式是带有下划线的蓝色字体，而且字体也很大，为了使网页的设计风格整体一致，通过CSS样式表来改变其显示格式。具体的操作步骤如下： 1．新建一个页面，在文档中写入“这是一个超级链接”， 在属性面板中设定它的链接为“#”。 2．在CSS样式面板中点击“新建CSS规则”按钮，弹出对话框，在“定义在”一栏选择“仅对该文档”，在“选择器类型”一栏里选择“高级”。打开选择器下拉列表，如图。可以看到动态链接的4种状态。 第8章 样式表

25 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章 样式表

26 8.2 创建CSS样式 4、定义样式规则的位置 CSS样式表按其所在位置分三种，分别是内嵌样式表、内部样式表和外部样式表。 1.内嵌样式表
是写在使用它的标签(Tag)内的，例如要在<p>标签中使用，其语法为：<p style font-size:20pt>这段文字使用了内嵌样式表，更改了字体大小为20</p>。 2.内部样式表 不同于内嵌样式表，其是写在html网页的<head></head>标签之间的，所以它对本网页全部有效。应注意的是，因为它不是写在某一个标签内的，所以在写的时候要注意，自己想在那个标签内使用这个样式表，再定义的时候也要写清楚，否则会造成整个页面的混乱。 3.外部样式表 外部样式表就是将样式表的内容单独写到一个记事本中，并保存为后缀为.css的文件，如果想使用外部样式表需附加进来。 这三种样式表区别不大，只是用外部样式表可以使代码重复使用，方便其它页面调用同样的CSS样式表。在dreamweaver 8中，在新建CSS样式规则的时候，在新建CSS规则对话框中“定义在”中选择定义样式规则的位置。 第8章 样式表

27 8.3定义css属性 在“CSS规则定义”对话框”中，可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来格式化页面。但是需要明确的是，在定义某个CSS样式的时候，不必对每一个项都进行设置，需要什么效果，对相应的项进行设置就可以。 第8章 样式表

28 8.3定义css属性 1、类型属性 在类型属性当中，主要是对文本等样式的设置，如图。 第8章 样式表

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

30 8.3定义css属性 3、 区块属性 在CSS规则定义”对话框左侧选择“区块”项，能在右边区域设置CSS样式的区块格式。如图所示。
第8章 样式表

31 8.3定义css属性 4 、方框属性 前面讲述过设置过图像的大小、设置图像水平和垂直方向上的空白区域、设置图像是否有文字环绕效果等。方框设置进一步完善、丰富了这些设置。如图所示。 第8章 样式表

32 8.3定义css属性 5、 边框属性 边框样式设置能给对象添加边框，设置边框的颜色、粗细、样式。如图。在CSS规则定义”对话框左侧选择“边框”项，能在右边区域设置CSS样式的边框格式。样式设置边框的样式，如果选中“全部相同”复选框，则只需要设置“上”样式，其他方向的样式和“上”相同。 第8章 样式表

33 8.3定义css属性 6 列表属性 CSS中有关列表的设置丰富了列表的外观。在CSS规则定义”对话框左侧选择“列表”项，能在右边区域设置CSS样式的列表格式。如图。 第8章 样式表

34 8.3定义css属性 7 定位属性 “定位”项实际上是对层的设置，不过因为DW提供了可视化的层制作功能，所以此项设置在实际操作中几乎不会使用。 第8章 样式表

35 8.3定义css属性 8 扩展属性 CSS样式还能实现一些扩展功能，这些功能集中在扩展面板上。这个面板主要包括3种效果：分页、光标和过滤器。在CSS规则定义”对话框左侧选择“扩展”项，能在右边区域设置CSS样式的扩展格式。 第8章 样式表

36 8.4编辑css样式 1、更改css样式 为了使网页设计的风格统一更加完美，有时需要更改设置好的CSS样式。在Dreamweaver 8可以通过“CSS样式面板”进行更改。操作如下： 打开CSS样式面板如图，在“所有规则”当中选中要更改的样式，使用右下角“编辑CSS规则按钮”，即弹出该样式的规则定义对话框，并对其进行设置。或者在“属性”区域中进行更改设置；或者双击“所有规则”中所要更改的样式名称，即弹出该样式的规则定义对话框，并对其进行设置。 第8章 样式表

37 8.4编辑css样式 2、删除css样式 如果想要删除已有的样式，同样可以通过CSS样式面板删除。打开CSS样式面板如图，在“所有规则”当中选中要更改的样式，使用右下角“删除CSS规则按钮”即可以删除已有的样式规则。 第8章 样式表

38 8.4编辑css样式 3、 导出css样式 在Dreamweaver 8可以将网页当中的内部样式导出，方法一：将光标定位在该文档当中，单击“文件”菜单，选择 “导出”当中的“CSS样式”命令，或者利用“文本”菜单当中的 “导出”命令，会弹出如图所示的对话框。选择保存路径，并写上文件名字即可。 第8章 样式表

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

40 8.4编辑css样式 两种方式后的显示效果略有区别，区别如下：
在Dreamweaver 8中可以通过以下操作步骤实现使用外部样式表： （1）打开“CSS样式”面板。 （2）单击面板的“链接样式表”按钮，将指定外部样式表文件链接到当前文档。 （3）在当前文档中应用外部样式表中的CSS样式即可。 第8章 样式表

41 8.5样式冲突 <p> …… <font size=18pt> 样式冲突</font size>
在网页制作过程中，有的时候两个或者多个样式规则会使用在同一个元素上。通常有两种情况：一种应用于同一元素的多个规则分别定义了元素的不同属性，多个规则同时起作用。另一种是两个或者多个声明会使用在同一个元素上。 而这就可能带来冲突。例如：在同一个网页中，应用的外部样式表中规定<p> 中字体为12pt，而在正文中存在这样的代码： <p> …… <font size=18pt> 样式冲突</font size> </p> 此时，就产生了样式冲突。 第8章 样式表

42 8.5样式冲突 如果产生了样式冲突该怎么解决呢？ 通常浏览器的解决方法都是就近原则，以后为准；实质上是以样式事先设置的优先级决定的。
第8章 样式表

43 8.6设置CSS样式实例 有这样一个有待格式化的页面如图8.23，要将其利用CSS样式表格式化成如图8.24的效果。
图8.23 待格式化页面 第8章 样式表

44 8.6设置CSS样式实例 有这样一个有待格式化的页面如图8.23，要将其利用CSS样式表格式化成如图8.24的效果。
第8章 样式表

45 Thanks！ 第8章 样式表