外部CSS样式表课件.ppt

1、第8章 CSS样式表【知识目标知识目标】l熟悉熟悉CSSCSS样式表的概念样式表的概念l掌握掌握CSSCSS网页的创建网页的创建【能力目标能力目标】l掌握掌握CSSCSS方法方法创建创建网页的方法网页的方法l掌握掌握CSSCSS样式的使用方法样式的使用方法第8章 CSS样式表CSSCSS样式概述样式概述创建创建CSSCSS样式样式CSSCSS样式的应用方式样式的应用方式设置设置CSSCSS样式样式CSSCSS样式中的滤镜样式中的滤镜8.1 CSS样式概述nCSSCSS样式样式 CSS样式表（样式表（Cascading Style Sheets，简称，简称CSS），），又称为又称为层叠式样式表层

2、叠式样式表，由，由W3C（World Wide Web Consortium）组织开发的。）组织开发的。CSS样式是预先定义的一个样式是预先定义的一个格式的集合，包括格式的集合，包括字体、大小、颜色、对齐方式字体、大小、颜色、对齐方式等。利用等。利用CSS样式可以使整个站点的风格保持一致，是网页设计样式可以使整个站点的风格保持一致，是网页设计中用途最广泛、功能最强大的元素之一。中用途最广泛、功能最强大的元素之一。思考：思考：利用利用HTML也可以控制文本的颜色、大小、对也可以控制文本的颜色、大小、对齐方式等，那么为什么还要引入齐方式等，那么为什么还要引入CSS?生活总是美丽的生活总是美丽的 不

3、是苦恼太多不是苦恼太多,而是我们而是我们的胸怀不够开阔的胸怀不够开阔 不是幸福太少不是幸福太少,而是我们而是我们还不懂得生活还不懂得生活忧愁时忧愁时,就写一首诗就写一首诗 快乐时快乐时,就唱一支歌就唱一支歌 无论天上掉下来的是什无论天上掉下来的是什么么 生命总是美丽的生命总是美丽的ptext-align:center;生活总是美丽的生活总是美丽的 不是苦恼太多不是苦恼太多,而是我们的胸怀不够开阔而是我们的胸怀不够开阔 不是幸福太少不是幸福太少,而是我们还不懂得生活而是我们还不懂得生活 忧愁时忧愁时,就写一首诗就写一首诗 快乐时快乐时,就唱一支歌就唱一支歌 无论天上掉下来的是什么无论天上掉下来的

4、是什么 生命总是美丽的生命总是美丽的8.1 CSS样式概述 HTMLHTML主要侧重于定义内容，比如主要侧重于定义内容，比如表示一个段落，表示一个段落，表示标题，而并没有过多设计表示标题，而并没有过多设计HTMLHTML的排版和的排版和界面效果。界面效果。为了解决为了解决HTMLHTML排版和界面效果的局限性的问题，排版和界面效果的局限性的问题，人们也走了不少弯路，用了一些不好的方法，比人们也走了不少弯路，用了一些不好的方法，比如给如给HTMLHTML增加很多的属性结果将代码变得很臃肿，增加很多的属性结果将代码变得很臃肿，将文本变成图片将文本变成图片 ，过多利用，过多利用TableTable来

5、排版，用空来排版，用空白的图片表示白色的空间等白的图片表示白色的空间等 。直到。直到CSSCSS出现。出现。8.1 CSS样式概述nCSS样式表的样式表的特点特点1）可以将网页的显示控制与显示内容分离。）可以将网页的显示控制与显示内容分离。2）能更有效地控制页面的布局。）能更有效地控制页面的布局。3）可以制作出体积更小、下载更快的网页。）可以制作出体积更小、下载更快的网页。4）可以更快、更方便地维护及更新大量的网页。）可以更快、更方便地维护及更新大量的网页。8.1 CSS样式概述在在Dreamweaver8可以定义以下的样式类型：可以定义以下的样式类型：u自定义自定义CSS：指根据用户的需要创

