第9章 CSS层叠样式表的应用
第9 章
CSS层叠样式表的应用
9.1 关于CSS样式表 9.2 创建新的CSS样式 9.3 【CSS样式】面板的使用
第9章 CSS层叠样式表的应用
9.1
关于CSS样式表
一、使用CSS的优点 1. 控制页面中的每一个元素(精确定位)。 2. 对HTML语言处理样式的最好补充。 3. 把内容和格式处理相分离，减少工作量。
第9章 CSS层叠样式表的应用
9.1 关于CSS样式表二、CSS的类型 自定义CSS样式
自定义CSS样式(也称为类样式),可以将样式属性设 置为任何文本范围或文本块。 HTML标签样式，用于重新定义特定标签，如H1的格式。 创建或更改H1标签的CSS样式时，所有用H1标签设置了 格式的文本都立即更新。 CSS选择器样式重定义特定标签组合的格式(如每当H2 标题出现在表格单元格内时都应用td h2),或重定义包 含特定id属性的所有标签的格式。
HTML标签样式
CSS选择器样式
第9章 CSS层叠样式表的应用
9.1 关于CSS样式表三、 CSS样式在网页文档中的3种存在方式 1. 外部文件方式
外部CSS样式文件，是一系列存储在一个单独 的外部文件.css文件(并非HTML文件)中的 CSS样式。 CSS文件的引用是在HTML的<head></head>标 签之间编写下列语句：<head> <link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”> </head>
其中的Style.css文件应为已编好的样式表文件。
第9章 CSS层叠样式表的应用
9.1 关于CSS样式表三、 CSS样式在网页文档中的3种存在方式 2.内部文档头方式
内部(或嵌入式) CSS 样式表，是一系列包含 在HTML文档head部分的style标签内的CSS样式。 将风格直接定义在文档头 <head></head>之间 ， 如：<head> <style type=”text/css”> <!— 样式表的具体内容 --> </style> </head>
第9章 CSS层叠样式表的应用
9.1 关于CSS样式表
三、 CSS样式在网页文档中的3种存在 方式 3.直接插入式
直接插入式很简单，只需在每个HTML标 签后书写CSS属性即可。 例如：规定一个 Table 标志中的字为红 色，字体大小为10pt,则可书写如下： <Table style=”color:red;font-size:10pt”>
第9章 CSS层叠样式表的应用
9.2 Dreamweaver中创建新的CSS样式1.
在“页面属性”中设置
切换到“代码”视图，可以看到对“页面属性”进 行的设置，变成了一段CSS样式代码，嵌在文档头 <head></head>之间
第9章 CSS层叠样式表的应用
9.2 Dreamweaver中创建新的CSS样式2.
文本编辑 Dreamweaver MX 2004在属性检查器中 增加了“样式”选项，这一选项的功能 是在设计页面时进行添加字体、设置颜 色、大小等样式操作时，“样式”中套 用样式； 如果套用的CSS样式不是文字，而是表格， 同样可以在属性面板中设置CSS。在属性 面板中都有一个类别(Class),在这里 就可以设计表格的CSS样式。
第9章 CSS层叠样式表的应用
9.3 【CSS样式】面板的使用1、CSS样式面板 【窗口】|【CSS样式】命令
编辑样式 附加样式 删除样式 新建样式
第9章 CSS层叠样式表的应用
9.3 【CSS样式】面板的
使用3.
…… 此处隐藏942字 ……
7.定义CSS样式定位属性“定位”样式属性使用“层”首选参数中定 义层的默认标签，将标签或所选文本块更改 为新层。
第9章 CSS层叠样式表的应用
8.定义CSS样式扩展属性“扩展”样式属性包括过滤器、分页和指针 选项，它们中的大部分不受任何浏览器的支 持，或者仅受 Internet Explorer 4.0 和更 高版本的支持。
第9章 CSS层叠样式表的应用
8.定义CSS样式扩展属性1)
Alpha滤镜：设置透明度。其参数格式是： Alph
a(Opacity=?,Finishopacity=?, Style=?, StartX=? ,StartY=?, FinishX=?, FinishY=?)