“CSS”的版本间的差异

来自Blueidea
跳转至： 导航、 搜索
（→‎概述）
小 （通过pre tag消除事例代码的url外链）
第110行： 第110行：
  
 
===一个包含CSS的XHTML文件的例子===
 
===一个包含CSS的XHTML文件的例子===
 +
<pre>
 
  <?xml version="1.0" encoding="utf-8"?>
 
  <?xml version="1.0" encoding="utf-8"?>
 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
第135行： 第136行：
 
   </body>
 
   </body>
 
  </html>
 
  </html>
 +
</pre>
  
 
===一个读者定义的样式表的例子===
 
===一个读者定义的样式表的例子===

2011-09-24T00:45:19的版本

层叠样式表（或称串样式列表），简写为CSS，是英语Cascading Style Sheets的缩写。它是W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。目前最新版本是CSS 2.1，为W3C的候选推荐标准。下一版本CSS 3仍然在开发过程中。

概述

一个网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的结构（用HTML或其他相关的语言写的）与文件的显示（CSS）分隔开来。这个分隔有许多好处：

  1. 文件的可读性被加强
  2. 文件的结构更加灵活
  3. 作者和读者可以自己决定文件的显示
  4. 文件的结构简化了。

CSS还可以使用其他的显示方式，比如声音（假如浏览器有阅读功能的话）或给盲人用的感受装置。此外CSS还可以与XHTML、XML或其他结构文件一起使用，唯一条件是显示这种文件的浏览器装备了接受CSS的功能。

HTML文件中的每一个class或id都可以有自己的显示特征，而且每一个没有id特性的HTML结构也可以有自己的显示特征。这些结构有的是HTML自己需要的，有的是专门为CSS设置的。

CSS信息可以来自：

  • 作者样式
    • 作者可以在他的HTML文件中确定一个外来的、独立的CSS文件
    • 作者可以将CSS信息包含在HTML文件内
    • 作者可以在一个HTML指令内结合CSS指令，这样做一般是为了在一个特殊情况下将总体的CSS指令抵消掉
  • 读者样式
    • 读者可以在他的浏览器内设立一个地区性的CSS文件。这个CSS文件可以用在所有的HTML文件上。假如作者的CSS文件与读者的相冲突，那么读者可以确定他想使用哪个
  • 浏览器的样式
    • 假如外部没有特别指定一个样式的话，一般浏览器自己有一个内在的样式

使用CSS的优点有：

  • 一个整个网站或其中一部分网页的显示信息被集中在一个地方，要改变它们很方便
  • 不同的读者可以有不同的样式，比如有的读者需要字体比较大
  • HTML文件本身的范围变小了，它的结构简单了，它不需要包含显示的信息

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

样式规则

CSS的语法很简单，它使用一组英语词來表示不同的样式和特徵。

一歌式样表由一组规则組成。每个规则由一个“选择器”（selector）和一个定义部分組成。每个定义部分包含一組由半形分号（;）分离的定义。这组定义放在一对大括弧（{ }）之间。每个定义由一个特性，一个半形冒号（:）和一个值组成。

选择器（Selector）
通常为当中的元素（element），如html中的<body>，<p>，<strong>等标签，多个选择器可以半形逗号（,）隔开。
属性（property）
CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。
值（value）
指属性接受的设定值，可由各种关键字（keyword）组成，多个关键字时大都以空格隔开。
要针对沒有标签定义范围进行样式设定时，可利用<div>与<span>标签

例子： 

p   { 
    font-size: 110%;
    font-family: garamond, sans-serif;
    }
h2  { 
    color: red;
    background: white;
    }
.highlight {
    color: red;
    background: yellow;
    font-weight: bold;
    }

在这个例子中有三个选择器：p、h2和.highlight，color: red是一个定义，其中color是特性，red是color的值。

在这里HTML中的结构p（段落）和h2（2级标题）获得了不同的样式。每个段落的字体的大小比包含这个段落的结构的字体的大小要大10%，其字形是Garamond，假如Garamond没有的话那么使用一般的sans-serif字形。2级标题的字用紅色，底面是白色的。这个例子中的第三个规则规定了一个class的样式。通过class属性每个HTML结构都可以被指定为这个class，例如： 

