通过代码实例跟我学CSS样式单技术的应用实例（第2部分）——CSS样式单的应用实例.doc

目 录
通过代码实例跟我学CSS样式单技术的应用实例（第2部分） 2
Macromedia Dreamweaver 工具对CSS相关技术的支持 2
CSS中的伪类及应用实例 10
应用CSS实现Google的Logo微标的文字显示效果的示例 15
应用CSS实现Baidu搜索结果的页面风格显示的示例 18
通过代码实例跟我学CSS样式单技术的应用实例（第2部分）
——CSS样式单的应用实例
Macromedia Dreamweaver 工具对CSS相关技术的支持
1、在Macromedia Dreamweaver 工具中新建各种形式的样式项目方法
（1）在某个样式文件中添加样式项目
（2）对标准的HTML标签重新定义其样式
（3）对指定ID名称的标签定义其样式风格
（4）编辑修改某个样式
建议首先在样式文件中定义某个“选择器”的名称，然后在利用Macromedia Dreamweaver 工具中的“样式编辑”功能进行具体的属性定义——减少样式中的错误。
（5）在弹出的对话框中编辑该名称的各个样式项目的定义
2、熟悉Macromedia Dreamweaver 工具中的CSS样式中的各个项目的含义
（1）类型——针对文字方面的显示风格设置
其中的字体的CSS属性名为font-family，对文字的样式定义主要涉及文字的字体、文字大小、颜色、粗细、字形以及下划线、顶划线和删除线，也还包括英文字母的大小写的控制等。
（2）背景
CSS页面背景分为背景颜色和背景图片，页面的背景不仅决定页面的显示风格和色调，而且还可以利用页面背景实现页面的分块。其中background-color属性项目决定背景颜色，而background-image属性项目决定背景图片，并通过URL定位背景图片的文件名称和目录位置。通过background-repeat决定背景图片的重复方式（取值为repeat-x或repeat-y）、background-position决定背景图片的定位、background-attachment:fixed实现固定背景图片的效果。
（3）区块——针对某个区域中的文字的“摆放”方面的设置
注意“display: none;”属性项目的作用！（达到“隐藏”的效果）。而其中的垂直对齐可以为顶端对齐、居中对齐和底端对齐等形式。
（4）方框——针对区域本身的大小、内部边框（padding）、外部边框（Margin）和是否“漂浮”等
（5）边框——针对区域的边框线的“线型”、“粗细”和“颜色”方面的设置
主要涉及边框的样式（风格，如点划线、虚线等）border-style、边框的粗细border-width和边框线的颜色border-color等方面的属性设置项目。可以分别设置这些属性项目的值，也可以采用border属性统一设置三个项目的属性值（但要注意三者的顺序，如border：style width color）。
另外，IE浏览器目前不支持border-style:groove、border-style:inset和border-style:outset等风格的框线。
（6）列表——针对<ul>和<li>标签的显示风格的定义
（7）定位——针对某个区域在屏幕上或者在父容器（上层标签）内的定位方面的设置
z-index属性值越大，则越在上面；而且位置一定要产生覆盖关系（可以通过position:absolute;控制位置），否则不会产生出相互叠加的显示效果。另外，还要注意其中的Clipping（剪辑）决定了对象的哪个部位可以被看到。它不会改变任何对象的性质。Clipping 的区域是一个矩形，而这个矩形的尺寸取决于于四个边的位置。
这四个边用 top, right, botton, left 来表示，这四个边的位置是相对于对象的而不是相对于窗口的。Clip属性的书写格式是这样的： Clip rect（top，right，bottom，left）
其中的top、right、bottom和left的值都是以像素pixels为单位的。为了更好的理解相对于对象这个含义，我们看一个例子，比如左面是一幅285×185的图片，我们对它加入下面这段代码：
style="clip:rect(0,200,100,0)" 这段代码使图片将以200×100的形式显示。
这是因为rect中规定的200，代表了图片的右端距离是200pixels，也就是图片的宽度是200pixels；同理， 100定义的则是图片的高度。这样图片就 好象被剪辑了一样，将显示成右下图的样子：
（8）扩展——