第4页：将css样式加到你的网页中
我们已经 学了将css样式表加到网页的一种方 法。实际上你可以使用4种方法。每种方 法都有其不同的优点：

  • 将样式表植入HTML文件中。
  • 将一个外部样式表链接到HTML文件 上。
  • 将一个外部样式表输入到HTML文件 中。
  • 将样式表加入到HTML文件行中。

植入样式表：

这就是我们在上一页中用的方法，所有 的样式表信息都列于HTML文件的顶部， 同<BODY>分列，例：

  • <HTML> <STYLE TYPE="text/css"> <!-- H1 { color: green; font-family: impact } P { background: yellow; font-family: courier } --> </STYLE> <HEAD> <TITLE>My First Stylesheet</TITLE> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML>

植入样式表规则后，浏览器在整个HTML页 面中都执行该规则。如果你想对网页一次 性加入样式表，就可材用该方法。

你可能注意到代码中有两处很奇怪： TYPE="text/css"属性和注释标签。 TYPE="text/css" 设定采用MIME类型，这 样以来，不支持CSS的浏览器可以忽略样 式表。

注释标签(<!-- and -->)更为重要。有些 老的浏览器（如MAC机用的IE 2.0）即使 在设定了TYPE="text/css" 属性时也不能 忽略样式表继续执行下面的命令，而且还 会显示样式表的代码。而使用注释标签则 可以避免发生这种情况。 链接到样式表上

这里是样式表功能发挥得淋漓尽致的地 方。你可以将多个HTML文件都链接到一个 中心样式表文件。这个外部的样式表文件 将设定你所有网页的规则。如果你改变样 式表文件中的额某一细节，所有页面都会 随之改变。如果你维护的站点很大，则这 项功能绝对会有其用武之地。

它的使用方法：产生一个普通的网页，但 不使用<STYLE>规则，而是在<HEAD>内使 用<LINK>标签：

  • <HTML> <HEAD> <TITLE>My First Stylesheet </TITLE> <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML>

(使用链接的样式表时，你无须使用注释 标签。)

现在生成一个单另的文本文件，起名mystyles.css (或者其任何你喜欢的名 字)。文件内容如下：

  • H1 { color: green; font-family: impact } P { background: yellow; font-family: courier }

如同发布HTML文件那样，将这个CSS文件 发布到你的服务器中。在浏览器中观看网 页时，你会发现浏览器将依照链接标签将 所有链接了的HTML网页按照样式表的规则 显示，在HREF属性中你可以选择使用绝对 或相对URL。

输入样式表

输入外部样式表的方法同链接的方法类似。 不同之处在于链接法不能同其它方法结合 使用，但输入法则可以。例：

  • <HTML> <STYLE TYPE="text/css"> <!-- @import url(company.css); H1 { color: orange; font-family: impact } --> </STYLE> <HEAD> <TITLE>My First Stylesheet </TITLE> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML>

而其中输入的 company.css文件内容如下：

  • H1 { color: green; font-family: times } P { background: yellow; font-family: courier }

在本例中，浏览器首先输入 company.css 的规则 ( @import 必须打头), 然后加入 移植的规则从而为这个网页产生规则集合。 请注意，对于H1在外部样式表文件和植入 的样式表中都设定了规则。在两者冲突的 情况下，浏览器应执行哪一项规则呢？植 入的规则此时将占上风。所以文字显示效 果如下：

Stylesheets: The Tool of the Web Design Gods

Amaze your friends! Squash your enemies!

输入样式表的灵活性可以使你输入无数多 个样式表，并可以按照自己的喜好用植入 的样式表凌驾于输入的样式表之上。

但是目前只有IE 4.0支持输入法。

在行内加入样式 最后，你还可以在HTML行中加入样式规则， 如下：

  • <HTML> <HEAD> <TITLE>My First Stylesheet </TITLE> </HEAD> <BODY> <H1 STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1> <P STYLE="background: yellow; font-family: courier">Amaze your friends! Squash your enemies!</P> </BODY> </HTML>

在这个例子中，你无须在HTML顶部加入样 式表代码。加入行内的样式表属性将使浏 览器同样执行样式表规则。

该方法不方便之处在于：你必须在每行指 令中都中加入样式规则，否则下一行时浏 览器将转回到文件的缺省设置。

加入行内的样式表相比不如植入、链接及 输入的样式表那样功能强大，但有时候你 会发现它也很有用。

记住，你可以同时使用几种方法，其实， 样式表的能力就在于综合你加入网页的各 种样式。

第5页:css分类及其它技巧
我们已经学习了所有的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 */

第6页：css串接
屏幕就是一个战场，在一个HTML文件中， 如果有3种不同的css样式表规则都使用P作 为其选择。输入的样式表指示浏览器将 <P>文字用红色显示，而植入的样式表指 示浏览器用蓝色显示，而行内样式表指 示浏览器用黄色。 那么可怜的浏览器该听谁的呢？ 好在支持样式表的浏览器自身配有样式 表的串接顺序来应付这种情形。总有几 种样式表规则要比其它的规则更重要。 根据正式的规定，以下为样式表的串接 顺序：

  1. Inline styles （行内样式）
  2. Embedded styles （植入样式）
  3. Linked styles （链接样式）
  4. Imported styles （输入样式）
  5. Default browser styles（缺 省浏览器样式）

