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

1、目 录 TOC o 1-3 h z u HYPERLINK l _Toc453496602 通过代码实例跟我学CSS样式单技术的应用实例（第2部分） PAGEREF _Toc453496602 h 2 HYPERLINK l _Toc453496603 Macromedia Dreamweaver 工具对CSS相关技术的支持 PAGEREF _Toc453496603 h 2 HYPERLINK l _Toc453496604 CSS中的伪类及应用实例 PAGEREF _Toc453496604 h 10 HYPERLINK l _Toc453496605 应用CSS实现Google的Logo

2、微标的文字显示效果的示例 PAGEREF _Toc453496605 h 15 HYPERLINK l _Toc453496606 应用CSS实现Baidu搜索结果的页面风格显示的示例 PAGEREF _Toc453496606 h 18通过代码实例跟我学CSS样式单技术的应用实例（第2部分）CSS样式单的应用实例Macromedia Dreamweaver 工具对CSS相关技术的支持1、在Macromedia Dreamweaver 工具中新建各种形式的样式项目方法（1）在某个样式文件中添加样式项目（2）对标准的HTML标签重新定义其样式（3）对指定ID名称的标签定义其样式风格（4）编辑修改

3、某个样式建议首先在样式文件中定义某个“选择器”的名称，然后在利用Macromedia Dreamweaver 工具中的“样式编辑”功能进行具体的属性定义减少样式中的错误。（5）在弹出的对话框中编辑该名称的各个样式项目的定义2、熟悉Macromedia Dreamweaver 工具中的CSS样式中的各个项目的含义（1）类型针对文字方面的显示风格设置其中的字体的CSS属性名为font-family，对文字的样式定义主要涉及文字的字体、文字大小、颜色、粗细、字形以及下划线、顶划线和删除线，也还包括英文字母的大小写的控制等。（2）背景CSS页面背景分为背景颜色和背景图片，页面的背景不仅决定页面的显示风

4、格和色调，而且还可以利用页面背景实现页面的分块。其中background-color属性项目决定背景颜色，而background-image属性项目决定背景图片，并通过URL定位背景图片的文件名称和目录位置。通过background-repeat决定背景图片的重复方式（取值为repeat-x或repeat-y）、background-position决定背景图片的定位、background-attachment:fixed实现固定背景图片的效果。（3）区块针对某个区域中的文字的“摆放”方面的设置注意“display: none;”属性项目的作用！（达到“隐藏”的效果）。而其中的垂直对齐可以为顶

5、端对齐、居中对齐和底端对齐等形式。（4）方框针对区域本身的大小、内部边框（padding）、外部边框（Margin）和是否“漂浮”等（5）边框针对区域的边框线的“线型”、“粗细”和“颜色”方面的设置主要涉及边框的样式（风格，如点划线、虚线等）border-style、边框的粗细border-width和边框线的颜色border-color等方面的属性设置项目。可以分别设置这些属性项目的值，也可以采用border属性统一设置三个项目的属性值（但要注意三者的顺序，如border：style width color）。另外，IE浏览器目前不支持border-style:groove、border-s

6、tyle:inset和border-style:outset等风格的框线。（6）列表针对和标签的显示风格的定义（7）定位针对某个区域在屏幕上或者在父容器（上层标签）内的定位方面的设置z-index属性值越大，则越在上面；而且位置一定要产生覆盖关系（可以通过position:absolute;控制位置），否则不会产生出相互叠加的显示效果。另外，还要注意其中的Clipping（剪辑）决定了对象的哪个部位可以被看到。它不会改变任何对象的性质。Clipping 的区域是一个矩形，而这个矩形的尺寸取决于于四个边的位置。 这四个边用 top, right, botton, left 来表示，这四个边的位置

7、是相对于对象的而不是相对于窗口的。Clip属性的书写格式是这样的： Clip rect（top，right，bottom，left）其中的top、right、bottom和left的值都是以像素pixels为单位的。为了更好的理解相对于对象这个含义，我们看一个例子，比如左面是一幅285185的图片，我们对它加入下面这段代码：style=clip:rect(0,200,100,0) 这段代码使图片将以200100的形式显示。这是因为rect中规定的200，代表了图片的右端距离是200pixels，也就是图片的宽度是200pixels；同理， 100定义的则是图片的高度。这样图片就 好象被剪辑了一

8、样，将显示成右下图的样子：（8）扩展针对滤镜（透明、投影）等方面的设置，但滤镜的效果只在IE中支持而应该要将其中的属性参数设置具体的数据值。CSS中的伪类及应用实例1、CSS中的伪类伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对页面中的超链接在不同状态下定义不同的样式效果，创建特殊效果的超链接。 2、CSS伪类中的选择器名CSS伪类被用来给一些选择器添加特殊效果（一般用在连接效果），分别是：a:link、a:visited、a:hover和a:active、a:focus（在非IE浏览器中获得焦点的超链接）。以上CSS伪类分别定义了“

