CSS样式表PPT学习课件

1、第8章 CSS样式表,CSS入门 CSS详解 创建和应用CSS 链接外部CSS样式表,1,8.1 CSS入门,早期的网页一般是由HTML标签控制的文本网页，随着Web的流行与发展，漂亮的外观变得越来越重要。 一方面HTML在控制页面格式和外观上越来越力不从心； 另一方面HTML标签中充斥了大量的对外观属性的定义，网页要表现的“内容”与如何“表现”内容混杂在一起，HTML代码变得越来越繁杂，大量的标签堆积在一起，难以阅读和理解。,2,8.1 CSS入门,1996年W3C（万维网联盟）提出了CSS技术规范，它以HTML语言为基础，提供了丰富的样式。 应用了CSS样式的网页，将样式外观设置从HTML

2、文档中分离出来，使代码清晰、容易维护。 CSS一经引入即得到了广泛应用。,3,8.1 CSS入门,CSS是Cascading Style Sheets（层叠样式表）的简称。主要用于对网页中的文本或某一区块的布局、字体、颜色、背景和特效等进行精确控制。 CSS可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容中独立出来，并集中管理。 要改变网页外观时，只需更改样式设定的部分，而HTML文件本身并不需要更改。,4,8.1.1 “CSS样式”面板,“CSS样式”面板是新建、编辑、管理CSS的主要工具。 选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。 “CS

3、S样式”面板提供了全部模式和当前模式。 全部模式可以跟踪文档可用的所有规则和属性。当前模式可以跟踪影响当前所选页面元素的CSS规则和属性。,5,8.1.1 “CSS样式”面板,全部模式下的“CSS样式”面板没有定义CSS前，“CSS样式”面板空白显示。 定义了CSS， “CSS样式”面板中会显示所定义好的CSS规则。,6,8.1.1 “CSS样式”面板,当前模式下在文档编辑区选择了使用CSS样式的元素，“CSS样式”面板中才能显示这个元素当前正在使用的CSS规则。,7,8.1.1 “CSS样式”面板,3显示类别视图,8,8.1.2 定义CSS规则,一般情况下，可在HTML网页文档（内部CSS）

4、或和独立的CSS样式表文档（外部CSS）中新建CSS规则。,9,“新建CSS规则”对话,新建一个HTML网页文档，打开“CSS样式”面板，单击“新建CSS规则”按钮 ，弹出“新建CSS规则”对话框，如图所示。,10,“新建CSS规则”对话,11,8.1.2 定义CSS规则,（1）在“新建CSS规则”对话框中设置“选择器类型”，下拉列表中有4个选项，根据所要定义的CSS规则的需要任意选择一个类型。比如这里保持默认设置“类（可应用于任何HTML元素）”。 （2）在“选择器名称”文本框选择或者输入一个CSS规则名称。不同的选择器类型，CSS规则名称的命名格式和方法是不一样的。因为前一个步骤设置的选择

5、器类型是“类”，所以这里在“名称”文本框中输入.mycss1（名称以点号.开始）。,12,8.1.2 定义CSS规则,（3）在“规则定义”下拉列表中有两个选项，可以设置CSS规则定义在本文档内还是定义在外部样式表文件中。,13,8.1.2 定义CSS规则,（4）单击“确定”按钮，弹出“.mycss1的CSS规则定义”对话框。在该对话框中可以分类设置CSS规则的属性。,14,8.1.2 定义CSS规则,（5）任意设置一下字体、颜色等属性。单击“确定”按钮即可完成一个CSS规则的定义，这时在“CSS样式”面板中就可以看到定义好的CSS规则名称，以及对应这个CSS规则的属性列表。,15,“CSS样式

6、”面板,16,8.1.2 定义CSS规则,从“代码”视图中可以看出，CSS代码应该位于和标签之间。定义样式表规则的部分用和标签来表示。,17,8.1.3 在网页中应用CSS样式,套用样式表的方法主要有三种，下面分别进行介绍。 1在“属性”面板中选择应用特定的样式 打开“属性”面板，在“类”下拉列表框中列出了已经定义的一些类规则。在ID下拉列表框中列出了已经定义的一些ID规则。,18,8.1.3 在网页中应用CSS样式,2利用“标签选择器”选择样式 首先需要在“标签选择器”上选定一个标签，如图8-11中的标签，然后在标签上右击，在弹出的快捷菜单中选择“设置类”|mycss1命令，则可以快速把已经