浏览器将按照上述顺序执行样式表的指 令。 但是还要一个问题。如果同一种类的多 个规则相互冲突怎么办？比如，如果一 项植入样式表规则将<P>以绿色显示，而 另一个规则要求以红色显示？ 多亏聪明的样式表标准的发明人，对于这 种冲突也有一个顺序，但很复杂。这里 有一个极其简单的解决顺序：

  1. 使用特别说明的样式表规则，例：

    BODY { color: green } P { color: red }

    有一项规则特别说明<P> 中的文字 一红色显示，但它同时也继承了 <BODY>的绿色规定。但是特别说明 了的规则的重要性要大于继承的规 则，所以<P>之内的文字一红色显 示。

  2. 应用继承的样式表规则

    如果不存在第1步中所列的特别说明 的规则（比如存在特别说明了的多 项规则），则浏览器转向执行继承 的规则。如果找不到继承的规则， 则浏览器转向执行第3步。

  3. 按照样式表规则在HTML中的显示 顺序执行。

    P { color: green } P { color: red }

    当无法适用上述规则时，浏览器将 根据规则在代码中显示顺序执行。 在上例中，<P>作为讲座一红色显示， 因为它是最后给出的规则。

注意：正式的串接样式表规定对于串接 顺序有更详细的规定。但由于执行规定Netscape Communicator 和Internet Explorer都不支持，所以本文中不再细 述。 最后一个问题：如果样式表规则同HTML 标签冲突时，如何处理？我们看一下这 个例子：

  • I { font-family: impact }

    <P>I think <I><FONT FACE="Times"> East of Eden</FONT></I> is Stein beck's best novel.</P>

该例中样式表规则要求浏览器使用 Impact，但是传统的HTML<FONT FACE>标 签要求用Times字体，一个很明显的传统。 根据正式的样式表规定，应该优先执行样 式表规则。 但是最主要的几种浏览器Netscape 和IE 4.0 都规定应优先执行HTML。唉....... 你看到了吧，浏览器不能如我们希望的 那样应用串接样式表。节哀顺变吧。

5日精通css样式表－第1日4-6页[转]相关推荐

  1. html 将盒子固定浏览器,浏览器默认css样式表 css之左盒子固定,右盒子自适应的一种实现方式...

    浏览器默认css样式表 在页面布局或者是列表布局中,我们经常出现一个场景:左边是固定宽度的盒子,右边自适应:div>label>Open... maoguiyou 2016年09月13日 ...

  2. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  3. JavaWeb——框架与css样式表练习题

    一.商城页面素材 代码实现 <!--主页面--> <!DOCTYPE html> <html><head><meta charset=" ...

  4. css样式表和选择器

    CSS样式----图文详解:css样式表和选择器 主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...

  5. JavaScript对css样式表操作

    CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...

  6. （转）CSS样式表继承详解

    什么是css 继承? 要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在 ...

  7. (原创分享，改进版)CSS样式表速成！

    大话CSS样式表速成 程序和美工一直是相辅相成的,一个好的Web项目需要不仅仅是程序的完美,同样一个好的用户使用页面,也可以 吸引一大部分用户.往往在传统的概念里,程序和美工总是被分开来说.一方面,这 ...

  8. CSS样式表初始化代码

    CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...

  9. php html5 css样式,怎么在html页面写css样式表

    本教程操作环境:windows7系统.html5和css3版,该方法适用于所有品牌电脑. 在html页面写css样式表 1.首先可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css ...

  10. 前端技术分享：一个超级好用的CSS样式表

    大家可以经常逛一些程序员比较喜欢的论坛贴吧,你会有不一样的惊喜呢,今天小千就来给大家分享一个在GitHub上面发现的超级好用的CSS样式表,来看一看. 看名称本以为是一个动画库,但是看下来才发现这是一 ...

最新文章

  1. 回顾与展望：大热的AutoML究竟是什么？ | 技术头条
  2. 20165313-张晨晖课设个人报告
  3. Your CPU supports instructions that this TensorFlow binary was not compiled to use: SSE4.1 SSE4.2 AV
  4. dynamo python修改多个参数_40岁小白学了30天python发现，编程真的其乐无穷
  5. 云小课 | 区块链关键技术之一：共识算法
  6. 别人家的地铁！长沙地铁全面进入5G时代 下载速率达1Gbps
  7. iOS开源项目周报0302
  8. C++ map()和pair()用法
  9. “乘风破浪”的芒果超媒，能上岸吗？
  10. stc单片机c语言程序头文件(stc12c5a60s2.h,STC12C5A60S2单片机头文件
  11. hal库GPIO函数
  12. Z世代成为消费新主力，我国潮牌营销洞察报告​
  13. 英特尔CAS缓存加速软件优化SSD性能
  14. Python数据爬虫学习笔记（19）Scrapy天善智能网课信息爬虫
  15. 8本必读关于人工智能伦理问题、社会价值及影响书籍推荐
  16. 【唐诗学习】五、山水田园诗派代表
  17. python 圆形检测_python下用OpenCV的圆形检测
  18. 循序渐进，探寻Excel二次开发.NET源码(3)-ExcelBase类
  19. 皮尔森相关性系数的计算python代码（四）（热力图版）
  20. 志强预测中国房价到2020年以后才可能会下降

热门文章

  1. php逻辑函数,php基础语法之逻辑运算
  2. SpringBoot的幕后推手(1)，和腾讯大牛的技术面谈
  3. 前端demo给阿姨结算工资
  4. Python爬虫+语音合成,获取想看的漫画更新(just for fun)
  5. 推荐系统详解（十）常见模块
  6. 【Spring Cloud +Vue+UniApp】智慧建筑工地平台源码
  7. 计算机等级考试增设试点科目,计算机等级考试科目和内容将有较大调整
  8. DG三种数据保护模式
  9. 东西方的计算机界差异,从四十几个方面展示：东西方的差异到底在何处？（哪一点戳中了你）...
  10. 基于学生课堂管理签到的AI人脸识别系统(四)