Upload
axel-shepherd
View
66
Download
7
Embed Size (px)
DESCRIPTION
第 5 章 网页内容的修饰- CSS 样式. 教学内容: CSS 样式的类型、创建 CSS 样式、编辑 CSS 样式、设置 CSS 样式的基本属性、链接和导出 CSS 样式表、 CSS 在网页中的应用。 教学重点和难点:掌握在网页中添加、应用 CSS 样式的方法。. 5.1 初识 CSS. CSS 样式就像 word 中的格式刷 , 可以对众多网页中的文本及文本区外观进行统一控制。 5.1.1 样式表的概念 - PowerPoint PPT Presentation
Citation preview
第第 55 章 网页内容的修饰-章 网页内容的修饰-CSSCSS 样式 样式
教学内容:教学内容: CSSCSS 样式的类型、创建样式的类型、创建 CSSCSS 样式、样式、编辑编辑 CSSCSS 样式、设置样式、设置 CSSCSS 样式的基本属性、样式的基本属性、链接和导出链接和导出 CSSCSS 样式表、样式表、 CSSCSS 在网页中的应在网页中的应用。用。教学重点和难点:掌握在网页中添加、应用教学重点和难点:掌握在网页中添加、应用CSSCSS 样式的方法。样式的方法。
5.1 5.1 初识初识 CSS CSS CSS 样式就像 word 中的格式刷 , 可以对众多网
页中的文本及文本区外观进行统一控制。5.1.1 样式表的概念 样式表是为了弥补 HTML 语言而开发,调整字间
距、行间距、取消链接的下划线、固定背景图像等样式表可以实现原来的 HTML 标记无法实现的效果。
1 .样式表的优点( 1 )内容结构和格式控制相分离( 2 )精确控制网页外观 ( 3 )制作体积下,下载页面快( 4 )快速规格网页样式( 5 )兼容不同浏览器
2 .样式表标记• 定义样式表的部分用 <style ></style> 标记来表示。• 样式表的内容应该位于 <head></head> 标记之间。• 在 Dreamweaver 中为指定字体、字号、文字颜色来
定义样式表的时候,在代码视图中出现的 HTML 代码会出现字体 {font-family} 或者 {font-size} 等属性,并且以冒号为间隔设置属性值。属性和属性由分号来区分。
• 应用样式表的文字包括在 <span></span> 标记之间。• 有 <!-- 和 --> 注释标记来套用样式表是因为样式表在
Explorer 和 Netscape 4.0 以上的浏览器中才被支持,使用该注释标记是为了在其他浏览器中被忽略通过。
5.1.2 CSS 样式的类型1 .类样式( class ) 类样式的名称必须以句点(英文状态)开
头,后跟字母或字母和数字组合(例如, .mycss )。
为类样式命名时,不能使用 body , table等与“标签”样式相冲突的 HTML 标签名称。
class 的类别定义在代码中是写在 <style>与 </style> 标记之间,并放在 <head> 标记之下,一份网页只要写一次即可。
2 .标签样式 标签样式表示重新定义特定 HTML 标签的外观。3 .高级样式 高级样式会对某一具体的标签组合或者含有特
定 ID 属性的标签应用样式。 高级样式还常用于设定超链接,即通过“新建
CSS 样式”对话框的“选择器”下拉菜单中提供的四个选项,定义超链接的四种状态。– a:link :超链接文字的一般状态– a:visited :超链接文字已链接过的状态– a:hover :鼠标光标移到超链接文字上的状态– a:active :超链接文字正在链接中的状态
5.2 使用 CSS 编辑器 使用 CSS 编辑器可以创建、编辑和删除 CSS
样式。并且可以将外部样式表文件附加到当前文档。
• “ 附加样式表”:单击该按钮会打开“链接外部样式表”对话框,可选择要链接到或导入到当前文档中的外部样式表。
• “ 新建 CSS 规则”:打开“新建 CSS 样式”对话框,可以选择创建的样式类型。如类样式、标签样式或高级样式。
• “ 编辑样式”:打开“ CSS 样式定义”对话框,可编辑当前文档或外部样式表中的样式。
• “ 删除 CSS 规则”:删除“ CSS 样式”面板的所选样式,并从应用该样式的所有元素中删除格式,但是不删除对该样式的引用。
5.2.1 创建 CSS 新样式1 .创建标签样式例 1 :将页面背景色设置成土黄色 (#996600) ,页面左边界、上边界均为 0 。
操作步骤如下 :① 单击“ CSS 样式”面板中的“新建 CSS 样式”按钮。在“新
建 CSS 样式”对话框中,“选择器类型”设置为“标签”,在“标签”下拉菜单中选择 body ,“定义在”设置为“仅对该文档”,然后单击“确定”按钮,创建一个名为 body 的标签样式。
② 在“ body 的 CSS 规则定义”对话框中设置该样式的属性,在“分类”的“背景”项中设置网页的背景颜色为“ #996600” 。然后将“分类”切换到“方框”,在边界区域分别设置页面的上、左边界为“ 0” 像素。
③ 单击“确定”按钮后,在“ CSS 样式”面板中会增加 body 样式名称,并且定义的样式会自动应用到页面中。
④ 将页面切换到“拆分”视图,我们会发现 body 标签出现在代码里,是包围在 <style> 与 </style>这对标记之间,并且镶嵌在网页的 <head> 标记下。
⑤ 保存网页,按 F12键预览网页。
2 .创建类样式 例 2 :为页面设置标题,将标题设置为“黑体, 24 点
数( pt )”。具体操作如下:① 单击“ CSS 样式”面板中的“新建 CSS 样式”按
钮。在“新建 CSS 样式”对话框中,“选择器类型”设置为“类”,名称输入“ .style2” ,“定义在”设置为“仅对该文档”,单击“确定”按钮。② 在出现的“ .style2 的 CSS 规则定义”对话框中,
设置类型项中的字体为“黑体”,大小为“ 24 点数( pt )”。③ 单击“确定”按钮。④ 保存网页,按 F12键预览网页。 3 .创建高级样式参见教材第 5 章 [ 实例 3] 。
5.2.25.2.2 编辑编辑 CSSCSS 样式样式1 .管理 CSS 样式 修改例 2 中创建的 .style2 样式。将样式名称改为 .biaoti, 字体设
置为新宋体,字号设置为 36 像素 , 颜色设置为 #339966 。操作如下:① 打开“ CSS 样式”面板,选择 .style2 样式。单击鼠标右键,
在弹出的对话框中选择“重命名”。② 此时弹出“重命名类”对话框,在“新建名称”框中输
入“ .biaoti” ,单击“确定”按钮。③ 选择 .biaoti 样式,单击“ CSS 样式面板”右下角的“编辑样
式”按钮,打开“ .biaoti 的 CSS 规则定义”对话框。④ 在对话框中将字体设置为新宋体,大小设置为 36 像素 , 颜色
设置为 #339966 。修改完毕后,单击“确定”按钮。 通过“ CSS 样式”面板,还可以删除、复制、重命名一个样式。
2 .内部样式表和外部样式表 内部样式表是将 CSS 样式的定义直接写在 HTML
文档 Head 部分的 Style 标签内,仅供该网页使用。外部样式表是一系列存储在一个单独的外部文件( .css 文件,并非 HTML 文件)中的 CSS 样式。利用文档 head 部分中的链接,该文件被链接到Web站点中的一页或多页上。
( 1 )创建内部样式 在新建一个 CSS 样式时,在“新建 CSS 规则”
对话框中,选择“仅对该文档”,则所新建的CSS 样式便会成为内部样式。前面所建立的几个CSS 样式均是内部样式。
( 2 )创建外部样式:例 3 :为网站创建一个名为 mail_style .css 的外部样式。操作如下:① 打开“ CSS 样式”面板,单击“新建 CSS 规则”按钮。② 在“新建 CSS 规则”对话框中,输入样式名称 .tit ,
“定义在”选择“新建样式表文件”,单击“确定”按钮。③ 在打开的“保存样式表文件为”对话框中,输入要创建
的外部样式表文件( CSS 文件)的名称 mail_style.css ,并选择文件的保存路径,单击“保存”按钮。 ④ 在“ .tit 的 CSS 规则定义(在 mail_style .css 中)”对
话框中,设置该样式的大小和颜色。单击“确定”按钮。
3 .导入或链接 CSS 样式表 例 4 :将上例中建立的外部样式表文件 mail_style.css 应用到示
例网站的指定页面中。操作如下:① 在 Dreamweaver 中打开示例网站的指定的页面文件。② 打开“ CSS 样式”面板,单击面板右下角的“附加样式
表”按钮,打开“链接外部样式表”对话框。③ 单击对话框中的“浏览”按钮,从打开的对话框中选择样式
表文件 mail_style.css 。④ 选择“链接”(或“导入”)单选按钮后,单击“确定”按
钮,外部样式表文件 mail_style.css便被链接(或导入)到指定页面中。
【说明】在“链接外部样式表”对话框中,“添加为”有两个选项“链接”和“导入”。无论选择哪个选项,选择的外部样式表文件都会出现在当前文档的 CSS 样式面板中。但在导出时两者就有了区别,导入的样式文件在导出时是作为当前文档样式文件的一部分,连同内部样式一起被导出;而链接的外部样式表文件则不会被当作当前文档的样式文件导出。
4 .导出内部样式 例 5 :将当前网页中的样式导出为外部样式表
文件,并命名为 link_style.css 。步骤如下:①打开“ CSS 样式面板”,单击鼠标右键,选
择“导出”菜单,或者选择菜单“文件 | 导出 | CSS 样式”命令,弹出“导出样式为CSS 文件”对话框。②在对话框中选择样式表文件的保存路径,本
例为站点根目录下的 CSS 文件夹,然后输入样式表的文件名 link_style.css ,单击“保存”按钮。
5.3 5.3 设置设置 CSSCSS 样式的属性样式的属性1 .类型面板 主要用于定义网页中文本的字体、颜色及字体的风格等 .例 6: 为指定页面设置文字样式。要求是新宋体, 12 像素细体字,
行间距有 30 像素,颜色 #6699FF 。操作如下:① 打开指定的页面。② 打开 CSS 样式面板,单击“新建 CSS 规则”按钮,打开“新
建 CSS 规则”对话框,在“名称”文本框中输入“ .wz” ,然后单击“确定”按钮。
③ 打开定义样式对话框,在对话框左侧的“分类”列表中选择“类型”后,在右侧的类型属性面板中设置“字体”为“新宋体”,“大小”设置为“ 12 像素”,“粗细”设置为“细体”,“行高”设置为“ 30 像素”,“颜色”设置为“ #6699FF” 。
④ 单击“确定”按钮,选取页面中的文字,在属性面板中选择“样式”下拉列表中的“ wz” 选项。保存文件,按 F12键预览 。
2 .背景面板 主要用于在文本、表格、页面等的后面设置背景属性及背景图像的位置。
例 7 :为上例中的页面添加背景颜色和背景图片。操作如下:① 打开需设置背景的页面文档。② 打开 CSS 样式面板,单击“新建 CSS 规则”按钮,打开“新建 CSS
规则”对话框,在“名称”文本框中输入“ .back” ,然后单击“确定”按钮。
③ 打开定义样式对话框,在对话框左侧的“分类”列表中选择“背景”后,在右侧的“背景”选项面板中单击“背景图像”文本框后的“浏览”按钮。
④ 在弹出的“选择图像源文件”对话框中,选择要设置为背景的图像。⑤ 单击“确定”按钮回到“背景”选项面板,将除了背景图像之外的其
他部分的背景颜色设置为 #F9FDFF 。⑥ 为了不让背景图像平铺显示,把“重复”设置为“不重复”,然后为
了让背景图像显示在右底部,将“水平位置”设置为“右对齐”,“垂直位置”设置为“底部”,
⑦ 单击“确定”按钮,为了把完成后的样式表应用到网页文档中,选择操作界面下面的标记 <td.back> 后,在属性面板中选择“样式”下拉列表中的“ back” 选项。
⑧ 保存文档,按 F12键预览。
3 .区块面板 区块面板可以精确定义整段文本中文字的
间距、对齐方式和文字缩进等属性。如下图所示:
4 .方框面板 方框样式是定义特定元素的大小及其与周围元素的间距等属性。
5 .边框面板 使用“ CSS 的规则定义”窗口的“边框”面
板可以定义元素周围的边框的设置(如宽度、颜色和样式)。见下图。可以为边框的四边指定不同的颜色,不同的宽度和不同类型的边框线。
6 .列表面板 “列表”面板可以定义列表样式,可以选择图像取代项目符号。如
下图所示:
• “ 类型”:设置项目符号的外观。• “ 项目符号图像”:可以为项目符号指定自定义图像。• “ 位置”:设置列表项目的换行位置。“内”表示应用该样式的段落过长而自动换行时,直接显示在旁边的空白上,不进行缩进;“外”表示应用该样式的段落过长而自动换行时,以缩进方式显示。
7 .定位面板 定位样式主要用来定义层在页面中的排布相关
属性。如下图所示:
8 .扩展面板 “CSS 的规则定义”窗口的“扩展”面板包
括分页、光标和滤镜等选项。如图所示:
5.6 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 .答: