转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
1.5 分类及其它技巧         ★★★★

1.5 分类及其它技巧

作者:闵涛 文章来源:闵涛的学习笔记 点击数:884 更新时间:2009/4/23 13:47:45

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

分类

我先前已经讲过所有的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 */


串接

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



[办公软件]浅谈Linux 下Java 1.5 汉字方块问题解决方法  [Delphi程序]Delphi INPUT Helper v1.5 for Delphi 2005
[网页制作]Ultradev实例教程:1.5 ultradev的操作界面  [JAVA开发]JDK 1.5 新功能使用实例之Generics
[SyBase]浅谈Linux 下Java 1.5 汉字方块问题解决方法  [SyBase]在LINUX下安装JDK1.5
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台