文档介绍：第6章 CSS样式在网页中的应用
CSS:Cascading Style Sheets,层叠样式表
W3C为弥补HTML在显示样式上的不足而制定的一套扩展样式标准。
CSS就字体、颜色、字号、定位等特殊效果提供了80多种属性。
所谓“层叠”,实际上就是将显示样式与显示内容,进行分类管理。例如:字体样式、颜色样式等。
参考书: 姜韡. 吴涛《网站全程设计技术》

CSS的特点:
可以将格式和结构分离;
可以以前所未有的能力控制页面布局;
可以制作体积更小、下载更快的网页;
可以将许多网页同时更新,比以前更快更容易;
浏览器的界面更友好。
本章主要内容
CSS样式简介
CSS与HTML文档的结合方法
理解和使用CSS的属性
CSS的样式单位
CSS样式的滤镜
1. 在Dreamweaver中CSS的使用方法
下面通过一个实例介绍CSS的使用方法
选中设计面板中的CSS样式
单击CSS样式表下面的“新建CSS样式”
打开“新建CSS样式”对话框
CSS样式简介
例:用CSS对文字的处理
主要操作:
标题的处理
正文的处理
CSS的更改
观看网页中的变化
2. 通过代码设计CSS
CSS样式的基本语法:
Selector {property1:value1; property2:value2;}
选择符
声明
属性
属性值
例如:h1{color:red}
当要对一个标记定义多重属性时,用分号隔开。
H1{font-family:Arial; font-style:italic; color:red;text-align:center}
分行写增加可读性
H1{
font-family:Arial;
font-style:italic;
color:red;
text-align:center
}
<html>
<head><title>css样式的应用</title>
<style>
H1{
font-family:Arial;
font-style:italic;
color:red;
text-align:center
}
</style></head>
<body>
<h1>这行文字使用了CSS样式</h1>
</body>
</html>
CSS样式的应用:
3. CSS样式的组合和继承
(1)样式的组合
h1,h2,h3,h4 { color:blue }
把具有相同声明定义的选择符组合在一起
具有相同声明也可以组合在一起
H1{
font-family:Arial;
font-style:italic;
font-size:26pt;
font-wariant:normal;
}
(2)样式的继承(下面用一个例子来说明)
<HTML>
<HEAD><TITLE>样式的继承</TITLE>
<STYLE type=text/css> <!—定义文本样式-->
.b1 {
COLOR: #ff0000; FONT-STYLE: italic; FONT-FAMILY: "Arial"
}
.b2 {
FONT-SIZE: large; TEXT-DECORATION: underline
} <!—DECORATION装饰线类型-- >
</STYLE></HEAD>
<BODY bgColor=#ffffff>
<H1 class=b1>The CSS<SPAN class=b2>is very</SPAN> important.</H1> 
<SPAN class=b2> <marquee direction=“left”>欢迎光临</marquee></SPAN> 
</BODY> 
</HTML>
观看下面注释