第08章 CSS样式表.ppt

1、第8章 CSS样式表,1,第8章 CSS样式表,第8章 CSS样式表,2,在短短的几年内，HTML的功能有了长足地进步，但是，显示内容和样式的混合一直是HTML语言的一大缺陷。为了能够让网页更好地在各种平台上兼容，W3C标准化组织推出了CSS规范，将样式描述内容彻底地独立于文档结构。CSS弥补了HTML语言在定义网页显示方面的不足，为用户提供了方便的控制页面外观的方法。本章将对CSS的基本概念、如何创建CSS样式、CSS样式的应用方式以及设置CSS的扩展属性进行详细介绍。,第8章 CSS样式表,3,8.1.1 CSS的基本概念,CSS是一系列格式设置规则，它们控制Web页面内容的显示方式。使用

2、CSS设置页面格式时，可将内容与表现形式分开。用于定义代码表现形式的CSS规则通常保存在另一个文件(外部样式表)或HTML文档的文件头部分。CSS的定义代码由一系列的格式定义组成，它可以应用到使用标准HTML标记格式的文本上，也可以应用到通过Class(类)属性所设定范围的文本上，还可以应用到其他符合CSS标准规范的文本上。,第8章 CSS样式表,4,8.1.2 CSS样式表特点, 可以将网页的显示控制与显示内容分离。 能更有效地控制页面的布局。 可以制作出体积更小、下载更快的网页。 可以更快、更方便地维护及更新大量的网页。,第8章 CSS样式表,5,8.1.3 CSS样式的类型, 自定义CS

3、S(类样式) 重定义标签的CSS CSS选择器样式(高级样式),第8章 CSS样式表,6,8.1.3 CSS样式的类型, 自定义CSS(类样式) 自定义样式最大的特点就是具有可选择性，可以由用户自由决定将该样式应用于哪些元素。就文本操作而言，用户可以选择一个字、一行、一段乃至整个页面中的文本添加自定义的样式。选择样式应用范围实质是在要使用样式的一对标签之间(如选择范围中没有标签，则Dreamweaver会自动添加一个名为“span”的标签)添加一个class=”classname”语句(classname是引用的样式名称)。,第8章 CSS样式表,7,8.1.3 CSS样式的类型, 重定义标签

4、的CSS 它实际上重新定义了现有HTML标签的默认属性，具有“全局性”。一旦对某个标签重定义样式，页面中所有该标签都会按CSS的定义显示。注意：只有成对出现的HTML标签(如)才能进行重定义，单个标签(如)不能进行重定义。,第8章 CSS样式表,8,8.1.3 CSS样式的类型, CSS选择器样式(高级样式) 可以用来控制标签属性，通常用来设置链接文字的样式。对链接文字的控制，有以下4种类型： “a:link”(链接的初始状态)：用于定义链接的常规状态。 “a:hover”(鼠标指向的状态)：如果定义了这种状态，当鼠标指针移到链接上时，即按该定义显示，用于增强链接的视觉效果。 “a:visit

5、ed”(访问过的链接)：对已经访问过的链接，按此定义显示。为了能正确区分已经访问过的链接。“a:visited”的显示方式要不同于普通文本及链接的其它状态。图8.1 CSS样式面板 “a:active”(在链接上按下鼠标时的状态)：用于表现鼠标按下时的链接状态。实际中应用较少。如果没有特别的需要，可以定义成与“a:link”状态或者“a:hover”状态相同。,第8章 CSS样式表,9,8.1.4 CSS样式面板,使用主菜单【窗口】|【CSS样式】或单击属性面板中的“CSS”按钮可以打开CSS面板，,第8章 CSS样式表,10,8.1.5 创建CSS样式的步骤, 将插入点放在文档中，然后在“C