<p class="highlight">这个段落将被显示为黃底红字粗体。</p>

显示为

这个段落将被显示为黃底紅字粗体。

CSS当內也可以包含注释，注释以/*开始，以*/结尾，例如： /* 注释 */

历史

从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。

但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。

当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。

1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2004年为止，第三版还未出版。

采纳的困难

尽管CSS1规格1996年就完成了，但一直到三年后还没有一个浏览器彻底实现了这些规格。2000年3月出版的微软在麥金塔电脑上运行的Internet Explorer 5.0是第一个彻底贯彻CSS1的浏览器。此后许多其他浏览器也贯彻了CSS1和CSS2的一部分。但到2004年为止还没有一个浏览器彻底贯彻了CSS2。尤其aural和paged等特性是被支持得最差的。

即使彻底贯彻了CSS1的浏览器也遇到了许多困难。许多CSS的贯彻互相矛盾、有错或有其他稀奇古怪的地方。为了使他们的页面在所有的浏览器中、在所有的系统上的显示相同，作者往往要使用特别的技巧或结局特殊的困难。一个最著名的错误涉及到显示方形的宽度，在Internet Explorer浏览器中方形的宽度的显示有错误，其结果是方形的宽度在许多浏览器中被正确地显示，但在Internet Explorer上方形的宽度太窄。虽然这个错误有解决的办法，但它限制了其他一些功能。

彩色文本 这-{只}-不过是上百个有记载的Internet Explorer、Netscape Navigator、Mozilla和Opera中的CSS错误中的一个。有些这些错误对文件的显示有极重大的影响，CSS贯彻中的这众多的错误给网页设计者带来了极大的困难，他们很难将他们的网页设计到在所有的系统上都同样的地步。

使用CSS

CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。

比如HTML中h2标志这一个二级标题，它在级别上比一级标题h1低，比三级标题h3高。这些信息都是结构上的信息。

一般来说级别越高的标题其字体也越大，h1的字体最大，因为一般来说字体越大它表示的内容就越重要，此外一般标题都使用粗体字，来突出它们的重要性。一般来说h2使用粗体字，其字体比h3大，比h1小。这些信息是显示用的信息。

在CSS出现前，假如作者要确定h2标题的颜色、字形、大小或其他显示特征的话，他要使用HTML中的font或其他样式指令，光h2不够，因为h2只是一个结构指令。假如一个标题要用斜体字、红色的字符、白色的底色的话，作者要这样写：

<h2><font color="red" bgcolor="white"><i>使用CSS</i></font></h2>

这些显示用的指令使得一个HTML变得非常复杂，要維護也比较困难。假如所有的二级标题都要这样来显示的话，所有的二级标题的指令都要这么复杂。此外读者无法改变这些规定，假如一个读者更喜欢蓝色的标题的话，他无法改变标题的颜色，因为文件的作者特别规定了标题的颜色。

使用CSS的话h2指令只规定文章的结构，其显示由样式表来规定，上面的例子可以变成这样：

<h2>使用CSS</h2>

服从的样式表可以规定h2指令使用斜体字，红色字和白色背景：

h2 { color: red; background: white; font-style: italic; }

这样显示与内容就分开了。（由于CSS的优点，W3C现在正在考虑将HTML中的许多显示用的指令废弃掉。）HTML只表达文章的结构，CSS表达所有的显示。CSS可以指示颜色、字形、排列、大小以及其他许多非视觉的表达方式，比如将一篇文件的内容读出来。

CSS样式信息可以包含在一个附件中或包含在HTML文件内。读者可以使用多个样式表，在重复的情况下他可以选择其中之一。不同的媒体可以使用不同的样式表。比如一个文件在荧光屏上的显示可以与在打印机中打印出来的显示不同。这样作者可以为不同的媒体设计最佳的显示方式。此外CSS的目标之一是让读者有更大的控制显示的自由。假如一个读者觉得斜体字的标题读起来很困难，他可以使用自己的样式表文件，这个样式表可以“层叠”使用，他可以只改变红色斜体字这个样式而保留所有其他的样式。

一个包含CSS的XHTML文件的例子

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
     <style type="text/css">
     body {
          background: #fff;
          color: #666;
          }
       h1 { 
          font: bold italic sans-serif;
          color: green;
          }
     </style>
   </head>
   <body>
     <h1>这个句子用綠色、粗体和斜体字显示</h1>
     <p>普通字。</p>
     <h1 style="color: red; background: green;">
     这个句子用大的、红色斜体字在绿色背景上显示，通用的h1样式在这里被取代了。
     </h1>
     <h1>这个句子用綠色、粗体和斜体字显示</h1>
   </body>
 </html>

一个读者定义的样式表的例子

文件highlightheaders.css的内容是： 

h1 {color: white; background: orange !important; } 
h2 {color: white; background: green !important; }

这样的文件被贮存在读者的计算机内，他在浏览器内记录下显示时使用这个文件。!important表示在显示时使用读者的规定，而不是作者的规定。

常见的陷阱

有时一个网页的作者会乱用CSS。有些习惯于只使用HTML的作者可能会忽視CSS提供的可能性。比如有些习惯于使用HTML的显示指令的作者可能会在所有的HTML文件內加入CSS样式。这比將HTML显示和结构指令混在一起是一个进步，但它还是有许多同样的缺点，而且维护时的工作量于混合使用差不多。

CSS于其他程式语言有着一些共同的陷阱。尤其在命名CSS的id和class时CSS作者往往会选择一个比较有说明性的名称而使用显示特徵作为它们的名称。比如一个作者可能使用bigred来命名一个用大紅字体的突出显示的字节。在当时对作者來说这个名称可能是很直觉的，但假如后来作者決定突出显示的字节应该使用绿色，而不是红色的话，他的命名就有毛病了。在上面这个例子中，一个更合适的名称应该是emphasized，它描写的是这个class的用意，而不是它是如何被显示的。

另一个毛病是未记录的、未定义的和往往会被遺忘的名称。一个网页作者可能会选择上百个名称。名称如footer、footnote或者explanation、note、info、more可能是指同一回事。这样许多重复的名称就出现了。有时一个复杂的网站的设计者可能会依赖在HTML文件內于HTML指令結合的CSS指令來解决这个问题，但这样一来他又把內容于显示点有一起了，而且这样一来这个文件就只适合于某一媒体了。（外部样式表的一个大优点就是它是跨媒体的，因为不同的样式可以特別适用于不同的输出媒体。）

HTML本身的复杂性是另一个困难处。虽然大部分使用CSS的文件比传统的使用表格的文件要整洁，但过分使用class和过于細膩的结构层次同样使HTML变得繁庸。此外有的作者过分使用div指令。

另一个陷阱是为了克服常见的浏览器错误而引入特別的CSS指令，这些指令当然是为了克服已知的错误而引入的，但它们使一个CSS文件的维护性能降低，有时这样的CSS文件的维护量甚至比过去的HTML文件的维护量还大。

有时一个作者可能会过度地使用CSS来決定他的文件应该怎样被显示。经常一个作者会決定隐藏超连結底下的橫线，这很容易做到，但对读者來说这可能会是一个不方便。

CSS的要求

1996年12月发表的CSS1的要求有：

  • 支持字体的大小、字形、强调
  • 支持字的颜色、背景的颜色和其他元素
  • 支持文章特征如字母、词和行之间的距离
  • 支持文字的排列、图像、表格和其他元素
  • 支持边缘、围框和其他关于排版的元素
  • 支持id和class

W3C管理CSS1要求

1998年5月W3C发表了CSS2，其中包括新的内容如绝对的、相对的和固定的定位元素、媒体型的概念、双向文件和一个新的字型。W3C管理CSS2要求

CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。它现在是一个要求候选者。

CSS3正在发展中。W3C发表一个CSS3发展过程报告。

维基百科所使用的新的一般皮肤（'MonoBook'）完全基于CSS，读者可以简单地更改他所喜欢的用户样式，他只要在他的用户页下加入一个副页就可以了。用户甚至可以使用一个完全没有CSS的皮肤（'MySkin'）自己来制造一个自己的CSS皮肤。

参看

外部链接

网页技术与标准

取自“http://wiki.blueidea.com/index.php?title=CSS&oldid=8866”