7、定义的mycss1样式指定给标签。,19,8.1.3 在网页中应用CSS样式,3使用快捷菜单 也可以从快捷菜单中直接给对象指定一个样式，首先选中对象，右击，在快捷菜单中指定样式。,20,8.1.4 CSS规则类型,CSS规则类型包括： 类（可应用于任何HTML元素） ID（仅应用于一个HTML元素） 标签（重新定义HTML元素） 复合内容（基于选择的内容）,21,8.1.4 CSS规则类型,1类（可应用于任何HTML元素） CSS选择器有类选择器和ID选择器两种。类选择器以英文句点（.）开头，而ID选择器以英文井号（#）开头。,22,8.1.4 CSS规则类型,2ID（仅应用于一个HTML元素

8、） ID选择器又可以称为标识选择器，它的名字以英文井号（#）开头，这种选择器样式一般在页面中只用在一个元素上。 3标签（重新定义HTML元素） “标签（重新定义HTML元素）”，可以实现用CSS重新定义HTML标签的外观的功能。,23,8.1.4 CSS规则类型,4.复合内容（基于选择的内容） 针对标签、标签、标签同时进行了CSS规则定义。,24,8.1.4 CSS规则类型,复合内容 “选择器名称”下拉列表框中包含4个有关超级链接的选择器名称，利用它们可以对超级链接的外观进行重新定义。 a:link 超级链接的正常状态。 a:visited 访问过的超级链接状态。 a:hover 鼠标指针指向

9、超级链接的状态。 a:active 选中超级链接状态。,25,8.2 CSS样式详解,26,8.2.1 类型,类型选项主要是对文字的字体大小、颜色、效果等基本样式进行设置。 可只对要改变的属性进行设置，不改变的属性就使之为空。这些属性包括： 1Font-family（字体） 2Font-size（字体大小） 3Font-style（字体样式） 4. Line-height（行高） 5Text-decoration（修饰）,27,8.2.1 类型,类型选项主要是对文字的字体大小、颜色、效果等基本样式进行设置。可只对要改变的属性进行设置，不改变的属性就使之为空。这些属性包括： 6Font-weig

10、ht（字体粗细） 7Font-variant（变体） 8Text-transform（大小写） 9Color（颜色）,28,8.2.2 背景,背景选项主要是对元素背景进行设置，包括背景颜色、背景图像、背景图像控制。 一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。,29,8.2.2 背景,30,8.2.2 背景,背景属性包括： 1Background-color（背景颜色） 2Background-image（背景图像） 3Background-repeat（重复） 4.Background-attachment（附件） 5Background-position（水本位置）

11、 6Background-position（垂直位置）,31,8.2.3 区块,区块选项是设置对象文本文字间距、对齐方式、上标、下标、排列方式、首行缩进等。,32,8.2.3 区块,属性包括： 1Word-spacing（单词间距） 2Letter-spacing（字母间距） 3Vertical-align（垂直对齐） 4. Text-align（文本对齐） 5Text-indent（文字缩进） 6White-space（空格） 7Display（显示）,33,8.2.4 方框,方框选项主要设置对象的边界、间距、高度、宽度和浮动方式等。,34,8.2.4 方框,属性包括： 1Width（宽）

12、2Height（高） 3Float（浮动） 4. Clear（清除） 5Padding（填充） 6Margin（边界）,35,8.2.5 边框,边框设置对象边框的宽度、颜色及样式。,36,8.2.6 列表,列表设置列表项样式、列表项图片和位置。,37,8.2.7 定位,用来确定选定的内容在页面上的定位方式。,38,8.2.7 定位,属性包括： 1Position（类型） 2Visibility（显示） 3Z-Index（Z 轴） 8.Overflow（溢出） 5Placement（定位） 6Clip（剪辑）,39,8.2.8 扩展,扩展包括分页、光标和滤镜效果选项。,40,8.2.8 扩展,1