9、链接、已访问过的链接、鼠标停在上方时、点下鼠标时”的样式。注意，必须按以上顺序写，否则显示可能和预期的不一致。记住它们的顺序是“LVHAF”，如下示例：a:link color:#f00;a:visited color:#f60;a:hover color:#fc0;a:active color:#000; a:focus background:#ccc;IE6只支持超链接上的hover（悬停）伪类，IE7和其他主流浏览器支持所有元素的hover。3、伪类的语法伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-class property: v

10、alue（选择符:伪类 属性: 值）最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态。伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据它的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。4、应用CSS中的伪类“美化”超链接的显示效果示例（1）全局设置整个页面中的所有的超链接的显示风格a color: #0063dc; text-decoration: none;a:hover color: #f60; text-decoration: underline;（2）局部设置页面中的某个采用ID命名的区域内的超链接的显示风格#someOneDiv

11、IDOne.a color: #0063dc; text-decoration: none;#someOneDivIDOne.a:hover color: #f60;text-decoration: underline; xxxx xxxx xxxx（3）通过超链接内选用CSS类控制的超链接样式定义达到对部分超链接进行特殊设置 某个超链接 而对应的CSS代码示例如下：a.someOneCSSClass color:#333; text-decoration:none;a.someOneCSSClass:hover color:#CC3300;text-decoration:underline;

12、（4）通过对应超链接外的父容器标签的CSS类的css样式来控制本超链接的样式某个超链接其实本示例是应用后代选择器方式，对应的CSS代码示例如下：.someOneCSSClass acolor:#333;text-decoration:none;.someOneCSSClass a:hover color:#CC3300;text-decoration:underline;但要注意a.someOneCSSClass与. someOneCSSClass a的CSS样式定义的区别。5、应用CSS中的伪类实现“按钮形式”的超链接的显示效果示例（1）示例页面标签及CSS样式定义 应用CSS中的伪类实现“

13、按钮形式”的超链接的显示效果示例 a/* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px; a:link, a:visited/* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; background-color: #ecd8db; text-decoration: none; border-top: 1px solid #EEEEEE;/* 边框实现阴影效果，上左为浅色，下右为深色 */ border-lef

14、t: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171; a:hover/* 鼠标经过时的超链接 */ color:#821818;/* 改变文字颜色 */ padding:5px 8px 3px 12px;/* 改变文字位置 */ background-color:#e2c4c9;/* 改变背景色 */ border-top: 1px solid #717171;/* 对换边框线风格实现“按下去”的效果 */ border-left: 1px solid #717171;

15、border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; 市场管理销售管理客户管理服务管理蓝梦商城 关于我们（2）测试的效果应用CSS实现Google的Logo微标的文字显示效果的示例1、示例页面标签及CSS样式定义Google的LOGO实现示例pfont-size:80px;letter-spacing:-10px;/* 字母间距，负号代表方向为向左移，而正号代表方向向右移 */font-family:Arial, Helvetica, sans-serif;.UpperG, .lowerg color:#184dc

16、6; .firstOandE color:#c61800; .secondO color:#efba00; .lowerl color:#42c34a; G o o g l e 主要的实现思路：采用标签分离每个字母，然后分别对这些字母进行CSS文字方面的样式控制。2、测试本示例的应用效果3、另一种实现方式的示例（1）HTML标签G o o g l e（2）对应的CSS定义span font-family:Arial, Helvetica, sans-serif; font-size:80px;#idUpperG color:#184dc6;#idFirstOcolor:#c61800; #id

17、SecondOcolor:#efba00;#idLowerGcolor:#184dc6;#idLowerLcolor:#42c34a; #idLowerEcolor:#c61800;应用CSS实现Baidu搜索结果的页面风格显示的示例1、示例页面标签及CSS样式定义Baidu搜索结果的页面风格显示示例pmargin:0px;/*避免各个标签的行距过大*/font-family:Arial;/* 定义所有字体 */p.titlepadding-bottom:0px;font-size:16px;/* 标题的文字放大 */p.contentpadding-top:3px;/* 标题与内容的距离 *

18、/font-size:13px;/* 内容的字体大小 */line-height:18px;p.linkfont-size:13px;color:#008000;/* 网址颜色 */padding-bottom:25px;span.searchcolor:#c60a00;/* 关键字颜色 */span.quickcolor:#666666;/* 快照颜色 */text-decoration:underline;/* 快照下划线 */cursor:pointer;sp.title span.searchtext-decoration:underline;/* 标题处关键字的下划线 */ 中国春节网 欢迎光临中国春节网，您现在的位置是中国春节网首页! 年兽的传说 熬年的传说 万年创建