6、SS样式”面板中，单击面板右下侧的“新建CSS规则”按钮或选择主菜单【文本】|【CSS样式】|【新建CSS规则】，打开“新建CSS规则”对话框 在“新建CSS规则”对话框中，根据要创建的CSS样式类型，选择“类”、“标签”或“高级”。 为样式命名。 选择定义样式的保存位置。 单击【确定】按钮，出现“CSS规则定义”对话框。 在“CSS规则定义”对话框中，完成样式有关属性的设置(详见8.4设置CSS样式)。,第8章 CSS样式表,11,8.2 创建CSS样式,自定义样式的创建 重定义HTML标记 高级样式,第8章 CSS样式表,12,8.2.1 自定义样式的创建,如果一个或多个网页中的某一部分需

7、要使用特殊的样式，就可以定义一个自定义样式，并把该自定义样式应用到相应部分。自定义样式是唯一可以应用于文档中任意元素的CSS样式类型。当创建了自定义样式以后，与当前文档关联的所有自定义样式都显示在“CSS样式”面板中和属性面板的“样式”下拉列表中。用户可以先选择要添加样式的元素，然后在“CSS样式”面板或属性面板的“样式”下拉列表中选择要添加的自定义样式。,第8章 CSS样式表,13,8.2.1 自定义样式的创建,【例8.1】现有一网页文件如图所示，要求用自定义样式方法将其中宋词的标题设置为黑体，大小为18点居中显示；宋词的内容设置为宋体，大小为12点，首行空2字符，居左显示。,第8章 CSS

8、样式表,14,8.2.2 重定义HTML标记,在实际的网页设计中，有时要对网页中的某些特定元素更改样式。如对表格中的内容进行样式的更改，这时可以通过重新定义HTML的td标记来实现。定义后的样式会直接应用到文档中对应的标记上。,第8章 CSS样式表,15,8.2.2 重定义HTML标记,【例8.2】将左图中课程表的内容用样式方法设置为宋体、大小为9点，行高为20点，颜色为蓝色，达到右图的显示效果。,第8章 CSS样式表,16,8.2.3 高级样式,绝大多数站点的CSS中定义了链接的各种状态。定义链接的各种状态，实际上就是定义锚标记的各种属性。CSS样式类型中的“高级”可完成这一功能。类似于重定

9、义标签方法，定义过的链接状态也会直接应用到文档中。,第8章 CSS样式表,17,8.2.3 高级样式,【例8.3】左图显示的是默认的链接样式，文字格式采用蓝色，下划线，文字也很大。这种默认的链接样式有一些弊端(如下划线是为了容易分辨链接，但是如果链接很多，下划线反而不利于阅读)。要求通过定义高级样式来改变其显示格式。,第8章 CSS样式表,18,8.3 CSS样式的两种应用方式,在创建CSS时，可以根据设计需要，选择不同的保存方式：如果希望用同一个样式控制多个文档的格式，使用“外部CSS样式表”是最有效的方法；如果只有一个页面需要应用CSS样式，则使用相对简单的“仅对该文档的CSS”。,第8章

10、 CSS样式表,19,8.3.1 “仅对该文档”样式的创建和应用,定义了“仅对该文档”样式的HTML文档头部分代码如下： 我的文档 在定义了“仅对该文档”的CSS样式后，即可在文档中直接引用。,第8章 CSS样式表,20,8.3.2 “外部样式表”样式的创建和应用,外部样式表样式将CSS写在一个文件中，在HTML文档头中通过引用所定义的样式文件来进行格式控制。 如当前文件目录下建有CSS文件mystyle.css，在一个HTML文档中引用它时，系统会自动在该文档的和标记之间添加以下语句： 应用外部CSS文件的优点是可以在站点中的任何一个HTML文档中进行引用，从而使整个站点在风格上保持一致，避

11、免重复的CSS属性设置。另外，当需要改版或做某些重大调整时，直接修改该CSS文件中的相关样式，即可更改网页中应用该样式的对象格式。,第8章 CSS样式表,21,8.3.3 使用已有的“外部样式表”文件,当已经建立有“外部样式表”时，就可以将其链接到当前文档使用。 将外部样式表链接到当前文档后，其所定义的样式就可以和文档内部定义的样式一样使用了。 如果想把当前文档内部建立的CSS样式表导出为一个外部CSS样式表文件，可以使用主菜单【文件】|【导出】|【CSS样式】命令来完成。,第8章 CSS样式表,22,8.4 设置CSS样式,在Dreamweaver中，可以对CSS样式格式进行精确定制。当新建