13、分页 打印网页时，在样式所控制的对象之前或者之后强行分页（Page-break-before或者Page-break-after）。列表中包括4个选项：自动、总是、左对齐和右对齐。 2Cursor（光标） 当鼠标指针位于样式所控制的对象上时改变鼠标指针的外观。“光标”下拉列表中包括一些具体的选项，选择后可以改变鼠标指针的视觉效果。,41,8.2.8 扩展,3Filter（过滤器） 对样式所控制的对象应用特殊效果（包括模糊和反转等滤镜效果）。 “过滤器”下拉列表中包括一些具体的选项，这些效果应用到网页中的元素上后，可以得到一种类似于Photoshop的滤镜效果。,42,8.3 创建CSS样式,在

14、需要设置单个页面的格式时，可以使用内部样式表保存在网页文档内部的样式表。 在需要同时控制多个文档的外观以便在多个页面上实现统一的格式时，可以使用外部样式表，这是保存在网页文档外部的样式表，它被链接到当前页面。,43,8.3.1 内部样式表,内部样式是那些定义了只使用于当前文档的样式。如果用户想定义只在自己站点的一个页面中使用的样式，就可以使用内部样式。 下面通过创建CSS样式对网页中的文本进行格式化。 （1）用Dreamweaver打开网页文档“8.3.1.html”。 （2）单击“样式表”面板中的“新建CSS规则”按钮 ，弹出“新建CSS规则”对话框。,44,8.3.1 内部样式表,（3）在

15、“选择器类型”下拉列表中选择“类（可应用于任何HTML元素）”，在“选择器名称”文本框里输入要定义的CSS样式的名称.ziti，在“规则定义”下拉列表中选择“仅限该文档”，如图8-23所示。,45,8.3.1 内部样式表,（4）单击“确定”按钮，“.ziti的CSS规则定义”对话框中，选择左边“分类”列表框中的“类型”选项，把Font-size（字体大小）设为12px（像素），如图8-24所示。,46,8.3.1 内部样式表,（5）选择 “区块”选项，把Text-index设为2个字体高（ems），如图8-25所示。 （6）单击“确定”按钮，可在“CSS样式”面板看到增加了一个.ziti的CS

16、S样式，如图8-26所示。,图8-25 设置文字缩进 图8-26 “CSS样式”面板,47,8.3.1 内部样式表,（7）切换到“代码”视图，可以看到在之间新增加了以下代码： 这是在HTML文档内部定义的CSS代码。,48,8.3.1 内部样式表,（8）切换到“设计”视图。在“标签选择器”上选定body标签，在body标签上右击，在弹出的快捷菜单中选择“设置类”|ziti命令，就可以把已经定义的ziti样式类指定给body标签。切换到“代码”视图，可以看到标签变成了以下代码： （9）将网页文档另存为“8.3.1(css).html”，用浏览器预览效果。,49,8.3.1 内部样式表,（10）在

17、“CSS样式”面板中，选择.ziti样式，单击“编辑样式”按钮 ，会弹出“.ziti的CSS规则定义”对话框。 （11）在Line-height（行高）右边的两个下拉列表中分别选择“值”、“”选项，然后，再在“（值）”文本框中输入数值，这里输入150%作为网页文字的行间距，如图8-27所示。,50,8.3.1 内部样式表,（12）单击“确定”按钮。此时网页中的文字行间距会自动地调整为定义的样式。,图8-27 定义行高,51,8.3.2 外部样式表,内部样式表只在一个网页中起作用，如果想制作很多具有统一样式的网页，就必须在每个网页内定义相同的CSS样式表。这样很麻烦，效率也很低。 外部CSS样式

