第六章使用CSS样式.ppt

第六章使用CSS样式 退出 6 1CSS样式的基本使用方法6 2设置CSS样式属性6 3CSS滤镜 CSS CascadingStyleSheet 样式是一系列格式设置规则 是用于 增强 控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 使用CSS样式可以非常灵活并更好地控制具体的页面外观 从精确的布局定位到特定的字体和样式等 网页上的元素精确地定位网页上的内容结构和格式控制相分离 CSS样式的最主要的作用 CSS格式设置规则由两部分组成 选择器和声明 H1 font size 16px font family Helvetica font weight bold 选择器是标识已设置格式元素 如P H1 类名称或ID 声明由两部分组成 属性和值 链接外部样式表文件定义内部CSS样式导入外部样式表文件定义内联CSS样式 为网页添加CSS样式表的方法有四种 样式规则可以直接定义在网页文件中也可以定义在一个 CSS文件中 方法一 链接外部样式表文件 H1 font size 16px font family Helvetica font weight bold 链接外部样式表 style css test htm 优点 页面内容与版面设计分开 样式表文件可以重用 Style css改变 test htm也改变 方法二 定义内部CSS样式 test htm 适用 指定单个网页的总体外观 方法三 导入外部样式表文件 test htm 方法四 定义内联CSS样式 内联CSS样式的应用 内联CSS样式是在某个HTML标记内使用style属性定义适用于该标签的个别样式 可以在一个网页中同时使用外部样式表 内部CSS样式和内联CSS样式 如果相互之间存在属性设置冲突 则优先权排列为 内联CSS样式 内部CSS样式 外部样式表 24px大小16px大小 就近原则 可以使用 CSS样式 面板查看 创建 编辑和删除CSS样式 并且可以将外部样式表附加到当前文档 CSS样式 面板 CSS样式 面板 类别 视图显示按类别分组的属性 列表 视图显示按字母顺序排列的列表 只显示设置属性 附加样式表新建CSS规则编辑样式删除CSS规则 当前所选页面元素 的CSS规则已定义的所有CSS规则 创建CSS样式 创建的CSS规则可以保存在CSS文件中 也可以直接插入在当前网页中 为选择器取名 类型一 类样式 自定义样式 类型一 类样式 自定义样式 可应用于任何文本范围或文本块的样式 HTML标签通过自身的class属性来指定应用该样式 应用了类样式的文本 例子 类型二 标签样式 应用于指定HTML标签的样式 类型二 标签样式 应用了标签样式的文本 例子 类型三 高级样式 高级样式可细分为三种类型 标签组合样式多标签共享样式嵌套标签样式利用标签的id属性引用的样式伪类选择器 高级样式 标签组合样式 多标签共享样式 文本链接标题 例子 高级样式 标签组合样式 嵌套标签样式 链接文本一链接文本二 例子 应用了高级样式的文本 高级样式 利用标签id属性引用的样式 样式名称以 开头 HTML标签通过自身的id属性来应用样式 高级样式 伪类选择器 用来指定超链接处于不同状态时应用的样式 a link文本被指定为超链接时的选择器a visited超链接被鼠标单击后的选择器a hover鼠标经过超链接时的选择器a active在超链接上按下鼠标时的选择器 例如 武汉大学 例子 6 2设置CSS样式属性 设置CSS样式属性 类型 设置基本字体和类型 设置CSS样式属性 背景 设置网页元素的背景 如何重复背景图像 设置CSS样式属性 区块 定义间距和对齐设置 设置CSS样式属性 方框 网页元素在页面上的放置方式 比如标签P 可以看成一个矩形区域 通过在这设置p的填充和边界等属性 设置CSS样式属性 边框 网页元素周围的边框的设置 设置CSS样式属性 列表 设置CSS样式属性 定位 定义层的属性 设置CSS样式属性 定位 CSS样式规则的应用 选中需应用样式的文本或标记在CSS面板中选中相应的样式规则 单击鼠标右键 选择 套用 应用CSS样例 6 3CSS滤镜 滤镜 filter 属性是CSS的一个扩展部分 它能够渲染对象元素 创建出艺术效果 Dreamweaver的CSS样式提供了丰富的滤镜效果 使用这些滤镜能够创建出文本和图像的3D 阴影和淡入淡出等效果 例子 CSS滤镜属性只能用在HTML控件元素上 所谓的HTML控件元素就是它们在页面上定义了一个矩形空间 浏览器窗口可以显示这些空间 HTML控件元素包括 和 CSS滤镜的分类 Dreamweaver中共含有16种CSS滤镜 可分为无参滤镜和有参滤镜两类 无参滤镜Gray 使对象产生灰度图效果Invert 使对象产生 底片 效果Xray 使对象产生 X光片 效果FlipH 使对象产生水平翻转效果FlipV 使对象产生垂直翻转效果Light 使对象产生一种模拟光源的投射效果 无参滤镜实例 有参滤镜 Alpha 设置对象的透明度Blur 使对象产生模糊效果Wave 使对象在垂直方向上产生波纹效果 原图 Alpha Blur Wave 有参滤镜 Shadow 在指定的方向上建立对象的投影Dropshadow 设置对象的阴影效果 Shadow Dropshadow 有参滤镜 Chroma 将对象中指定的颜色设置为透明色Glow 在对象的边缘产生类似发光的效果Mask 为对象建立一个覆盖于表面的膜 其效果就好像是戴有色眼镜看物体一样 Chroma Glow Mask 有参滤镜 BlendTrans 设置对象的淡入淡出效果Filter revealtrans dura