12、或编辑CSS样式时，都会打开“CSS规则定义”对话框，通过该对话框完成样式的有关设置。设置内容包括类型、背景、区块、方框、边框、列表、定位和扩展8大类别。,第8章 CSS样式表,23,8.4.1 类型,【字体】下拉列表：为样式设置字体。 【大小】组合框：定义文本大小。可设置相对大小或者绝对大小，设置绝对大小时还可以在其右边的下拉列表中选择单位。常使用“点数(pt)”为单位，一般把正文字体大小设置为9pt或10.5pt。 【样式】下拉列表：设置字体的特殊格式，包括“正常”、“斜体”和“偏斜体”三个选项。 【行高】下拉列表：设置文本所在行的高度。选择“正常”项，则由系统自动计算行高和字体大小，也可

13、以直接在其中输入具体的行高数值，然后在右边的下拉列表中选择单位。注意行高的单位应该和文字的单位一致，行高的值应等于或略大于文字大小。,第8章 CSS样式表,24,8.4.1 类型,【修饰】选项区域：向文本中添加下划线、上划线或删除线，或使文本闪烁。常规文本的默认设置是“无”。链接的默认设置是“下划线”。 【粗细】下拉列表：设置文字的笔画粗细。选择粗细数值，可以指定字体的绝对粗细程度，选择“粗体”、“特粗”和“细体”则可以指定字体相对的粗细程度。 【变体】下拉列表：设置文本的小型大写字母变体。即将小写字母改为大写，但显示尺寸仍按小写字母的尺寸显示。该设置只有在浏览器中才能看到效果。 【大小写】下

14、拉列表：将英文单词的首字母大写或全部大写或全部小写。 【颜色】：设置文本颜色。,第8章 CSS样式表,25,8.4.2 背景,在不使用CSS样式的情况下，利用页面属性只能够使用单一颜色或用图像水平垂直平铺来设置背景。使用“CSS规则定义”对话框的“背景”类别能够更加灵活的设置背景。可以对页面中的任何元素应用背景属性，例如，可以创建一个样式，将背景颜色或背景图像添加到文本块、表格等页面元素中。,第8章 CSS样式表,26,8.4.2 背景,【背景颜色】项：设置元素的背景颜色。 【背景图像】项：设置元素的背景图像。 【重复】下拉列表：设置当使用图像作为背景时是否需要重复显示，一般用于图像尺寸小于页

15、面元素面积的情况，包括以下4个选项。 “不重复”：表示只在元素开始处显示一次图像。 “重复”：表示在应用样式的元素背景的水平方向和垂直方向上重复显示该图像。 “横向重复”：表示在应用样式的元素背景的水平方向上重复显示该图像。 “纵向重复”：表示在应用样式的元素背景的垂直方向上重复显示该图像。 【附件】下拉列表：有两个选项：“固定”和“滚动”。分别决定背景图像是固定在原始位置还是可以随内容一起滚动。 【水平位置】和【垂直位置】：指定背景图像相对于元素的对齐方式。如果附件属性为“固定”，则位置相对于文档窗口而不是元素。可以用于将背景图像与页面中心水平和垂直对齐。,第8章 CSS样式表,27,8.4

16、.3 区块,使用“区块”类别可以定义段落文本中文字的字距、对齐方式等格式， 【单词间距】组合框：设置英文单词之间的距离。 【字母间距】组合框：增加或减小文字之间的距离。若要减小字符间距，可以指定一个负值(例如-4)。 【垂直对齐】下拉列表：设置应用元素的垂直对齐方式。 【文本对齐】下拉列表：设置应用元素的水平对齐方式。包括“居左”、“居右”、“居中”和“两端对齐”四个选项。 【文字缩进】文本框：指定每段中的第一行文本缩进的距离。可以使用负值创建文本凸出，但显示方式取决于浏览器。 【空格】下拉列表：确定如何处理元素中的空格。包括以下3个选项： “正常”：按正常的方法处理其中的空格，即将多个空格处