6、建一个：指根据用户的需要创建一个CSS样式属性，可应用到文字，图片等网页元样式属性，可应用到文字，图片等网页元素中。素中。u重定义标签的重定义标签的CSS：可以对：可以对HTML语言中的语言中的某一标签进行重新定义。某一标签进行重新定义。uCSS选择器样式（高级样式）：选择器样式（高级样式）：控制标签属控制标签属性，通常用来设置链接文字的样式，对链接文性，通常用来设置链接文字的样式，对链接文字的控制有字的控制有4种。种。(1)自定义CSS(类样式)根据用户的需要创建一个根据用户的需要创建一个CSSCSS样式属性，可样式属性，可应用到文字，图片等网页元素中。应用到文字，图片等网页元素中。(2)重

7、定义标签的CSS可以对可以对HTMLHTML语言中的某一标签进行重新定义语言中的某一标签进行重新定义(3)CSS选择器样式(高级样式)可以用来控制标签属性，通常用来设置可以用来控制标签属性，通常用来设置链接文字样式链接文字样式。8.1 CSS样式概述 CSSCSS样式面板样式面板 用来查看、创建、编辑和删除用来查看、创建、编辑和删除CSSCSS样式样式,并并且可以在该面板中将外部样式表附加到当前文且可以在该面板中将外部样式表附加到当前文档。档。8.1 CSS样式概述nCSS样式面板样式面板 单击菜单栏中单击菜单栏中“窗口窗口”|“CSS样式样式”命令或用组合键命令或用组合键Shift+F11键

8、打开键打开CSS样式面板，如图所示。样式面板，如图所示。“全部全部”模式模式 “正在正在”模式模式8.1 CSS样式概述 CSS样式面板有样式面板有“全部全部”和和“正在正在”两种模式。两种模式。“全部全部”模式：模式：显示两个窗格：显示两个窗格：“所有规则所有规则”窗格窗格（上部）和（上部）和“属性属性”窗格（下部）。窗格（下部）。“正在正在”模式：模式：显示三个窗格：显示文档中当前所选显示三个窗格：显示文档中当前所选内容的内容的CSS属性的属性的“所选内容的摘要所选内容的摘要”窗格，显示窗格，显示所选属性的位置的所选属性的位置的“规则规则”窗格，以及窗格，以及CSS属性的属性的“属性属性”

9、窗格。窗格。8.1 CSS样式概述 面板中主要功能按钮如下：面板中主要功能按钮如下：显示类别视图按钮显示类别视图按钮 显示列表视图按钮显示列表视图按钮 显示设置属性按钮显示设置属性按钮 表示附加或链接外部样式表。表示附加或链接外部样式表。新建样式表。新建样式表。编辑选中的样式表。编辑选中的样式表。删除选中的样式表删除选中的样式表8.1 CSS样式概述1在在CSS样式面板中，单击样式面板中，单击“新建新建”按钮，打开按钮，打开“新新建建CSS规则规则”对话框，如图。对话框，如图。2设置选择器类型为设置选择器类型为“类类”，名字为，名字为.dazi，定义在，定义在“新建样式表文件新建样式表文件”，

10、单击，单击“确定确定”按钮，打开按钮，打开“保保存样式表文件存样式表文件”对话框。对话框。8.1 CSS样式概述3保存样式表文件，同时打开保存样式表文件，同时打开“.dazi的的CSS规则定义的规则定义的对话框，如图所示。对话框，如图所示。8.1 CSS样式概述4在在“类型类型”选项中，设置字体字号等项目，选项中，设置字体字号等项目，完成后单击完成后单击“确定确定”按钮，新建的样式出按钮，新建的样式出现在样式面板中，如图所示。现在样式面板中，如图所示。8.1 CSS样式概述 CSS样式设置的代码规则由选择器和声明两样式设置的代码规则由选择器和声明两部分组成。部分组成。选择器选择器是样式标识符（

11、如是样式标识符（如p、h1、类名或、类名或ID）声明声明用于设置样式的属性。用于设置样式的属性。h1color:red;font-size:25px;选择器属性值属性值声明声明ptext-align:center;8.2 创建CSS样式 创建创建方法一方法一 文本文本|CSS|CSS样式样式|新建新建8.2 创建CSS样式 创建创建方法二方法二 在在“CSSCSS样式样式”面板面板中，单击面板右下侧中，单击面板右下侧的的“新建新建CSSCSS规则规则”按钮按钮8.2 创建CSS样式 实现方法：创建自定义样式（实现方法：创建自定义样式（classclass）。创）。创建好样式后，选中文档中的对象

