网页设计之CSS样式表和模板

大纲 区块、 区块、方框等设置 1.区块设置：主要对文字的整体效果和段落缩进等进行 1.区块设置 区块设置： 设置 单词、 单词、字母间距 垂直对齐： 垂直对齐：对象的对齐方式 文本对齐 文字缩进：中文首行文字的缩进（字号为9pt， 文字缩进：中文首行文字的缩进（字号为9pt，缩进 2个字，设置为18pt，12号字，设置为24pt) 个字，设置为18pt，12号字 设置为24pt) 号字，
8.1.8 设置 设置CSS的属性 的属性
大纲
1.类型设置 1.类型设置 对于文字的格式设置：字体、大小、行高、 对于文字的格式设置：字体、大小、行高、样式和修饰 2.背景设置 2.背景设置 网页背景的各种设置: 网页背景的各种设置: 重复:不重复、重复、横向重复、 重复:不重复、重复、横向重复、纵向重复 附件： 附件：图像能否跟随网页一起滚动 3.区块设置 3.区块设置 4.方框设置 4.方框设置 5.边框设置 5.边框设置 6.列表设置 6.列表设置 7.定位设置 7.定位设置 8.扩展功能 8.扩展功能
扩展功能
1.分页:目前尚无浏览器支持该功能 1.分页 分页: 2.光标:改变鼠标放在该项上时的形状 2.光标 光标: Hand： Hand：手 Crosshair： Crosshair：交叉十字 Text： Text：文本选择符号 Wait： Wait：漏斗 Default： Default：默认 Help： Help：默认问号 E-resize：向东的箭头 resize： Ne-resize：向东北的箭头 Ne-resize： N-resize：向北的箭头 resize： Nw-resize：向西北的箭头 Nw-resize： S-resize：向西南的箭头 resize： Auto： Auto：正常鼠标 3.过滤器:实现滤镜效果 3.过滤器 过滤器: 滤镜效果
大纲
8.1.6 链接和导入样式表
大纲
链接或导入外部样式表文件即是将已创建的外部样 式表文件导入到当前文档中,用样式表文件, 式表文件导入到当前文档中,用样式表文件,格式化网 页中的指定元素 步骤 打开”链接外部样式表”对话框:单击“CSS样式 打开”链接外部样式表”对话框:单击“CSS样式 面板”右一方的“附加样式表” 面板”右一方的“附加样式表”按钮 文件/URL” 在“文件/URL”文本框中输入文件的地址和文件 或单击“浏览” 名,或单击“浏览”,在磁盘中选择样式表文件 添加为”处选择“CSS样式表文件 样式表文件” 在“添加为”处选择“CSS样式表文件”添加到 此文档中的方式 导入 链接 确定
边框、列表、 边框、列表、定位设置
大纲
1.边框设置 1.边框设置 主要给对象添加边框，设置边框的颜色、粗细、 主要给对象添加边框，设置边框的颜色、粗细、样式等 样式：边框为虚线、点划线、实线、双线、槽状、脊状、凹陷、 样式：边框为虚线、点划线、实线、双线、槽状、脊状、凹陷、 突出等形状 宽度、颜色： 宽度、颜色：等同前 2.列表设置：对文本前面的项目符号的样式进行设置 2.列表设置 列表设置： 类型：符号的类型为圆点、圆圈、 类型：符号的类型为圆点、圆圈、方块等 项目符号图像： 项目符号图像：在图像文件中设置项目符号样式 位置： 位置：贴近左侧或向右缩进 3.定位 3.定位 对层进行设置(实际操作很少被用到) 对层进行设置(实际操作很少被用到) 类型：定位方式为绝对、相对、 类型：定位方式为绝对、相对、静态等 显示：同层的属性 显示： 置入： 置入：浏览器中的位置 剪切: 剪切: 定义层的可见部分
8.1.7 导出样式表
大纲
导出样式表即从一个网页文档中导出样式创建一个新 CSS样式表文件 样式表文件。 的CSS样式表文件。 步骤： 步骤： 打开“导出样式为CSS文件对话框 执行“ 文件对话框： 打开“导出样式为CSS文件对话框：执行“文 导出” CSS样式 命令（ 样式” 文本” 件”|“导出”|“CSS样式”命令（或“文本”|“CSS 样式” 导出”命令） 样式”|“导出”命令） 在对话框中输入样式文件的名称 单击“保存” 单击“保存”按钮
8.1.2 CSS样式面板 样式面板
大纲
1.打开CSS样式面板的方法 1.打开 打开CSS样式面板的方法 方法1 选择命令“窗口” CSS样式 样式” 方法1：选择命令“窗口”|“CSS样式” 方法2 单击面板组中的“CSS样式面板左边的三角形 样式面板左边的三角形， 方法2：单击面板组中的“CSS样式面板左边的三角形， 选择“CSS样式 样式” 选择“CSS样式”标签 方法3 快捷键shift+F11 方法3：快捷键shift+F11 2.CSS样式面板 2.CSS样式面板
Βιβλιοθήκη Baidu大纲
8.1.4 CSS样式的应用 样式的应用
大纲
1.样式的应用 1.样式的应用 标签和高级类型的样式: 标签和高级类型的样式:自动应用到相应的网页元素 比如建立了<Td>标签的样式后 标签的样式后, 上,比如建立了<Td>标签的样式后,网页上所有单元 格的文字都自动变为新的格式 ——自定义样式的应用 自定义样式的应用: 类——自定义样式的应用: 选择要应用样式的元素 在属性面板的” 在属性面板的”类”下拉表中选择自定义的类 2.已经创建的样式文件中样式的应用 2.已经创建的样式文件中样式的应用 见8.1.6 链接和导入样式表
个性化超级链接规则的创建
1.打开“新建CSS规则”对话框 1.打开 新建CSS规则 打开“ 规则” 2.选择器类型：高级 2.选择器类型 选择器类型： 在列表中选择链接的各状态， 在列表中选择链接的各状态，确定 a:link——未被访问过的链接 a:link——未被访问过的链接 a:visited——访问过的链接 a:visited——访问过的链接 a:hover——鼠标移上时的链接 a:hover——鼠标移上时的链接 a:active——被点击的链接 a:active——被点击的链接 3.在对话框的“类型”选项中设置各链接的特色 3.在对话框的 类型” 在对话框的“ 4.单击“确定”按钮 4.单击 确定” 单击“
第8章 CSS样式表和模板 章 样式表和模板
通过本章学习应能够熟练应用CSS和模 通过本章学习应能够熟练应用CSS和模 板来设计网页页面元素的统一格式
本章大纲 8.1 CSS样式 CSS样式 8.2 模板
大纲
8.1 CSS样式表和模板 样式表和模板
8.1.1 CSS样式的概念 CSS样式的概念 8.1.2 CSS样式面板 CSS样式面板 8.1.3 创建CSS样式 创建CSS样式 8.1.4 CSS样式的应用 CSS样式的应用 8.1.5 CSS样式的编辑 CSS样式的编辑 8.1.6 链接和导入样式表 8.1.7 导出样式表 8.1.8 设置CSS的属性 设置CSS的属性
8.1.5 CSS样式编辑 样式编辑
编辑 选择元素后执行下列操作之一: 选择元素后执行下列操作之一: 打开样式定义对话框 双击选定的CSS样式名称 双击选定的CSS样式名称 单击样式面板中的“编辑样式” 单击样式面板中的“编辑样式”按钮 右击要编辑的CSS样式 样式， 右击要编辑的CSS样式，在快捷菜单中选择 编辑” “编辑”命令 在对话框中进行设置(同创建) 在对话框中进行设置(同创建) 单击“确定” 单击“确定” 删除: 删除: 选择CSS样式 选择CSS样式 单击“删除CSS样式 样式” 单击“删除CSS样式”按钮
CSS样式面板 样式面板
大纲
删除CSS规划 规划 删除 编辑样式 新建CSS规则 规则 新建 附加样式表
‘类别’视图‘列表’视图 ‘设置属性’视图 类别’视图 列表 列表’ 设置属性’ 类别 设置属性
8.1.3 创建 创建CSS样式 样式
大纲
打开“新建Css样式 打开“新建Css样式”对话框 样式” “文本”菜单下的“CSS样式”中的”新建CSS样 文本”菜单下的“CSS样式 中的”新建CSS样 样式” 式”命令 仅对当前文档： 仅对当前文档：只在当前 单击CSS样式面板中的新建按钮 单击CSS样式面板中的新建按钮 文档中使用 选择“选择器类型” 选择“选择器类型” 新建CSS样式表文件 样式表文件： 新建CSS样式表文件：以 用户自定义样式名称,可以在HTML中被调用 类:用户自定义样式名称,可以在HTML中被调用 文件的形式保存， 文件的形式保存，不仅当 前文档使用， 前文档使用 标签:重新定义HTML各标签 标记)，也可以被其 各标签( 标签:重新定义HTML各标签(标记)的默认格式 他网页使用 高级:主要用于设置超级链接的特色(颜色) 超级链接的特色 高级:主要用于设置超级链接的特色(颜色) 输入或选择样式名称: 输入或选择样式名称: 样式文件名> 选择器类型为“ 样式名称 .<样式文件名>（选择器类型为“类”时） 选择样式名称：当类型为标签、 选择样式名称：当类型为标签、高级时选择 选择样式定义的存放位置或作用范围: 选择样式定义的存放位置或作用范围:仅对该文档 单击”确定” 打开CSS样式定义对话框 单击”确定”,打开CSS样式定义对话框 对话框的设置:详见设置 设置CSS样式属性 对话框的设置:详见设置CSS样式属性
大纲
8.1.1 CSS样式 样式
一、CSS样式 CSS样式 1.定义 1.定义 2.CSS样式的类型 2.CSS样式的类型 自定义样式 HTML标签样式 HTML标签样式 CSS选择器样式 高级样式） CSS选择器样式（高级样式） 选择器样式（
大纲
CSS定义 定义
大纲
CSS即 CSS即(Cascading Style Sheet),层叠样式表或级联样 Sheet),层叠样式表或级联样 式表， 式表，样式就是用来控制一个文档中某一文本区域 外观的一组格式属性。 外观的一组格式属性。 层叠样式表则可以用来一次对若干个文档所有的样 式进行控制 CSS样式使网页中多处对象都采用同样属性 CSS样式使网页中多处对象都采用同样属性，一次设 样式使网页中多处对象都采用同样属性， 置，多次应用 CSS样式表位于文档中head标签之内 CSS样式表位于文档中•可以同时将一个样式 样式表位于文档中head标签之内 可以同时将一个样式 CSS样式可以对 CSS样式可以对HTML标签的默认格式进行重定义， 样式可以对HTML标签的默认格式进行重定义 标签的默认格式进行重定义， 链接到多个文档 可以对文本区域进行重定义， 可以对文本区域进行重定义，对标准文本进行重定 •当CSS样式被修改后， 样式被修改后， 当 样式被修改后 义 所有应用该样式的对象 优点： 优点： 会被自动更新
2.方框设置：主要对图像的大小、水平和垂直方向上 2.方框设置：主要对图像的大小、 方框设置 的空白， 的空白，文字环绕等进行设置 浮动： 浮动：环绕效果对象与文边的相对位置 清除： 清除：对象的边上是否允许出现层 填充：对象边框和其中内容间的空白, 填充：对象边框和其中内容间的空白,浏览时的效果 边界： 边界：对象边框四周的空白区域
大纲
滤镜效果
大纲
1.蒙版 1.蒙版 滤镜代码:Alpha 滤镜代码:Alpha (Opacity=100,FinishOpacity=0,Style=2) Opacity:不透明的程度 用百分比表示，0~100， Opacity:不透明的程度，用百分比表示，0~100，0完 不透明的程度， 全透明，100完全不透明 全透明，100完全不透明 FinishOpacity：透明渐进的效果，需同时与Opacity FinishOpacity：透明渐进的效果，需同时与Opacity 一起设置，0~100(同上 同上) 一起设置，0~100(同上) Style：指定渐进的形状。 ——没有渐进 ——直 Style：指定渐进的形状。0——没有渐进，1——直 没有渐进， 线渐进， ——圆形渐进 ——矩形辐射 圆形渐进， 线渐进，2——圆形渐进，3——矩形辐射 特别提示： 特别提示：滤镜效果只有在浏览器中才能看到效果 上边的各参数表达式要用逗号分隔开 2.图片波纹 2.图片波纹