17、理为一个。 “保留”：将所有的空格都作为文本用标记进行标识，保留应用样式元素原始状态。 “不换行”：文本只有在遇到标记时才换行。 【显示】下拉列表：设置是否以及如何显示元素。如果选择“无”则会关闭应用此属性的元素的显示。,第8章 CSS样式表,28,8.4.4 方框,在图像的属性面板上，可以设置图像的大小、图像水平和垂直方向上的空白区域等。方框样式完善并丰富了这些属性设置，它定义特定元素的大小及其与周围元素间距等属性。,第8章 CSS样式表,29,8.4.4 方框,【宽】和【高】文本框：设置元素的图8.22 CSS规则定义对话框之方框定义宽度和高度，只有在样式应用于图像或层时，才起作用。 【浮

18、动】下拉列表：设置文本、层、表格等元素在哪个边围绕元素浮动。元素按设置的方式环绕在浮动元素的周围。 【清除】下拉列表：设置元素的哪一边不允许有层。如果层出现在被清除的那一边，则元素将移动到层的下面。 【填充】选项区域：指定元素内容与元素边框之间的间距(如果没有边框，则为边距)。“全部相同”为应用此属性元素的“上”、“右”、“下”和“左”侧设置相同的填充属性。取消选择“全部相同”选项可分别设置元素各个边的填充。 【边界】选项区域：指定一个元素的边框与其它元素之间的间距(如果没有边框，则为填充)。只有当样式应用于文本块一类的元素(段落、标题、列表等)时，才起作用。“全部相同”为应用此属性元素的“上

19、”、“右”、“下”和“左”侧设置相同的边距属性。取消选择“全部相同”选项可分别设置元素各个边的边距。,第8章 CSS样式表,30,8.4.5 边框,使用“边框”类别可以定义元素周围的边框的宽度、颜色和样式等设置，如图8.23所示。 【样式】选项：设置边框的外观样式。边框样式包括无、点划线、虚线、实线、双线、槽状、脊状、凹陷和凸出等。所定义的样式只有在浏览器中才呈现出效果，且实际显示方式还与浏览器有关。 【宽度】选项：设置元素边框的粗细。包括细、中、粗，也可设定具体数值。 【颜色】选项：设置边框的颜色。,第8章 CSS样式表,31,8.4.6 列表,“列表”类别为列表标记定义项目符号、大小和类型

20、等列表设置。 【类型】下拉列表：设置项目符号或编号的外观。 【项目符号图像】组合框：用于为项目符号指定自定义图像。可以输入图像的路径，或单击“浏览”按钮选择图像。 【位置】下拉列表：设置列表项换行时是缩进还是边缘对齐。选择“内”设置列表换行时为缩进，选择“外”设置列表换行时为边缘对齐。,第8章 CSS样式表,32,8.4.7 定位,“定位”类别(如图8.25所示)用于设置层(层的相关概念参见第9章)的相关属性。使用定位样式可以自动新建一个层并把页面中使用该样式的对象放到层中，并且用在对话框中设置的相关参数控制新建层的属性。 【类型】下拉列表：确定浏览器应如何来定位层，选项有以下三个： “绝对”

21、：使用绝对坐标定位层，在“定位”文本框中输入相对于页面左上角的坐标值。 “相对”：使用相对坐标定位层，在“定位”文本框中输入相对于应用样式的元素在网页中原始位置的偏离值，这一设置无法在编辑窗口中看到效果。 “静态”：使用固定位置，设置层的位置不移动。,第8章 CSS样式表,33,8.4.7 定位,【显示】下拉列表：确定层的可见性。如果不指定显示属性，则默认情况下大多数浏览器都继承父级的属性。 【Z轴】下拉列表：确定层的叠加顺序。 【溢位】下拉列表：确定当层的内容超出层的大小时的处理方式。图8.26 CSS规则定义对话框之扩展定义 【置入】选项：指定层的位置和大小。具体含义主要根据在【类型】下拉