12、，点建好样式后，选中文档中的对象，点“CSSCSS样式样式”面板上的面板上的CSSCSS名称应用所选样式。名称应用所选样式。自定义样式的创建自定义样式的创建 例例1.1.1.没有应用样式的网页。没有应用样式的网页。8.2 创建CSS样式 2.2.点击点击“CSSCSS样式样式”面板右下角的面板右下角的“新建新建CSSCSS样式样式”按钮。按钮。3.3.在类型中选择在类型中选择“类类”（classclass）。）。8.2 创建CSS样式4.4.在名称中输入一个以在名称中输入一个以.开头的名称。开头的名称。不能忽略不能忽略这个小点这个小点“.”。5.5.定义定义CSSCSS样式。实例中定义字体为宋

13、体，大小样式。实例中定义字体为宋体，大小1212像素，行高像素，行高2020像素，修饰无，颜色像素，修饰无，颜色#FF6600#FF6600。按按“确定确定”按钮后，一个按钮后，一个CSSCSS样式就创建好了。样式就创建好了。8.2 创建CSS样式6.6.继续创建继续创建CSSCSS样式。样式。7.7.定义定义CSSCSS样式。样式。8.2 创建CSS样式8.8.定义好在样式显示在定义好在样式显示在“CSSCSS样式样式”面板上。面板上。自定义样式并不直接应用在网页中。自定义样式并不直接应用在网页中。8.2 创建CSS样式9.9.选中网页中的内容，右击选中网页中的内容，右击“CSSCSS样式样

14、式”面板上的样面板上的样式名称，然后选择式名称，然后选择“套用套用”命令（或通过命令（或通过“属性属性面板面板”中的中的“样式样式”下拉列表应用相应的样式）。下拉列表应用相应的样式）。样式就应用到所选范围了。样式就应用到所选范围了。10.10.应用应用“redred”样式后的网页。样式后的网页。8.2 创建CSS样式11.11.继续选择一行文本，点击一种样式名称。继续选择一行文本，点击一种样式名称。12.12.应用不同样式后的网页。应用不同样式后的网页。8.2 创建CSS样式 重定义重定义HTMLHTML标记标记例例2：要实现的目标：把一个网页的文字变成好要实现的目标：把一个网页的文字变成好看

15、的看的1212象素（象素（pxpx）大小。）大小。实现方法：通过实现方法：通过“重定义重定义HTMLHTML”标签，定义标签，定义tdtd（tdtd是单元格的标签）的字体大小为是单元格的标签）的字体大小为1212象素象素（pxpx）。因为整个网页内容放在表格中的，也）。因为整个网页内容放在表格中的，也是放在单元格中的，所以，可能通过重定义单是放在单元格中的，所以，可能通过重定义单元格样式，改变所有放在单元格里的内容。当元格样式，改变所有放在单元格里的内容。当然，重定义表格标签然，重定义表格标签tabletable，也可以实现同样的，也可以实现同样的效果。效果。简明步骤：打开样式面板简明步骤：打

16、开样式面板在类型中选择在类型中选择“重重定义定义HTMLHTML”标签标签选择要重定义的标签（例如选择要重定义的标签（例如tdtd）给所选标签（例如给所选标签（例如tdtd）定义）定义CSSCSS一个定义了一个定义了标签的网页就做好了。标签的网页就做好了。8.2 创建CSS样式 具体步骤：具体步骤：1.打开一个网页文档。打开一个网页文档。2.打开样式面板。打开样式面板。3.点击点击“新建新建CSS样式样式“按钮按钮4.在在“类型类型”中，选择中，选择“重定义重定义HTML”标标签。签。8.2 创建CSS样式5.5.选择选择tdtd标签。标签。tdtd标签代表单元格。标签代表单元格。6 6选择分

17、类中的选择分类中的“类型类型”。8.2 创建CSS样式7.设置字体：选择字体，如果没有需要的字体，可设置字体：选择字体，如果没有需要的字体，可以编辑字体列表以编辑字体列表 大小：大小：设置字体大小，好看的中文字大小有设置字体大小，好看的中文字大小有12象素象素（px）和）和9点数（点数（pt）两种，两者效果差不多。）两种，两者效果差不多。行高：行高：行高是一行文字与另一行文字之间的距离，行高是一行文字与另一行文字之间的距离，为了方便阅读，行高设置大点吧。可以设置在为了方便阅读，行高设置大点吧。可以设置在15像素到像素到25像素之间。实例中使用像素之间。实例中使用20像素。像素。修饰：修饰：对于

