首页  |  论坛  |  资讯  |  新知  |  互助吧  |  上网指南  |  站长学院  |  商务应用  |  每日新知  |  网络组建  |  PHP开源  |  时代观察  |  电脑教室  |  互联网创业
图片  |Google|  专题  |  春运  |  新发现  |  教你一招  |  病毒安全  |  源码下载  |  下载频道  |  数字产品  |  java开源  |  网络文明  |  网站动态  |  博客加油站
  栏 目 导 航
DIV+CSS
Dreamwaver
Flash
HTML
更多
配色
特效
CSS
XHTML
  
CSS分类及其它技巧
编辑整理:52net.com  最后更新  2006-01-15

我们已经学习了所有的样式表基本语法。下面我将给你讲几个你肯定会非常感兴趣的技巧和快捷方式.

分类

我先前已经讲过所有的HTML标签都可以用作选择,并附加样式表说明.但是如果你想达到的目的比这还要复杂该如何处理呢?比如,你想让主体文字的1段用绿色显示,第2段用紫色显示,而第3段用灰色显示,你能做到吗?

这种情况下分类将发挥作用。你可以将段落P分成3种不同的类别,每一类应用不同的样式表说明。这些规则(不论是植入的还是外部样式表文件)将以以下方式显示:

    P.first { color: green }
    P.second { color: purple }
    P.third { color: gray }

  • 你的HTML代码如下:

    The first paragraph,
    with a class name of "first."


    The second paragraph, with a class name of "second."


    The third paragraph,
    with a class name of "third."

你可以给类别起任何一种名字,但不要忘了在样式表规则中类别名称前加一个句号(即英文中的 .)

你还可以生成不加任何HTML标签的分类:

    .first { color: green }

这种方式更加灵活,因为现在我们可以将CLASS=first用于任何HTML标签,并应用到网页中,而设定的文字将以绿色显示。

情景选择

如果你想让所有加重显示的文字都以红色显示,但条件是只有当这些加显示的文字出现在通常的主体文字内时。不可能吗?利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真,心想事成。情景选择要求你设定一个可以执行选择说明的情景即可。

    P B { color: red }

    Emma Thompson, Actress


    Dramatic actor, inspired
    comedienne. Is there nothing
    she can't do?

样式表的规则告诉浏览器只将所有

之内加重显示的文字以红色显示。所以,

之外标题的加重文字不会以红色显示,而

之内的文字则是。

注释

即使是用样式表制作出的非常简练的代码也应该加上注释。利用样式表代码就可以做到这一点。例:

    P.first { color: green } /* green
    for the first paragraph of every
    page */H1 { text-indent: 10px;
    font-family: verdana }
    IMG { margin-top: 100px } /* give
    all images a top margin */

串接

你可能会问这样的问题:“为什么要把它叫做串接样式表呢?下面我们将回答你的问题。

上一篇:CSS串接   下一篇:将样式加到你的网页中
 1、本站文章部分来源于互联网,转载是为了更好信息共享。如果侵犯了您的合法权益,请及时  通知我们,我们将第一时间删除。
 2、52net阶梯网力倡IT文化,崇尚互联共享,欢迎各种媒体转载我们的原创文章,转载请注明  出处(包括作者):52net阶梯网(www.52net.com)
相关文章
 
热点文章
  
推荐文章
关于我们 | 免责说明 | 人才招聘 | 给我留言 | 联系我们 | 友情链接 | 网站地图
Copyright @ 2006-2008 52net.com. All rights reserved. 52net阶梯网 版权所有
京ICP备05070331号