22、列表中的设置。由于层是矩形的，需要两个点就可以准确地描绘层的位置和形状。第1个是左上角的顶点，由“左”和“上”两项进行设置；第2个是右下角的顶点，用“下”和“右”两项进行调协。 【裁切】选项：设置限定层中可见区域的位置和大小。,第8章 CSS样式表,34,8.4.8 扩展,“扩展”类别包括分页、光标指针和滤镜选项，能更好地对自定义功能进行扩展。 【分页】选项：设置为网页添加分页符号，通过指定在某元素之前或之后进行分页。当打印网页中的内容时在指定的位置停止并强行换页。 【光标】下拉列表：用于设置当鼠标指针位于样式所控制的对象上时指针类型。 【滤镜】：对样式所控制的对象应用特殊效果。作为CSS样式

23、的新扩展，CSS滤镜属性能把可视化的滤镜和转换效果添加到一个标准的HTML元素上。,第8章 CSS样式表,35,8.5 CSS样式中的滤镜,“滤镜”本来是图像处理中一种常用技术，用于实现图像的一些特殊效果。随着网页设计技术的发展，在CSS中也加入了滤镜技术，在Dreamweaver 8的CSS规则之扩展定义中提供了丰富的滤镜，使得制作网页时，直接在Dreamweaver中即可实现原来只有在图像处理工具中才能实现的滤镜效果。滤镜效果可以添加到图像、表格、按钮、层等HTML对象上。,第8章 CSS样式表,36,8.5.1 Alpha滤镜,“Alpha”滤镜是把一个目标元素与背景混合。设计者可以指定

24、数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。,第8章 CSS样式表,37,8.5.1 Alpha滤镜,其语法格式如下： Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) 其中的各个参数含义如下： “Opacity ”代表透明的程度。默认的范围是从0到100，单位是百分比。0代表完全透明，100代表完全不透明。当设置渐变的透明效果时，它为起始透明度。 “FinishOpacity”是一个可选参数，如果要设置渐变

25、的透明效果，用它来指定结束透明度。范围也是0到100。 “Style”参数指定了透明区域的形状特征。其中0代表统一形状，1代表线形，2代表放射状，3代表长方形。 “StartX”和“StartY”设置渐变透明效果开始时的X和Y坐标。 “FinishX”和“FinishY”设置渐变透明效果结束时的X和Y坐标。,第8章 CSS样式表,38,8.5.1 Alpha滤镜,【例8.4】定义一个Alpha滤镜，设置一个渐变透明效果，然后把该CSS样式应用到网页中的一张图像上，图像大小为200*160。,第8章 CSS样式表,39,8.5.2 Blur滤镜,用手指在一幅尚未干透的油画上迅速划过时，画面就会变

26、得模糊。“Blur”就是用于产生同样的模糊效果。其语法格式如下： Blur(Add=?, Direction=?, Strength=?) 其中各个参数含义如下： “Add”参数是一个布尔值，可以是“TRUE(默认)”或者“FALSE”。它指定图片是否被改变成模糊效果。 “Direction”参数用来设置模糊的方向。模糊效果是按照顺时针的方向进行的，其中0度代表垂直向上，然后每45度为一个单位。它的默认值是270度。 “Strength”值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认是5像素。,第8章 CSS样式表,40,8.5.3 DropShadow滤镜,“DropShaow”滤镜的作用是添加对象的阴影效果。其工作原理是将当前对象复制后建立一个偏移量，加上较深的颜色，其语法格式如下： DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 其中的各个参数含义如下： “Color”代表投射阴影的颜色，指定的方法可以使用#RRGGBB的形式。