1 / 21

第 5 章 网页内容的修饰－ CSS 样式

第 5 章 网页内容的修饰－ CSS 样式. 教学内容： CSS 样式的类型、创建 CSS 样式、编辑 CSS 样式、设置 CSS 样式的基本属性、链接和导出 CSS 样式表、 CSS 在网页中的应用。 教学重点和难点：掌握在网页中添加、应用 CSS 样式的方法。. 5.1 初识 CSS. CSS 样式就像 word 中的格式刷 , 可以对众多网页中的文本及文本区外观进行统一控制。 5.1.1 样式表的概念

axel-shepherd
Download Presentation

第 5 章 网页内容的修饰－ CSS 样式

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第5章 网页内容的修饰－CSS样式 教学内容：CSS样式的类型、创建CSS样式、编辑CSS样式、设置CSS样式的基本属性、链接和导出CSS样式表、CSS在网页中的应用。 教学重点和难点：掌握在网页中添加、应用CSS样式的方法。

  2. 5.1 初识CSS CSS样式就像word中的格式刷,可以对众多网页中的文本及文本区外观进行统一控制。 5.1.1 样式表的概念 样式表是为了弥补HTML语言而开发，调整字间距、行间距、取消链接的下划线、固定背景图像等样式表可以实现原来的HTML标记无法实现的效果。 1．样式表的优点 （1）内容结构和格式控制相分离 （2）精确控制网页外观 （3）制作体积下，下载页面快 （4）快速规格网页样式 （5）兼容不同浏览器

  3. 2．样式表标记 • 定义样式表的部分用<style ></style>标记来表示。 • 样式表的内容应该位于<head></head>标记之间。 • 在Dreamweaver中为指定字体、字号、文字颜色来定义样式表的时候，在代码视图中出现的HTML代码会出现字体{font-family}或者{font-size}等属性，并且以冒号为间隔设置属性值。属性和属性由分号来区分。 • 应用样式表的文字包括在<span></span>标记之间。 • 有<!--和-->注释标记来套用样式表是因为样式表在Explorer 和Netscape 4.0以上的浏览器中才被支持，使用该注释标记是为了在其他浏览器中被忽略通过。

  4. 5.1.2 CSS样式的类型 1．类样式（class） 类样式的名称必须以句点（英文状态）开头，后跟字母或字母和数字组合（例如，.mycss）。 为类样式命名时，不能使用body，table等与“标签”样式相冲突的HTML标签名称。 class的类别定义在代码中是写在<style>与</style>标记之间，并放在<head>标记之下，一份网页只要写一次即可。

  5. 2．标签样式 标签样式表示重新定义特定HTML标签的外观。 3．高级样式 高级样式会对某一具体的标签组合或者含有特定ID属性的标签应用样式。 高级样式还常用于设定超链接，即通过“新建CSS样式”对话框的“选择器”下拉菜单中提供的四个选项，定义超链接的四种状态。 • a:link：超链接文字的一般状态 • a:visited：超链接文字已链接过的状态 • a:hover：鼠标光标移到超链接文字上的状态 • a:active：超链接文字正在链接中的状态

  6. 5.2使用CSS编辑器 使用CSS编辑器可以创建、编辑和删除CSS样式。并且可以将外部样式表文件附加到当前文档。 • “附加样式表”：单击该按钮会打开“链接外部样式表”对话框，可选择要链接到或导入到当前文档中的外部样式表。 • “新建CSS规则”：打开“新建CSS样式”对话框，可以选择创建的样式类型。如类样式、标签样式或高级样式。 • “编辑样式”：打开“CSS样式定义”对话框，可编辑当前文档或外部样式表中的样式。 • “删除CSS规则”：删除“CSS样式”面板的所选样式，并从应用该样式的所有元素中删除格式，但是不删除对该样式的引用。

  7. 5.2.1 创建CSS新样式 1．创建标签样式 例1：将页面背景色设置成土黄色(#996600)，页面左边界、上边界均为0。 操作步骤如下: ① 单击“CSS样式”面板中的“新建CSS样式”按钮。在“新建CSS样式”对话框中，“选择器类型”设置为“标签”，在“标签”下拉菜单中选择 body ，“定义在”设置为“仅对该文档”，然后单击“确定”按钮，创建一个名为body的标签样式。 ② 在“body的CSS规则定义”对话框中设置该样式的属性，在“分类”的“背景”项中设置网页的背景颜色为“#996600”。然后将“分类”切换到“方框”，在边界区域分别设置页面的上、左边界为“0”像素。 ③ 单击“确定”按钮后，在“CSS样式”面板中会增加body样式名称，并且定义的样式会自动应用到页面中。 ④ 将页面切换到“拆分”视图，我们会发现body标签出现在代码里，是包围在<style>与</style>这对标记之间，并且镶嵌在网页的<head>标记下。 ⑤ 保存网页，按F12键预览网页。

  8. 2．创建类样式 例2：为页面设置标题，将标题设置为“黑体，24点数（pt）”。 具体操作如下： ① 单击“CSS样式”面板中的“新建CSS样式”按钮。在“新建CSS样式”对话框中，“选择器类型”设置为“类”，名称输入“.style2”，“定义在”设置为“仅对该文档”，单击“确定”按钮。 ② 在出现的“.style2的CSS规则定义”对话框中，设置类型项中的字体为“黑体”，大小为“24点数（pt）”。 ③ 单击“确定”按钮。 ④ 保存网页，按F12键预览网页。 3．创建高级样式 参见教材第5章[实例3] 。

  9. 5.2.2 编辑CSS样式 1．管理CSS样式 修改例2中创建的.style2样式。将样式名称改为.biaoti,字体设置为新宋体，字号设置为36像素,颜色设置为#339966。 操作如下： ① 打开“CSS样式”面板，选择.style2样式。单击鼠标右键，在弹出的对话框中选择“重命名”。 ② 此时弹出“重命名类”对话框，在“新建名称”框中输入“.biaoti”，单击“确定”按钮。 ③ 选择.biaoti样式，单击“CSS样式面板”右下角的“编辑样式”按钮，打开“.biaoti的CSS规则定义”对话框。 • 在对话框中将字体设置为新宋体，大小设置为36像素,颜色设置为#339966。修改完毕后，单击“确定”按钮。 通过“CSS样式”面板，还可以删除、复制、重命名一个样式。

  10. 2．内部样式表和外部样式表 内部样式表是将CSS样式的定义直接写在HTML文档Head部分的Style标签内，仅供该网页使用。外部样式表是一系列存储在一个单独的外部文件（ .css 文件，并非HTML文件）中的CSS样式。利用文档head部分中的链接，该文件被链接到Web站点中的一页或多页上。 （1）创建内部样式 在新建一个CSS样式时，在“新建CSS规则”对话框中，选择“仅对该文档”，则所新建的CSS样式便会成为内部样式。前面所建立的几个CSS样式均是内部样式。

  11. （2）创建外部样式： 例3：为网站创建一个名为mail_style .css的外部样式。 操作如下： ① 打开“CSS样式”面板，单击“新建CSS规则”按钮。 ② 在“新建CSS规则”对话框中，输入样式名称.tit，“定义在”选择“新建样式表文件”，单击“确定”按钮。 ③ 在打开的“保存样式表文件为”对话框中，输入要创建的外部样式表文件（CSS文件）的名称mail_style.css，并选择文件的保存路径，单击“保存”按钮。 ④ 在“.tit 的CSS规则定义（在mail_style .css中）”对话框中，设置该样式的大小和颜色。单击“确定”按钮。

  12. 3．导入或链接CSS样式表 例4：将上例中建立的外部样式表文件mail_style.css应用到示例网站的指定页面中。 操作如下： ① 在Dreamweaver中打开示例网站的指定的页面文件。 ② 打开“CSS样式”面板，单击面板右下角的“附加样式表”按钮，打开“链接外部样式表”对话框。 ③ 单击对话框中的“浏览”按钮，从打开的对话框中选择样式表文件mail_style.css。 • 选择“链接”（或“导入”）单选按钮后，单击“确定”按钮，外部样式表文件mail_style.css便被链接（或导入）到指定页面中。 【说明】在“链接外部样式表”对话框中，“添加为”有两个选项“链接”和“导入”。无论选择哪个选项，选择的外部样式表文件都会出现在当前文档的CSS样式面板中。但在导出时两者就有了区别，导入的样式文件在导出时是作为当前文档样式文件的一部分，连同内部样式一起被导出；而链接的外部样式表文件则不会被当作当前文档的样式文件导出。

  13. 4．导出内部样式 例5：将当前网页中的样式导出为外部样式表文件，并命名为link_style.css。 步骤如下： ①打开“CSS样式面板”，单击鼠标右键，选择“导出”菜单，或者选择菜单“文件 | 导出 | CSS样式”命令，弹出“导出样式为CSS文件”对话框。 ②在对话框中选择样式表文件的保存路径，本例为站点根目录下的CSS文件夹，然后输入样式表的文件名link_style.css，单击“保存”按钮。

  14. 5.3 设置CSS样式的属性 1．类型面板 主要用于定义网页中文本的字体、颜色及字体的风格等. 例6:为指定页面设置文字样式。要求是新宋体，12像素细体字，行间距有30像素，颜色#6699FF。 操作如下： ① 打开指定的页面。 ② 打开CSS样式面板，单击“新建CSS规则”按钮，打开“新建CSS规则”对话框，在“名称”文本框中输入“.wz”，然后单击“确定”按钮。 ③ 打开定义样式对话框，在对话框左侧的“分类”列表中选择“类型”后，在右侧的类型属性面板中设置“字体”为“新宋体”，“大小”设置为“12像素”，“粗细”设置为“细体”，“行高”设置为“30像素”，“颜色”设置为“#6699FF”。 ④ 单击“确定”按钮，选取页面中的文字，在属性面板中选择“样式”下拉列表中的“wz”选项。保存文件，按F12键预览 。

  15. 2．背景面板 主要用于在文本、表格、页面等的后面设置背景属性及背景图像的位置。 例7：为上例中的页面添加背景颜色和背景图片。操作如下： ① 打开需设置背景的页面文档。 ② 打开CSS样式面板，单击“新建CSS规则”按钮，打开“新建CSS规则”对话框，在“名称”文本框中输入“.back”，然后单击“确定”按钮。 ③ 打开定义样式对话框，在对话框左侧的“分类”列表中选择“背景”后，在右侧的“背景”选项面板中单击“背景图像”文本框后的“浏览”按钮。 ④ 在弹出的“选择图像源文件”对话框中，选择要设置为背景的图像。 ⑤ 单击“确定”按钮回到“背景”选项面板，将除了背景图像之外的其他部分的背景颜色设置为#F9FDFF。 ⑥ 为了不让背景图像平铺显示，把“重复”设置为“不重复”，然后为了让背景图像显示在右底部，将“水平位置”设置为“右对齐”，“垂直位置”设置为“底部”， ⑦ 单击“确定”按钮，为了把完成后的样式表应用到网页文档中，选择操作界面下面的标记<td.back>后，在属性面板中选择“样式”下拉列表中的“back”选项。 ⑧ 保存文档，按F12键预览。

  16. 3．区块面板 区块面板可以精确定义整段文本中文字的间距、对齐方式和文字缩进等属性。如下图所示： 4．方框面板 方框样式是定义特定元素的大小及其与周围元素的间距等属性。

  17. 5．边框面板 使用“CSS的规则定义”窗口的“边框”面板可以定义元素周围的边框的设置（如宽度、颜色和样式）。见下图。可以为边框的四边指定不同的颜色，不同的宽度和不同类型的边框线。

  18. 6．列表面板 “列表”面板可以定义列表样式，可以选择图像取代项目符号。如下图所示： • “类型”：设置项目符号的外观。 • “项目符号图像”：可以为项目符号指定自定义图像。 • “位置”：设置列表项目的换行位置。“内”表示应用该样式的段落过长而自动换行时，直接显示在旁边的空白上，不进行缩进；“外”表示应用该样式的段落过长而自动换行时，以缩进方式显示。

  19. 7．定位面板 定位样式主要用来定义层在页面中的排布相关属性。如下图所示：

  20. 8．扩展面板 “CSS的规则定义”窗口的“扩展”面板包括分页、光标和滤镜等选项。如图所示：

  21. 5.6 习题答案 一、填空题： 1.类样式，标签样式，高级样式； 2.链接，导入。 二、选择题： 1. C； 2. A 三、判断题 1.  2. × 四、简答题 1．答：（1）内容结构和格式控制相分离；（2）精确控制网页外观；（3）制作体积小，下载页面快；（4）快速规格网页样式；（5）兼容不同浏览器。 2．答：内部样式表是将CSS样式的定义直接写在HTML文档Head部分的Style标签内，仅供该网页使用。外部样式表是一系列存储在一个单独的外部文件（ .css 文件，并非HTML文件）中的CSS样式。利用文档head部分中的链接，该文件被链接到Web站点中的一页或多页上。 3．答：

More Related