18、普通文本，选择无。对于链接，可以选对于普通文本，选择无。对于链接，可以选择下划线，上划线加下划线，无等几种。择下划线，上划线加下划线，无等几种。颜色：颜色：黑色最适合阅读，其次就是灰色，白色。链黑色最适合阅读，其次就是灰色，白色。链接默认的蓝色，颜色太深，如果整个页面都是链接默认的蓝色，颜色太深，如果整个页面都是链接，使用蓝色根本起不到分辨的作用，并且十分接，使用蓝色根本起不到分辨的作用，并且十分难看。建议页面不要使用默认的蓝色！难看。建议页面不要使用默认的蓝色！8.2 创建CSS样式例例3：定义锚标签。也就是有关链接的标签。定义锚标签。也就是有关链接的标签。锚对应的标签是锚对应的标签是a 1

19、.在标签下拉栏中选择在标签下拉栏中选择a。2.定义定义a的的CSS样式。大小选择样式。大小选择12象素；修象素；修饰选择无；颜色选择一种深灰色，就可饰选择无；颜色选择一种深灰色，就可以和采用黑色的文本区分开来以和采用黑色的文本区分开来8.2 创建CSS样式 高级样式高级样式 在在CSS样式中，定义链接的各种状态，也样式中，定义链接的各种状态，也是必须掌握的。绝大多数站点的是必须掌握的。绝大多数站点的CSS中定中定义了链接的各种状态。定义链接的各种状义了链接的各种状态。定义链接的各种状态，可以理解成定义锚标签态，可以理解成定义锚标签a的各种状态。的各种状态。a:link 链接的初始状态。链接的初

20、始状态。a:visited 访问过的链接。访问过的链接。a:hover 鼠标放在链接上的状态。鼠标放在链接上的状态。a:active 在链接上按下鼠标时的状态。在链接上按下鼠标时的状态。8.2 创建CSS样式例例3：1.没有定义链接样式的网页。采用默没有定义链接样式的网页。采用默认蓝色，下划线，文字也很大。认蓝色，下划线，文字也很大。8.2 创建CSS样式2.点击点击“CSS样式样式”面板右下角的面板右下角的“新建新建CSS样式样式”按钮。按钮。3.在在“类型类型“中选择中选择“高级高级”。定义在。定义在“仅对该文档仅对该文档”。8.2 创建CSS样式4.点击点击“选择器选择器”旁边的下拉按钮

21、。弹出各种状旁边的下拉按钮。弹出各种状态的锚标签。态的锚标签。5.选择选择“a:link”标签。标签。定义字体为宋体，修饰选择定义字体为宋体，修饰选择“无无”就可以去掉就可以去掉下划线，行高为下划线，行高为20像素，颜色为像素，颜色为#333333灰色，灰色，以和文本默认的黑色有差别。以和文本默认的黑色有差别。8.2 创建CSS样式 定义定义“a:link”标签样式后的网页。标签样式后的网页。8.2 创建CSS样式6选择选择a:hover标签。标签。a:hover是指鼠标放是指鼠标放 在链接上的状态。在链接上的状态。定义字体为宋体，大小为定义字体为宋体，大小为12像素，颜色像素，颜色为红色为红

22、色#FF3300。在浏览器中，鼠标放在链接上面，链接在浏览器中，鼠标放在链接上面，链接变成红色。变成红色。8.2 创建CSS样式7.选择选择“a:active”标签，标签，a:active是指在链是指在链接上按下鼠标时的状态。接上按下鼠标时的状态。定义字体为宋体，大小为定义字体为宋体，大小为12像素，颜色为像素，颜色为灰色灰色#999999。8.2 创建CSS样式n在浏览器中，鼠标在链接上按上时，链在浏览器中，鼠标在链接上按上时，链接变成灰色。注意到没有，在链接上按下接变成灰色。注意到没有，在链接上按下时有时有虚线框虚线框。8.2 创建CSS样式8.选择选择“a:visited”标签。标签。a

23、:visited是指访是指访问过的链接。问过的链接。定义字体为宋体，大小为定义字体为宋体，大小为12像素，下划像素，下划线为线为“无无”，颜色为黑色。，颜色为黑色。8.2 创建CSS样式 在浏览器中点击链接，鼠标离开链接后，在浏览器中点击链接，鼠标离开链接后，链接颜色就变成黑色。跟旁边灰色的链链接颜色就变成黑色。跟旁边灰色的链接还是有细微差别的。接还是有细微差别的。8.3 CSS样式的应用方式 在创建在创建CSS时，可以根据个人喜好，选时，可以根据个人喜好，选择一种应用择一种应用CSS的方式。如果希望用相的方式。如果希望用相同的样式控制多个文档的格式，使用同的样式控制多个文档的格式，使用“外部

24、外部CSS样式表样式表”是最简单的方法。是最简单的方法。如果喜欢步骤简单，或者只有一个页面如果喜欢步骤简单，或者只有一个页面需要应用某个需要应用某个CSS样式表，那就使用样式表，那就使用“仅对该文档的仅对该文档的CSS”。8.3 CSS样式的应用方式 在在Dreamweaver中创建中创建CSS时，可以选时，可以选择择“定义在该文档定义在该文档”和和“新建样式表文新建样式表文件件”之一创建之一创建CSS样式表。样式表。“定义在该定义在该文档文档”只作用在当前文档；只作用在当前文档；“新建样式新建样式表文件表文件”创建出一个独立的外部创建出一个独立的外部CSS样样式表文件，多个文档可以链接到外部

25、式表文件，多个文档可以链接到外部CSS样式表文件。样式表文件。8.3 CSS样式的应用方式 使用外部使用外部(Extenal)(Extenal)样式表，相对于内嵌样式表，相对于内嵌(Inline)(Inline)和内部式和内部式(Internal)(Internal)的，有以下优点：的，有以下优点：样式代码可以复用样式代码可以复用 。一个外部。一个外部CSSCSS文件，可以被很多文件，可以被很多网页共用。网页共用。便于修改。如果要修改样式，只需要修改便于修改。如果要修改样式，只需要修改CSSCSS文件，而文件，而 不需要修改每个网页。不需要修改每个网页。提高网页显示的速度提高网页显示的速度 。

26、如果样式写在网页里，会降低。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个网页显示的速度，如果网页引用一个CSSCSS文件，这个文件，这个CSSCSS文件多半已经在缓存区文件多半已经在缓存区(其它网页早已经引用过它其它网页早已经引用过它)，网页显示的速度就比较快。网页显示的速度就比较快。8.3 CSS样式的两种应用方式(重点)方式一方式一：“仅对该文档仅对该文档”样式样式应用：应用：如果只有一个页面需要应用如果只有一个页面需要应用CSSCSS样式样式8.3 CSS样式的应用方式1 1.“仅对该文档的仅对该文档的CSSCSS”的创建和应用的创建和应用 选择选择“仅对该文档仅对该文档”

27、，定义，定义CSS后，后，CSS就出现在就出现在之间。它之间。它的优点是创建好了就直接应用到当前文档的优点是创建好了就直接应用到当前文档了。了。8.3 CSS样式的应用方式 部分代码部分代码文档中的CSS8.3 CSS样式的两种应用方式(重点)方式二方式二：“外部样式表外部样式表”样式样式应用：应用：如果希望用同一个样式控制多个文档的如果希望用同一个样式控制多个文档的格式格式方式二：“外部样式表”样式应用外部CSS样式的优点 可以在站点中的任何一个可以在站点中的任何一个HTMLHTML文档中进文档中进行引用，从而使整个站点在风格上保持一行引用，从而使整个站点在风格上保持一致，避免重复对致，避免

28、重复对CSSCSS属性进行设置。另外，当属性进行设置。另外，当需要改版或做某些重大调整时，直接修改该需要改版或做某些重大调整时，直接修改该CSSCSS文件中的相关样式，即可更改网页中应用文件中的相关样式，即可更改网页中应用该样式的对象格式。该样式的对象格式。8.3 CSS样式的应用方式3 3.链接链接“外部外部CSSCSS样式表样式表”文件文件 使用外部使用外部CSS的优点是：只要修改外的优点是：只要修改外部的部的CSS样式表文件，样式表文件，所有链接到该样所有链接到该样式表文件的文档格式都会自动发生改变。式表文件的文档格式都会自动发生改变。第一步第一步：打开一个要应用：打开一个要应用CSS的

