第五章 CSS样式.ppt

第五章CSS样式的应用 计算机与信息学院胡欣欣 5 1样式概述 层叠样式表简称为CSS CascadingStyleSheet 是一系列格式设置规则 它控制网页元素的外观 可以定义文字 表格 图像 表单等网页元素的属性 CSS样式可以使用自定义样式以减少设计者的工作量 在HTML中 样式表信息包括在标记中 为了使样式表对整个页面中产生作用 放置在标记中 5 2创建CSS样式 1 创建新的CSS样式方法一 窗口 CSS样式或Shift F11 弹出CSS面板 单击面板右下角区域中的 新建CSS样式 按钮 方法二 选择文本菜单 CSS样式 新建CSS样式 5 2创建CSS样式 2 定义CSS样式的类型样式的类型主要有自定义CSS样式 HTML标签样式和高级三种 自定义CSS样式 又称为类样式 类名称必须以点号开头 并且可以包含任何字母和数字组合 例如 myccs1 如果没有输入开头的点号 Dreamweaver将自动输入 unnamed1 unnamed2 等作为新建CSS样式名称 5 2创建CSS样式 HTML标签样式 重定义特定标签的格式 所有用该标签设置了格式的文本都立即更新 高级 为具体某个标签组合或所有包含特定ID属性的标签定义格式 所提供的选择器 称作伪类选择器 包括a active a hover a link和a visited a active 正在被访问的超级链接a hover 当鼠标移至超级链接上 超级链接的样式a link 还没有被访问过的超级链接a visited 已经被访问过的超级链接一般默认建立链接的文本为蓝色带下划线 访问过后为紫色带下划线 5 2创建CSS样式 3 保存方式保存在网页内部 内部CSS样式表 一系列包含在文档HTML代码的部分的标签内的CSS样式 单击 仅对该文档 按钮 保存在网页外部 外部CSS样式表 一系列存储在独立的扩展名为 css的外部文件 在下拉框中选择 新建样式表文件 5 2创建CSS样式 4 样式的编辑方法一 双击所要编辑的样式 在CSS规则定义对话框中修改方法二 选中所要编辑样式 在CSS样式面板中修改5 删除样式方法一 选中所要删除的样式或某项属性 单击右键 删除 方法二 在文本属性面板中 从 样式 弹出式菜单中选择 无 5 2创建CSS样式 6 样式的应用方法一 选中所需设置样式的页面元素 选择相应样式 在CSS活动面板单击右键 进行套用方法二 选中所需设置样式的页面元素 在属性面板中 选择类右侧的下拉菜单 进行套用 5 3设置CSS属性 设置样式选项 5 3设置CSS属性 类型 类别可以定义CSS样式的基本字体和类型设置 行高 设置文本所在行的高度 选择 正常 自动计算字体大小的行高 或输入一个确切的值并选择一种度量单位 比较直观的写法用百分比 例如200 是指行高等于文字大小的2倍 修饰 向文本中添加下划线 上划线或删除线 或使文本闪烁 正常文本的默认设置是 无 粗细 对字体应用特定或相对的粗体量 正常 等于400 粗体 等于700 变量 设置文本的小型大写字母变量 Dreamweaver不在 文档 窗口中显示该属性 InternetExplorer支持变量属性 但Navigator不支持 大小写 将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写 5 3设置CSS属性 5 3设置CSS属性 背景 类别可以定义CSS样式的背景设置 可以对网页中的任何元素应用背景属性 例如 创建一个样式 将背景颜色或背景图像添加到任何页面元素中 比如在文本 表格 页面等的后面 还可以设置背景图像的位置 背景颜色 和 背景图像 用于设置对象的背景颜色和图像 若同时为一个对象设置了背景颜色和图像 则Dreamweaver会优先显示背景图像 5 3设置CSS属性 重复 确定当背景图像的尺寸小于对象尺寸时 是否以及如何重复背景图像 有以下若干选项 不重复 在元素开始处显示一次图像 重复 在元素的后面水平和垂直平铺图像 横向重复 和 纵向重复 分别显示图像的水平带区和垂直带区 图像被剪辑以适合元素的边界 附件 确定背景图像是固定在它的原始位置还是随内容一起滚动 注意 某些浏览器可能将 固定 选项视为 滚动 水平位置 和 垂直位置 指定背景图像相对于元素的初始位置 这可以用于将背景图像与页面中心垂直和水平对齐 如果附件属性为 固定 则位置相对于 文档 窗口而不是元素 5 3设置CSS属性 5 3设置CSS属性 区块 类别可以定义标签和属性的间距和对齐设置 单词间距 设置单词之间的距离 若要设置特定的值 可在弹出式菜单中选择 值 然后输入一个数值 在第二个弹出式菜单中 选择度量单位 例如像素 点等 字母间距 增加或减小字母或字符的间距 若要减少字符间距 可指定一个负值 例如 4 字母间距设置覆盖对齐的文本设置 垂直对齐 指定应用它的元素的垂直对齐方式 仅当应用于标签时 Dreamweaver才在 文档 窗口中显示该属性 5 3设置CSS属性 文本对齐 设置元素中的文本对齐方式 文本缩进 指定第一行文本缩进的程度 可以使用负值创建凸出 但显示效果取决于浏览器 仅当标签应用于块级元素时 Dreamweaver才在 文档 窗口中显示该属性 空格 确定如何处理元素中的空白 从下面三个选项中选择 正常 收缩空白 保留 其处理方式与文本被括在pre标签中一样 即保留所有空白 包括空格 制表符和回车 不换行 指定仅当遇到标签时文本才换行 Dreamweaver不在 文档 窗口中显示该属性 显示 指定是否以及如何显示元素 选项 无 表示关闭它所指定的元素的显示 5 3设置CSS属性 5 3设置CSS属性 方框类别可以为控制元素在页面上的放置方式的标签和属性定义设置 宽 和 高 设置元素的宽度和高度 宽和高定义的对象多为图片 表格 层等 浮动 设置元素浮动方式 如文本 层 表格等 其它元素按通常的方式环绕在浮动元素的周围 清除 不允许元素的浮动 左对齐 表示不允许左边有浮动对象 右对齐 表示不允许右边有浮动对象 两者 表示允许两边都可以有浮动对象 无 不允许有浮动对象 两种浏览器都支持 清除 属性 5 3设置CSS属性 填充 指定元素内容与元素边框 如果没有边框 则为边距 之间的间距 取消选择 全部相同 选项可设置元素各个边的填充 全部相同 将相同的填充属性设置为它应用于的元素的 上 右 下 和 左 侧 边界 指定一个元素的边框 如果没有边框 则为填充 与另一个元素之间的间距 仅当应用于块级元素 段落 标题 列表等 时 Dreamweaver才在 文档 窗口中显示该属性 取消选择 全部相同 可设置元素各个边的边距 全部相同 将相同的边距属性设置为它应用于的元素的 上 右 下 和 左 侧 5 3设置CSS属性 5 3设置CSS属性 边框 类别可以定义元素周围的边框的设置例如宽度 颜色和样式 样式 设置边框的样式外观 样式的显示方式取决于浏览器 Dreamweaver在 文档 窗口中将所有样式呈现为实线 两种浏览器都支持样式属性 取消选择 全部相同 可设置元素各个边的边框样式 宽度 设置元素边框的粗细 两种浏览器都支持 宽度 属性 取消选择 全部相同 可设置元素各个边的边框宽度 颜色 设置边框的颜色 可以分别设置每个边的颜色 但显示取决于浏览器 取消选择 全部相同 可设置元素各个边的边框颜色 5 3设置CSS属性 5 3设置CSS属性 列表 类别为列表标签定义列表设置 如项目符号大小和类型 类型 设置项目符号或编号的外观 两种浏览器都支持 类型 项目符号图像 可以为项目符号指定自定义图像 单击 浏览 选择图像或键入图像的路径 位置 设置列表项文本是否换行和缩进以及文本是否换行到左边距 5 3设置CSS属性 5 3设置CSS属性 定位 样式属性使用 层 首选参数定义层的默认标签 将标签或所选文本块更改为新层 类型 确定浏览器应如何来定位层 有 绝对 相对 和 静态 三个选项 绝对 使用 定位 框中输入的坐标 相对于页面左上角 来放置层 相对 使用 定位 框中输入的坐标 相对于对象在文档的文本中的位置 来放置层 该选项不显示在 文档 窗口中 静态 将层放在它在文本中的位置 显示 确定层的初始显示条件 如果不指定可见性属性 则默认情况下大多数浏览器都继承父层的值 其选项包括 继承 指定继承父层的可见性属性 如果层没有父层 则它将是可见的 可见 显示该层的内容 而不管父层的值是什么 隐藏 隐藏这些层的内容 而不管父层的值是什么 5 3设置CSS属性 Z轴 确定层的堆叠顺序 编号较高的层显示在编号较低的层的上面 值可以为正 也可以为负 注意 若要改变堆叠顺序使用 层 面板更改层的堆叠顺序更容易 溢出 确定在层的内容超出它的大小时的处理方法 此仅限于CSS层 其选项包括 可见 增加层的大小 使它的所有内容均可见 层向右下方扩展 隐藏 保持层的大小并剪辑任何超出的内容 不提供任何滚动条 滚动 在层中添加滚动条 不论内容是否超出层的大小 该选项仅适用于支持滚动条的浏览器 I 5 3设置CSS属性 自动 使滚动条仅在层的内容超出它的边界时才出现 定位 指定层的位置和大小 例如当鼠标停留在超级链接时 层上移8像素的效果 效果浏览器如何解释位置取决于 类型 设置 位置和大小的默认单位是像素 对于CSS层 还可以指定下列单位 pc 十二点活字 pt 点 in 英寸 mm 毫米 cm 厘米 ems exs 或 父层值的百分比 缩写必须紧跟在值之后 中间不留空格 例如 3mm 剪辑 定义层的可见部分 如果指定了剪辑区域 可以通过脚本语言 如JavaScript 访问它 并操作属性以创建像擦除这样的特殊效果 通过使用 改变属性 行为可以设置这些擦除效果 5 3设置CSS属性 5 3设置CSS属性 扩展 样式属性包括过滤器 分页和指针选项 分页 若选中该项 则在打印期间在样式所控制的对象之前或者之后时强行分页 选择要在弹出式菜单中设置的选项 光标 用来设置光标显示属性设置 当指针位于样式所控制的对象上时改变指针图像 可选择弹出式菜单进行设置 5 3设置CSS属性 过滤器 又称CSS滤镜 对样式所控制的对象应用特殊效果 它把我们带入绚丽多姿的世界 正是有了滤镜属性 页面才变得更加漂亮 Dreamweaver扩展类过滤器嵌入16项样式属性 可以根据实际需要从 过滤器 弹出式菜单中选择并加以设置 在弹出式菜单的选项中包含 号 这些问号表示要求设计者用具体的值来代替 5 4实例1 针对gaikuang html进行样式编辑1 创建类CSS样式步骤一 建立新的CSS样式 选择 类 名称为 title 设置其字体 黑体 大小 46px 颜色 黑色 步骤二 选中 厦门概括 套用 title样式 步骤三 同理对文档的文字进行设置 新建类 text 在 类型 分类中为其设定 字体 为仿宋 GB2312 大小 为16px 颜色 为黑色 在 区块 分类中为其设定 字母间距 为2px 文字缩进 为20点数 7 3实例1 2 创建标签CSS样式步骤四 新建标签样式 从 标签 的弹出式菜单中选择无序列表标签 li 仅对该文档 生效步骤五 在 Li的CSS样式定义 对话框中设置 在 类型 分类中为其设定 字体 为仿宋 GB2312 大小 为16px 颜色 为黑色 在 区块 分类中为其设定 字母间距 为2px 在 列表 分类中 项目符号图像中 选择站点文件夹xiamen下的gold flower gif 步骤六 对各个列表项应用样式 li 7 3实例1 3 创建高级样式步骤七 对文档中 经济状况 等超级链接样式进行修改 在此规定 默认的超链接 a link 为黑色 仿宋 GB2312 16px 无下划线 鼠标经过链接 a hover 为红色 仿宋 GB2312 16px 有下划线 访问过 a visited 的链接是暗红色 仿宋 GB2312 16px 无下划线 步骤八 保存 预览页面 实例2链接外部样式表 外部CSS样式表是一些列存储在一个单独的外部CSS CSS 文件中的CSS规则 实例2链接外部样式表 参考步骤 1 在CSS面板中 单击右键选择附加样式表2 选择images yangshi css 添加为设置为链接 即可链接外部样式表 实例3导出样式以创建CSS样式表 参考步骤1 打开素材文件 在样式面板中选择的CSS样式 单击右键 选择 导出 选项2 保存为样式文件 实例4定义文本间行距 参考步骤1 新建CSS规则 选择类 名称 hg 仅对该文档2 设置大小为12像素 行高为200 颜色为黑色3 选择设置行高的对象 套用 实例5应用CSS样式制作阴影文字 应用CSS中的Shadow滤镜可以制作阴影文字 实例5应用CSS样式制作阴影文字 参考步骤1 在相应位置插入1行1列表格 设置为居中对齐2 新建CSS规则 选择器类型为类 名称为 yy 仅对该文档 打开 yy的CSS规则定义对话框 3 类型 设置字体为宋体 大小24像素 颜色为 EC3B094 扩展 实例5应用CSS样式制作阴影文字 说明 shadow滤镜格式为shadow Color Direction 其中Color为投影的颜色 用十六制数表示 Direction为投影角度 取0 360度 当为0度是 投影垂直向上 本例Color 990000 Direction 1005 选择所要应用表格 套用 说明 CSS滤镜只能应用于有局域限制的对象 如表格 单元格 图片等 而不能直接用于文字 所以需要把要增加特效的文字放在表格中 在对表格应用CSS样式 实例6消除链接文字下划线 参考步骤1 新建CSS样式 选择器类型为类 名称为 xhx 仅对该文档2 打开 xhx的CSS规则定义 大小为13像素 颜色为黑色 修饰为无3 选择对象 套用 实例7利用CSS设计水平线样式 实例7利用CSS设计水平线样式 参考步骤1 新建CSS规则 选择器类型为类 名称为 xhx 仅对该文档2 打开 xhx的CSS规则定义对话框 选择边框选项 设置为虚线3 选中水平线 应用样式 实例8利用CSS滤镜制作光晕文字 实例8利用CSS滤镜制作光晕文字 参考步骤1 在相应位置插入1行1列表格 设置为居中对齐 输入 中秋节 设置居中对齐2 新建CSS样式 选择器类型设为类 名称 gy 大小为24像素 颜色 BDBDFE3 扩展 在滤镜下拉列表中选择Glow Clolr Satrength 设置Color为 FFOOOO Strength为104 选中表格 套用 实例8利用CSS滤镜制作光晕文字 说明 glow 滤镜只有两个参数 color 是指定发光的颜色 strength 是发光的强度 也可理解为光芒的长度 取值范围1 255之间的任何整数 实例9利用CSS改变鼠标形状 参考步骤1 新建CSS规则 选择器类型为类 名称为 shb 仅对该文档2 扩展 光标下拉列表中选择Crosshair3 选择应用对象 套用 实例10如何解决文字在不同电脑的显示大小 经常会出现网页中的文字在某些电脑上号正常 但在某些电脑上会变大或变小 为了解决这一问题 必须将网页中的文字利用CSS固定才行 这样不论在哪台电脑都不会变化参考步骤1 新建CSS规则 选择器类型为类 名称为 zt 仅对该文档2 类型 字体为宋体 大小12像素3 选择对象 套用 实例11设置文字间距 为了避免在网页中文字过于拥挤 课利用CSS