18、表能够较好地解决这个问题。先建立一个外部CSS样式表文件，在这个文件中定义文字、段落、表格、超链接等网页元素的样式。然后在需要的网页上链接这个外部CSS样式表文件即可。,52,8.3.2 外部样式表,（1）在开始页的“新建”列表中选择CSS选项，新建一个外部CSS文件。将其保存为mycss.css。 （2）单击“CSS样式”面板的“新建CSS规则”按钮 ，弹出“新建CSS规则”对话框。在“选择器类型”下拉列表中选择“类（可应用于任何HTML元素）”，在“选择器名称”文本框里输入要定义的CSS样式的名称. text ，在“规则定义”下拉列表中选择“外部CSS文档”，如图8-28所示。,53,8.

19、3.2 外部样式表,（3）单击“确定”按钮，弹出“.text的CSS规则定义”对话框。在“分类”列表框中选择“类型”选项，定义字体、大小、行高分别为：宋体、12像素、150%，如图8-29 所示。,图8-28 “新建CSS规则”对话框,图8-29 定义字体、大小和行高,54,8.3.2 外部样式表,（4）在“分类”列表框中选择“区块”选项，定义对齐方式为顶部（top）、左对齐（left），文字缩进为2字体高，如图8-30所示。,图8-30 定义段落的对齐方式、文字缩进,55,8.3.2 外部样式表,（5）单击“确定”按钮，完成.text样式的定义。这时的“CSS样式”面板如图8-31所示。CS

20、S文档的代码内容如图8-32所示。,图8-31 “CSS样式”面板 图8-32 mycss.css的代码内容,56,8.3.2 外部样式表,（6）新建CSS规则，在“选择器类型”下拉列表中选择“标签（重新定义HTML元素）”，在“选择器名称”文本框中输入表格标签table，在“规则定义”下拉列表中选择“仅限该文档”，如图8-33所示。,图8-33 “新建CSS规则”对话框,57,8.3.2 外部样式表,（7）单击“确定”按钮，弹出“table的CSS规则定义”对话框。选择“分类”列表框中的“边框”选项，然后按照图8-34进行设置。,图8-34 定义table的CSS规则,58,8.3.2 外部

21、样式表,（8）完成table的CSS规则定义。 （9）新建一个CSS样式。在“选择器类型” 中选择“复合内容（基于选择的内容）”，在“选择器名称” 中选择a:link选项，在“规则定义” 中选择“仅限该文档”，如图8-35所示。,图8-35 新建超链接CSS样式,59,8.3.2 外部样式表,（10）单击“确定”按钮，弹出“a:link的CSS规则定义”对话框，“分类”列表框中选择“类型”选项，定义字体、大小、颜色、修饰为：宋体、12像素、 #FFFFFF、无。 （11）新建一个CSS样式。在“选择器类型”下拉列表中选择“复合内容（基于选择的内容）”，在“选择器名称”下拉列表中选择a:hove

22、r选项，在“规则定义”下拉列表中选择“仅限该文档”。,60,8.3.2 外部样式表,（12）单击“确定”按钮后，在“a:hover的CSS规则定义”对话框“分类”列表框中选择“类型”选项，定义颜色为：#000000；在“分类”列表框中选择“背景”选项，定义背景颜色为：#00FF00。单击“确定”按钮，完成超链接样式的定义。 （13）选择“文件”|“保存”，保存CSS文件。这时的CSS代码为： charset utf-8; /* CSS Document */ .text ,61,8.3.2 外部样式表,font-family: 宋体; font-size: 12px; line-height:

23、 150%; text-align: left; text-indent: 2em; vertical-align: top; table border: 1px dotted #FF9900; a:link font-family: 宋体; font-size: 12px; color: #FFFFFF; text-decoration: none; ,62,8.3.2 外部样式表,2链接外部CSS样式表 （1）在浏览器中查看一下，发现没有应用外部CSS样式表时网页效果（网页文件8.3.2.html），如图8-36所示。,图8-36 没有应用外部CSS样式表时网页的效果,63,8.3.2 外部样式表,（2）打开网页文件“8.3.2.html”。 （3）“CSS样式”面板单击“附加样式表”按钮 。在 “链接外部样式表” 中的“添加为”选项区域选中“链接”单选按钮，然后单击浏览按