（1） Type（类型）
样式：默认设置为“正常” 变体：设置文本的小型大写字母变量。 行高：设置文本所在行的高度。选中“正常” 会自动计算字体大小的行高。 大小写：将所选内容中的每个单词的首字母大 写或将文本设置为全部大写或小写。 修饰：常规文本的默认设置是“无”，链接的 默认设置是“下划线”。
（2） Background（背景）
（1） Type（类型）
• Type （类型）面板主要是对文字的字体，大小，颜 色，效果等基本样式进行设置。设置时，我们只对 要改变的属性进行设置，没有必要改变的属性就空 着。 • 各属性的含义为： 字体：为样式设置字体。 大小：定义文本大小。 粗细：对字体应用特定或相对的粗体量。“正常”等 于400，“粗体”等于700。
• • •
CSS样式分类和样式的创建
• 标签 我们可以针对某一个标签来定义层叠 样式表，也就是说定义的层叠样式表只应 用于选择的标签。例如我们为<body>和 </Body>标签定义了层叠样式表，那么所 有包含在 <Body>和</body>标签的内容 将遵循定义的层叠样式表。 如下代码： td{color:#000099;font-size:9pt}
第8章 层叠式样式表
教学内容: 1、什么是CSS及为什么使用CSS？ 2、CSS的基本语法 3、CSS样式的创建、编辑、应用、删除 4、设置CSS样式属性 5、CSS的优先级顺序
1、什么是CSS及为什么使用CSS？
• CSS全称为Cascading Style Sheets，一般 称之为层叠式样式表，是用来控制网页对 象外观的一系列样式属性。 如字体、颜色、 填充、边距和字间距等。 • CSS是由WORLD WIDE WEB CONSORTIUM（全球广域网协会，简称 W3C）制定，到目前为止，CSS已经经历 了两代，即CSS1(IE3.0)和CSS2(IE5.0)。
3、CSS样式的创建、编辑、应用、 删除
链接外部css样式表 新建css－标签table,定义在新建样式列表 文件－保存.css－ 修改个别属性 应用：“css样式”面板－“附加样式表”－ “链接”－…－“套用” 优点：凡是用此样式表的网页都随着更改。 补充：上面的“链接”，是只修改链接文本 的css样式，其他文本不变。
2、CSS的基本语法(2)
• Selector表示需要应用样式的内容；Property表示 由CSS标准定义的样式属性，value表示样式属性 的值。 • 其中： Selector的类型可以为： （1）HTML标记符；如<P><BODY><TABLE>等。 （2）用户定义的类class；如：.RED.GREEN等 （3）用户定义的ID；如#myid（使用#作为id的标 识） （4）虚类：对于超级链接<a></a>则使用虚类
为什么使用CSS
（1）对于网页页面较大的网页，我们可以 快速地进行批处理文件。 （2）CSS的一组样式可以被不同的对象调 用 （3）CSS的语法简单易懂 （4）CSS具有丰富的样式效果（如鼠标样 式、各种滤镜的效果）
CSS样式分类和样式的创建
• • • 层叠样式表CSS包含以下3种类型： ● 类 用户可以在文档的任何区域或文本中应用自 定义的层叠样式表，如果将自定义的层叠样式 表应用于一整段文字，那么会在相应的标签中 出现Class属性，该属性值即为自定义层叠样式 表名称。如果将自定义的层叠样式表应用于部 分文字上，那么会出现<Span>和<Span>标签， 并且包含有Class属性。 如下代码： .bg{background-image：url(bg.gif);} <body class="bg">
4、设置CSS样式属性
• 在Dreamweaver4的CSS样式里包含了 W3C规范定义的所有CSS1的属性， Dreamweaver4把这些属性分为Type（类 型）、Background（背景）、Block（区 块）、Box（盒子或方框）、Border（边 框）、 List（列表）、Positioning（定位）、 Extensions（扩展）八个部分
• Background面板主要是对元素的背景进行设置， 包括背景颜色、背景图象、背景图象的控制。一 般是对BODY（页面）、TABLE（表格）、DIV （区域）的设置。 • 各属性的含义为： 背景颜色：设置元素的背景颜色。 背景图像：设置元素的背景图像。
CSS样式分类和样式的创建
• 高级 为特殊的组合标签定义层叠样式表，使用ID 作为属性，以保证文档具有惟一可用的值。层 叠样式表选择符是一种特殊类型的样式。常用 的有4种，分别为： a:link、a:active、a:visited、a:hover ● a:link：设定正常状态下链接文字的样式 ● a:active：设定鼠标单击时链接的外观 ● a:visited：设定访问过的链接外观 ● a:hover：设定鼠标放置在链接文字之上时， 文字的外观
• • • • •
CSS样式分类和样式的创建
无论是哪种类型的样式，创建基本上 要经过以下的步骤： 定义样式类型 设定样式外观 应用样式
• • •
2、CSS的基本语法(1)
• CSS的基本组成为：
selector{Property1：value1;property2:value2}
选择符
属性
属性值
3、CSS样式的创建、编辑、应用、 删除
内部css样式表的应用：去掉超链接下划线 新建css---选择器类型为“高级”，选择 器名称为“a”,仅对该文档－－在“a的css 样式定义”改“修饰”为“无” 改变超链接的颜色： 新建css---选择器类型为“高级”，选择 器名称为“a:hover”,仅对该文档－类型中 修改“颜色”
3、CSS样式的创建、编辑、应用、 删除
应用CSS样式进行如下三步： • 定义样式类型 • 设定样式外观 • 应用样式 （1）创建CSS样式 （2）编辑CSS样式 （3）应用CSS样式 （4）删除CSS样式
3、CSS样式的创建、编辑、应用、 删除
创建类 “窗口”－“CSS样式”－右下角“新建 CSS样式”－选择“类”－设置“CSS样 式定义” 注意：如果创建的是类，则名称一定要以 “.”开头，例如.mystyle 应用css样式 例如：选择文本－右键－css样式－ mystyle
