建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > css教程 >

5.css分类及其它技巧

时间:2009-03-09 11:50来源: 作者: 点击:
我们已经学习了所有的css样式表基本语法。 下面我将给你讲几个你肯定会非常感兴 趣的技巧和快捷方式. 分类 我先前已经讲过所有的HTML标签都可以 用作选择,并附加样式表说明.但是如果 你想达到的目的比这还要复杂该如何处 理呢?比如,你想让主体文字的1段用绿 色显示,
我们已经学习了所有的css样式表基本语法。 下面我将给你讲几个你肯定会非常感兴 趣的技巧和快捷方式. 分类 我先前已经讲过所有的HTML标签都可以 用作选择,并附加样式表说明.但是如果 你想达到的目的比这还要复杂该如何处 理呢?比如,你想让主体文字的1段用绿 色显示,第2段用紫色显示,而第3段用 灰色显示,你能做到吗? 这种情况下分类将发挥作用。你可以将 段落P分成3种不同的类别,每一类应用 不同的样式表说明。这些规则(不论是 植入的还是外部样式表文件)将以以下 方式显示:

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

  • 你的HTML代码如下:

    <P CLASS=first>The first paragraph, with a class name of "first."</P> <P CLASS=second>The second paragraph, with a class name of "second."</P> <P CLASS=third>The third paragraph, with a class name of "third."</P>

     

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

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

    .first { color: green }

这种方式更加灵活,因为现在我们可以 将CLASS=first用于任何HTML标签,并应 用到网页<BODY>中,而设定的文字将以 绿色显示。 情景选择: 如果你想让所有加重显示的文字都以红 色显示,但条件是只有当这些加显示的 文字出现在通常的主体文字内时。不可 能吗?利用样式表可以实现你最狂野的 梦想。情景选择将使你梦想成真,心想 事成。情景选择要求你设定一个可以执 行选择说明的情景即可。

      P B { color: red }

      <H1><B>Emma Thompson</B>, Actress </H1> <P>Dramatic actor, inspired comedienne. Is there <B>nothing</B> she can't do?</P>

     

    样式表的规则告诉浏览器只将所有<P>之 内加重显示的文字以红色显示。所以, <P>之外标题的加重文字不会以红色显示, 而<P>之内的文字则是。 注释 即使是用样式表制作出的非常简练的代 码也应该加上注释。利用样式表代码就 可以做到这一点。例:

    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层叠样式表教程》的目录

(责任编辑:admin)
织梦二维码生成器
顶一下
(3)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片