29、网页文档的网页文档第二步第二步：打开：打开CSS样式面板样式面板第三步第三步：点击：点击“附加样式表附加样式表”按钮按钮8.3 CSS样式的应用方式第四步第四步：选择需要的外部：选择需要的外部CSS样式表文件样式表文件第五步第五步：点击：点击“确定确定”按钮。之后文档就按钮。之后文档就会应用外部样式会应用外部样式附加CSS样式“链接链接”：网页与样式表文件的关系是链接网页与样式表文件的关系是链接关系，而且不将样式表的信息导入网页中。关系，而且不将样式表的信息导入网页中。“导入导入”：将外部样式表文件的信息导入到将外部样式表文件的信息导入到当前网页文档中。当前网页文档中。8.3 CSS样式的应用

30、方式备注：若需要把文档中的备注：若需要把文档中的全部全部CSS样式导样式导出成为一个独立的出成为一个独立的CSS样式表文件样式表文件简明步骤简明步骤：文件：文件导出导出CSS样式样式8.4 设置CSS样式-类型主要用于定义文本属性类型实例8.4 设置CSS样式-背景可以对页面中的任何元素应用背景属性背景实例8.4 设置CSS样式-区块 可以定义段落文本中文字的字距、对齐方式等格式区块实例8.4 设置CSS样式-方框 可以设置图像的大小、图像水平和垂直方向上的空白区域，也可以实现图文混排。方框实例8.4 设置CSS样式-边框 定义元素周围的边框的样式、宽度和颜色等设置。边框实例8.4 设置CSS

31、样式-列表 定义项目符号、大小和类型等列表设置列表实例8.4 设置CSS样式-定位 用于设置层的相关属性定位实例8.4 设置CSS样式-扩展 用于设置分页、光标指针和滤镜选项补充：光标指针说明8.5 CSS样式中的滤镜 CSSCSS滤镜：滤镜：又称过滤器，可以为网页中的又称过滤器，可以为网页中的元素添加各种效果。主要滤镜及说明见下表元素添加各种效果。主要滤镜及说明见下表:透明(Alpha)滤镜Alpha(Opacity=0,FinishOpacity=100,Style=1,Alpha(Opacity=0,FinishOpacity=100,Style=1,StartX=0,StartY=0,

32、FinishX=257,FinishY=245)StartX=0,StartY=0,FinishX=257,FinishY=245)模糊(Blur)滤镜Blur(Add=true,Direction=135,Strength=200)Blur(Add=true,Direction=135,Strength=200)阴影(DropShadow)滤镜DropShadow(Color=red,OffX=5,OffY=5,DropShadow(Color=red,OffX=5,OffY=5,Positive=0)Positive=0)发光(Glow)滤镜Glow(Color=#9966CC,Stren

33、gth=5)Glow(Color=#9966CC,Strength=5)创建水平、垂直镜像图像水平：水平：FlipH FlipH 垂直：垂直：FlipVFlipV图片灰度化、反色、Xray效果GrayGrayInvertInvertXrayXray波纹(Wave)效果Wave(Add=true,Freq=3,LightStrength=100,Wave(Add=true,Freq=3,LightStrength=100,Phase=45,Strength=20)Phase=45,Strength=20)偏移投影、透明掩膜效果偏移投影：偏移投影：Shadow(Color=#cc66ff,Dire

34、ction=225)Shadow(Color=#cc66ff,Direction=225)透明掩膜：透明掩膜：Mask(Color=#666699)Mask(Color=#666699)样式冲突 将两个或两个以上的将两个或两个以上的CSS规则应用于同一规则应用于同一元素时，存在两种情况：应用于同一元素的元素时，存在两种情况：应用于同一元素的多个规则分别定义了元素的不同属性，这时多个规则分别定义了元素的不同属性，这时多个规则同时起作用。另一种是两个或两个多个规则同时起作用。另一种是两个或两个以上的规则同时定义了元素的不同属性，这以上的规则同时定义了元素的不同属性，这种情况称为种情况称为样式冲突。样式冲突。浏览器按就近优先原则应用浏览器按就近优先原则应用CSS规则规则