本页使用了标题或全文手工转换

CSS

维基教科书,自由的教学读本
跳到导航 跳到搜索

状态[编辑]

备忘录:正在写书本的大纲阶段。

本书的内容[编辑]

这本书唯一的主题就是 CSS,因此,这本书不会告诉你 CSS 的历史,也不会着墨于 CSS 的好处与优点,因为在网络上已经有很丰富的资料。然而我鼓励读者若是时间许可,应该花些时间了解为什么网页技术怎么从 HTML 开始,后来衍生出 CSS,而最后又冒出 XHTML 。关于 CSS 的历史,你可参考 Who created CSS? CSS Early History,至于 CSS 的好处与优点,用了你就会了解。

虽然我会在适当的地方加入参考资料或是连结,但是基本上,没有阅读这些参考资料与连结并不会影响你学习 CSS。因此,除了自己动手作停下来之外,尽量别让其他的事情中断你的阅读。

CSS 3 增加了对圆角[1]、阴影的直接支持,有助于简化开发。在以前要完成基本的边框圆角效果非常麻烦,需要自己提前制作好图片,无法仅借助CSS直接实现[1]

先统一辞汇[编辑]

Cascading Style Sheet (CSS) 的中文翻译一直没有定调,有人称他为“层叠样式表”,也有称“串接样式表”,我想,我在这里不为 CSS 的中文译名正名,往后的文章中,中文一律用“样式表”来称呼 CSS,不过我宁可多用英文,以免造成误解。

还有一个重要的词汇“selector”,中文有“选择器”与“选取项”两种翻译,本书我采用后者。

前言:一个网页的构成[编辑]

底下的说明,对于任何数位的文件来说,都会成立,但是我仍然将数位文件局限在网页这个范围,这样会让问题单纯一些。

从产生(或是制作)的过程来看,网页可以区分为:

  1. 内容(contents)
  2. 呈现(presentation)

两大元素。简单的说,我们会依照不同的重要性、不同的性质(属性)与意图,将网页的内容结构化,之后,再依据这个架构,给予各个部分合适的呈现方式。这就是我们最后看到的网页。

概述[编辑]

不同性质的内容[编辑]

我们先试着从不同的角度来看一分网页,先从浏览器呈现出来的画面,再到源代码,最后看看有没有什么遗漏的内容。

从浏览器看到的成品[编辑]

大家可以回想一下你曾经看过或是作过的网页,从浏览器前端看得到的组成元素不外乎底下的几个要素:

标题(heading)
网页的第一级标题、第二级标题、第三级 ... 标题。
段落(paragraph)
指的是一段意义完整的图、文。
表格(table)
例如价目表、行事历等等,由行、列组成的资料。
清单(list)
有序的清单、无序清单与定义式清单。
图片(image)
各种可以被浏览器读取的格式的图档。
超链接(hyperlink)
超链接是网页有别于一般文件的一个很重大的分野,因此,我也把它当作是网页的一个要素。
表单(form)
有按钮、单选选项(raido)、复选选项(check box)、输入字段(text field)、输入文字区块(text area)等等。
多媒体(multimedia)
影片、音乐或是 flash。

反观网页源代码[编辑]

若是你熟悉源代码,上面我提到的每一个要素,你一定可以立刻对应到某个 HTML 的标签(tag),但是在源代码里面,你会发现更多东西,例如:

  • Javascript
  • meta 标签
  • style 标签
  • ...

事实上,在源代码里面,我们还要提供许多很关键的资讯给浏览器或是搜索引擎,这些资讯并不会呈现在使用者眼前,但是却与网页的呈现正确与否息息相关。这些资讯包括: 利用 meta 标签告诉浏览器你的网页所使用的编码,例如:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

其他[编辑]

若是你细心一点,你一定会发现,一个网页所包含的元素里面,我们漏提了许多的东西,例如:

关于整个版面的
  • 前景、背景颜色
  • 边界
  • 间距
关于字体的
  • 字型、字级与颜色
  • 行高

HTML 与 CSS 的分工[编辑]

谈到这里,我想你一定感觉到了,原来所谓的“标记语言(markup language)”确实是要替文件的内容加上注记,让一个文件的结构清晰、层次分明。熟悉 HTML 的人会说,HTML 的标签里面还是有一些用来作格式化(也就是定义呈现方式)的标签,如:<b>、<i>,但是,总体来说,HTML 最大的用途乃是用来描述文件的架构,让文件本身在结构上具有意义,甚至更进一步的让文件具有语义。

至于样式表的角色呢?它是用来告诉浏览器,如何装扮每一个 HTML 标签所标示的内容。所以,任何谈到样式表与 HTML 的文章都会说:“借由 CSS,我们让文件的内容与呈现可以分离。”没错,这就是学习 CSS 的目的,你应该开始想像,在不更动任何 HTML 源代码的状况下,借由修改样式表,你的网页将呈现各种风格迥异的面貌。

HTML 简单介绍(A Brief of HTML)[编辑]

在真正提到 CSS 之前,弄清楚下列几个 HTML 的基本观念,可以让你更快掌握 CSS,也可以帮助你将来比较容易阅读其他相关文件,另外,用合适的术语表达概念,有助于与其他设计师的沟通。

标签与元素 (Tags and Elements)[编辑]

标签与元素
标签(tag)
  • 介于左右三角括弧 (angled brackets) 的文字,如:<body>
  • 通常标签是成对的,分别成为“起始标签(opening tag)”与“结束标签(closing tag)”,我们将内容在两个标签之中。
  • 一般而言,标签用来告诉浏览器采取什么处理方式:起始标签告诉浏览器开始某个处理方式,结束标签告诉浏览器终止该处理方式。
元素 (elements)
  • 由起始标签、结束标签和其间的内容所构成,例如:<b>This is bold text</b>

属性 (Attribute)[编辑]

我们以实际的例子来说明:

<img src="images/foo.gif" alt="範例" width="100" height="50" />

这是一个 img 标签,在源代码中,标示这里要放入一张图,图片来源(source, src)是 image/foo.gif 这个档案,万一图片无法显示时,替代的(alternative, alt)文字是 "范例",而这张图的宽度(width)是 100 像素(pixels),高度(height)是 50 像素。

我们称呼:

  • src
  • alt
  • width
  • height

为 img 标签的属性,而等号(=)后面用双引号括起来的称为属性的“值(value)”。

不同的标签有不同的属性,数量也不一样。

块状元素(Block-level Tags)与内联元素(Inline Tags)[编辑]

我们先看一个例子,再来解释什么是 block-level 什么是 inline。

HTML 源代码 呈现
<p>
這是用來說明
<b>區塊標籤(block-level tags)</b>與
<b>同軸標籤(inline tags)</b>的例子。
</p>
<p>
你注意到例子中,兩個標籤一個會造成換行,一個卻沒有
</p>

这是用来说明块状元素(block-level tags)内联元素(inline tags)的例子。

你注意到例子中,两个标签一个会造成换行,一个却没有

在上面的例子当中,<p> 标签所形成的元素,会自成一个区块(也就是会换行),<b> 标签所形成的元素,并不会这样,它仅在同一行里作用。在 HTML 里面,常看到的 block-level 的标签有:

  • blockquote - 引用的区块
  • center - 区块置中
  • div - 通用的 block-level 标签
  • h1 - 第一级标题
  • h2 - 第二级标题
  • h3 - 第三级标题
  • h4 - 第四级标题
  • h5 - 第五级标题
  • h6 - 第六级标题
  • hr - 水平线
  • p - 段落
  • pre - 保留文字格式

而 inline 的标签有:

  • a - 锚点(超链接标签)
  • br - 段行
  • iframe - 同轴框架(Inline frame)
  • img - 图片
  • q - 简短的引用
  • script - 用户端 script
  • span - 通用的 inline 标签
  • sub - 下标(subscript)
  • sup - 上标(superscript)

Cascading Style Sheet : CSS[编辑]

层叠式 (Cascading)?[编辑]

CSS不同定义方式的样式,其优先级为:内联指定的style > 通过id指定的style > 通过class指定的style > 通过html tag指定的style

故得名Cascading

语法[编辑]

@rule argument(s) {
	selector {
		property: argument(s);
		another-property: argument(s);
		property-the-third: argument(s);
		fourth-property: argument(s);
	}
}

规则(Rules)[编辑]

CSS规则以@符号为前缀。至少1个实参(argument)。例如:@charset定义了文档字符集。@media设置了媒体的属性,常为all, screen与print。@font定义了网页字体。

注解符号 (Commenting)[编辑]

/* comment contents */

规则的形式 (Form of rules)[编辑]

格式化表单的位置(Where to place Style Sheet?)[编辑]

内部格式化表单(Internal Style Sheet)[编辑]

又称内嵌式格式化表单(Embedded style sheet) 例如:

<style type="text/css">
/*CSS goes here...*/
</style>

其中 style 标签内为放置 CSS 代码的地方。

外部格式化表单(External Style Sheet)[编辑]

CSS 内可用 @import 语句,在一个 CSS 内引入其它 CSS:

@import url("mystyle.css");

在html文件中,引入样式表的方法可用 link 标签,如下所示。

<link rel="stylesheet" href="mystyle.css" type="text/css" />

外部样式表的好处是令结构和表现完全分离。

内联样式表 (Inline Style Sheet)[编辑]

如下所示是一个使用内联样式表的示例。通过 style 属性,可以为元素添加样式。它无法做到结构与表现的分离,但在无法引入外部样式表或 style 标签时(如维基百科)时仍然有用。

<div style="color:red; background:yellow; font-weight:bold;">
這個段落會被顯示為黃底紅字粗體。
</div>

显示为

这个段落会被显示为黄底红字粗体。

样式的优先级(Priority rules)[编辑]

继承的问题(Inheritance)[编辑]

浏览器如何工作?( How browsers work?)[编辑]

选取项(Selector)[编辑]

选取项的语法(Syntax of selector)[编辑]

  • 一般选取项(Universal)
  • 型态选取项(Type)
  • 群组选取项(Grouped)
  • 子孙选取项(Descendant)
  • 子选取项(Child)
  • 比邻选取项 (Adjacent)
  • 属性选取项(Attribute):语法为E[Attribute="value"]. Attribute支持多种不同的匹配运算符,如 =, !=, ~=, ^= and $=.
  • 类别选取项(Class):语法为E.classname.
  • ID 选取项(ID):语法为E#IDname.
  • 拟元素选取项(Pseudo-element)
  • 拟类别选取项(Pseudo-classes):伪类是特殊的类,基于元素的状态,使用:运算符。语法为E:pseudo-class. 常见的有:hover, :link and :visited

In CSS, a selector is the part of a rule that comes before the first "{", such as "p" in the rule " p { font-weight:bold; } ". A selector specifies to which elements a rule should apply, by naming the type of the element, such as "div", the class of the element, or the id of the element. Selectors can only be used in linked and embedded CSS, not in inlined one.

The following table provides an overview of selectors. The sections that follow discuss each type of selector in detail.

Overview of selectors
Type of Selector Example Selector Example Rule
type div div { margin:7px; padding:7px; }
class .important .important { font-weight:bold; color:red; }
id #onlyThisOne #onlyThisOne { font-family:courier; }
universal * * { color:green; }
pseudo-class a:link a:link { color:blue; }
pseudo-element p:first-letter p:first-letter { color:red }
descendant td span td span { font-weight:bold; }
grouped h1, h2, h3 h1, h2, h3 { text-align:center; }

Type[编辑]

These selectors match elements based on the name of their element type. The example above is using a type selector to make every instance of p have bold text. You can use the type selector with any element. Here are a few examples:

 div{
   margin:7px;
   padding:7px;
 }
 body{
   background-image:url("image.gif");
   font-size:.9em;
 }

Class[编辑]

The class selector works with (X)HTML documents. It does not work with general XML documents unless the User Agent (web browser or other document reader) can determine which attribute is the class attribute for elements in the document. In (X)HTML documents class is defined to be the class attribute.

HTML permits the class attribute for all elements that are valid in the body section of an HTML document, including the body element itself. This allows the web designer to distinguish between elements of the same type used in different contexts. For example, the designer could differentiate between HTML elements and HTML attributes in a technical document on HTML.

 The <code class="attribute">alt</code> attribute of the <code class="element">img</code>

The class selector allows you to apply CSS rules based on the class of an element.

The first way is to make a global class, which can be added to any element. You do that like this:

 .important {
   font-weight:bold; color:red;
 }

That will make any element that has the class of important be bold and red.

Sample HTML:

 <p class="important">Important Text</p>
 <p>Ordinary Text</p>
 <div class="important">Important Footnote</div>

Example rendering: Template:CSS:rendered The second way is to attach it to a type selector. The rule is only applied to elements of the given type which are of the specified class.

CSS rule:

 p.right {
   float:right;
   clear:both
 }

Sample HTML:

 <p class="right">Righty Righty</p>

Example rendering (look right): Template:CSS:rendered

An element may belong to more than one class, e.g.

 <p class="right">This paragraph belongs to the class 'right'.</p>
 <p class="important">This paragraph belongs to the class 'important'.</p>
 <p class="right important">This paragraph belongs to both classes.</p>

Example rendering: Template:CSS:rendered

Class names should describe the purpose of the class, e.g. important, not the effect of the class, e.g. red. If you name classes by effect and then change your mind about the appearance you want you can end up with rules like:

 .red {color:blue}

If necessary multiple class selectors can be used to select only elements that belong to all the specified classes, e.g.

p.important.right {
  border: 2px dashed #666
}

Example rendering: Template:CSS:rendered

Internet Explorer 6 bug[编辑]

Multiple class selectors as shown in the previous example do not work in Internet Explorer version 6. It treats the selector as though only the last class selector was present, e.g. p.important.right is treated as equivalent to p.right.

Previous example rendered in Internet Explorer 6: Template:CSS:rendered

The complete HTML document and CSS stylesheet to test this bug are given below.

classBug.css:

.important {
  font-weight:bold; color:red;
}

p.right {
  float:right;
  clear:both
}

p.important.right {
  border: 2px dashed #666
}

classBug.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
    <title>IE6 multiple class bug</title>
    <link rel="stylesheet" type="text/css" href="classBug.css">
  </head>
  <body>
    <p class="right">This paragraph belongs to the class 'right'.</p>
    <p class="important">This paragraph belongs to the class 'important'.</p>
    <p class="right important">This paragraph belongs to both classes.</p>
  </body>
</html>

ID[编辑]

The ID selector works with (X)HTML documents. It does not work with general XML documents unless the User Agent (web browser or other document reader) can determine which attribute is the ID attribute for elements in the document. In (X)HTML documents id is defined to be the ID attribute.

The ID selector is used to select a single item on a page. It matches the id attribute of an element. Two elements on the same page must not have the same id attribute.

However, several different webpages within the same site might reuse an id. It is commonly used for the major divisions of a page, e.g. mainContent, navigationBar. It is often used in conjunction with descendant selectors, e.g. to style all list items in the navigation bar whilst not affecting lists in the main content.

CSS rule:

 #onlyThisOne {
   font-family:courier;
 }

Sample HTML:

 <p id="onlyThisOne">Courier</p>

Example rendering: Template:CSS:rendered

Universal[编辑]

These selectors apply a style to all the items on the page. For example to make all the text on the page green use the rule:

 * {
   color:green;
 }

Pseudo-Classes[编辑]

Pseudo-classes and pseudo-elements allow elements to be formatted on the basis of information other than the position of the element in the document tree. Pseudo-class and pseudo-element selectors are prefixed by a colon, :, in CSS1 and CSS2.1. In CSS3 pseudo-elements are prefixed by ::.

CSS level 1 defines three pseudo-classes:

link
unvisited links
visited
visited links
active
active links

These can only be applied to the anchor (a) elements.

 a:link{
   color:blue;
 }

 a:visited{
   color:purple;
 }

 a:active{
   color:red;
 }

CSS level 2.1 introduces several additional pseudo-classes, including hover. hover can be used to create rollover effects without resorting to Javascript. CSS2.1 also allows active to apply to any element that can be active, e.g. a button.

The additional CSS 2.1 pseudo-classes are:

first-child
matches any element that is the first child of its parent.
lang(...)
matches the language of the element. The language may be set directly on the element or inherited from an ancestor element. A valid language code must appear in the parentheses, e.g. en for any variant of English or en-gb for British English.
hover
applies whilst the user hovers over the element with the mouse.
active
now allowed on any element capable of being 'active' – applies whilst the element is active.
focus
applies whilst the element has the keyboard focus.

Although CSS2.1 allows hover on any element Internet Explorer only allows it on anchor elements.

Examples:

  p:first-child {
    font-size:120%
  }

  span:lang(la) { /* render Latin text, e.g. per se, in italics */
    font-style:italic
  }

  li:hover { /* doesn't work in Internet Explorer */
    background-color:blue
  }

  input:active {
    color:red
  }

  input:focus {
    background-color:yellow
  }

An example of the first-child pseudo-class is given at the end of the descendant selector section.

Multiple pseudo-classes may be specified, e.g. to warn the user that they are hovering over a link they have already visited:

a:visited:hover {
  background-color:red
}

Care should be taken over the order of rules using pseudo-classes. For example, if you want visited links to be green except whilst the user hovers over them, when they should be yellow, the rules must be in the following order:

 a:visited{
   color:green
 }

 a:hover{
   color:yellow
 }

If the rules were reversed the cascade would mean that the visited color would take precedence over the hover color. Visited links would remain green even when the user hovered over them.

Pseudo-Elements[编辑]

Pseudo-classes and pseudo-elements allow elements to be formatted on the basis of information other than the position of the element in the document tree. Pseudo-class and pseudo-element selectors are prefixed by a colon, :, in CSS1 and CSS2.1. In CSS3 pseudo-elements are prefixed by ::.

CSS level 1 defines two pseudo-elements, first-letter and first-line, which select the first letter and line of the rendered element respectively. These can be used to apply typographic effects, e.g. to create a drop cap at the start of a paragraph.

 p:first-letter { color:red }

Only one pseudo-element selector may be used and it must be the last part of the selector chain. The first-line selector may only be applied to block-level elements, inline-blocks, table captions and table cells.

CSS2.1 adds two more pseudo-elements, before and after.

Starting in CSS3 pseudo-elements are prefixed with :: rather than :.

Simple selectors[编辑]

The selectors described above (type, class, ID, universal, pseudo-class and pseudo-element) are all examples of simple selectors. The full syntax for a simple selector is:

  • a type selector or the universal selector
  • zero, one or more class, ID and pseudo-class selectors (CSS2.1 also allows attribute selectors)
  • zero or one pseudo-element selectors

The following are all examples of simple selectors:

  p
  p.important
  p#navigation
  a:link
  p:first-line
  a:visited#homePage.menu2:first-letter
  *
  *#footer
  *.content.abstract
  *#mainArticle:first-letter

As a shorthand notation the universal selector, *, may be omitted if it is not the only component of the simple selector. For example, #footer is equivalent to *#footer and :first-line is equivalent to *:first-line.

Combining simple selectors: Simple selectors can be combined to take the context of the element in to account. For example you might want to apply a rule only to list elements in the navigation bar.

Descendant[编辑]

Descendant selectors allow you to apply style to elements that are nested within another specified element. For example, you could have every span element inside of every p element be bold. The span can be a child element of the p element, or a grandchild, or a great-grandchild, etc.

CSS rule:

 p span{
   font-weight:bold;
 }

Sample HTML:

 <p>Start of paragraph. <span>This span is bold.</span> Rest of paragraph.</p>
 <div>Start of division. <span>This span is normal.</span> Rest of division.</div>

Example rendering: Template:CSS:rendered

The next example changes the color of visited links in the navigation section. Visited links in other parts of the document would be unaffected.

CSS rule:

 ul#navigation a:visited {
   color:red
 }

Sample HTML:

 <ul id="navigation">
   <li><a href="HomePage">Home</a></li>
   <li><a href="AnotherPage">A page you haven't visited yet.</a></li>
 </ul>

Example rendering: Template:CSS:rendered

An example using the first-child selector.

CSS rule:

 div.content strong:first-child {
   color:red
 }

Sample HTML:

 <div class="content">
   <p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p>
   <p>Some <strong>strongly emphasized</strong> text and some <em>emphasized</em> text.</p>
 </div>

Example rendering: Template:CSS:rendered

Two important points to note:

  • an element is still the first child if it is preceded by text, so the em element in the first paragraph and the strong element in the second paragraph are the first children of their respective paragraphs.
  • a rule is only applied to an element if it matches all parts of the selector. The strong element in the first paragraph is a second child, so it is not matched by the strong:first-child selector.

Grouping selectors[编辑]

Selectors can be grouped into comma separated lists.

h1, h2, h3 { text-align:center; }

is equivalent to

h1 { text-align:center; }
h2 { text-align:center; }
h3 { text-align:center; }

An element may be selected by more than one rule:

 h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }
 h1 { color: yellow; }

All headings will have a red background. Level 2–6 headings will have white text. Level 1 headings will have yellow text.

The order of the rules is significant. In the following example all headings would have white text.

 h1 { color: yellow; } 
 h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }

When more than one rule applies to an element the cascade is used to determine the resulting style applied to the element.

Later CSS versions[编辑]

Additional selectors in CSS 2.1:

  • Child selectors
  • Adjacent sibling selectors
  • Attribute selectors
  • More pseudo-classes and pseudo-elements.

Additional selectors in CSS 3:

  • More sibling selectors
  • More attribute selectors
  • More pseudo-classes and pseudo-elements.

一般选取项(Universal)[编辑]

所谓的广域选择器指的是以星号(*)的方式来决定选取的范围,实际上,*通常代表的是不特定范围的选取,因此在CSS中以*设定广域选取器时,将交由浏览器来自行决定范围

     * { color: #FF0000; }

型态选取项(Type)[编辑]

型态选择器会是大家最常用到的选择器之一,所指定的型态名称会找寻文件中相同的实体元素配合,实际上,我们所使用的‘标签’语法就是一种型态选择器。

     body { 
       background-color: #999999;
       color: #FFFFFF;
    }

如果有一样的样式想要同时作用在好几个标签上的话,可以使用逗号(,)作分隔。

     a, p, h1 {
       font-size: 10 pt;
       color: #0000AA;
    }

群组选取项(Grouped)[编辑]

子孙选取项(Descendant)[编辑]

子孙选择器的形式为空格,水平制表符,换行等任何 ASCII 空白字符。例如在下面示例里,给 class 为 test 的任何 span 子元素设置 consolas 的字体:

    .test span {
       font-family:consolas;
    }

子选取项(Child)[编辑]

比邻选取项 (Adjacent)[编辑]

属性选取项(Attribute)[编辑]

类别选取项(Class)[编辑]

ID 选取项(ID)[编辑]

在网页中指定元件的id属性之后,就可以使用井字号(#)来设定ID选择器,在语法中ID选择器前可以指定网页元素,但在实际使用时,因为建议网页中不要有重复ID的元素,因此就没有指定的必要了。举例来说,有个识别选择器p#example,然后在网页中有两个物件<p id="example">以及<table id="example">,则只有前者会起作用,但如果选择器的名称为#example,择两者均会起作用。

    #example {
       font-size: 10 pt;
       color: #0000AA;
    }

拟元素选取项(Pseudo-element)[编辑]

伪元素选择器指的是一种以双冒号 (::) ,或有时也使用单冒号分隔开,后连所选取的伪元素的选择器。是于CSS里制造出来的假HTML元素。[2]目前共有 5 种

 :after /*或*/ ::after
 :before /*或*/ ::before
 :first-letter /*或*/ ::first-letter
 :first-line /*或*/ ::first-line
 ::selection

拟类别选取项(Pseudo-classes)[编辑]

方框的基本介绍 (Introduce to Box)[编辑]

在CSS中,浏览器将每个标签用Box方式呈现,并分为行内Box以及区块Box。 每个Box区块使用Box模式(Box model)呈现,以外距、边线、内距、内容四种属性(由外而内)的顺序组成一个Box。

几个特别的性质(properties)[编辑]

注意[编辑]

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

CSS与其他编程语言有着一些共同的陷阱。尤其在命名CSS的id和class时,CSS作者常选择一个比较有说明性的名称而使用显示特征作为它们的名称。比如一个作者可能使用“big-red”来命名一个用大红字体的突出显示的字节。在当时,对作者来说这个名称可能是很直觉的,但假如后来作者决定突出显示的字节应该使用绿色,而不是红色的话,他的命名就有毛病了。在上面这个例子中,一个更合适的名称应该是“emphasized”(强调),它描写的是这个“class”的用意,而不是它是如何被显示的。

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

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

另一个陷阱是为了解决常见的浏览器错误而引入特别的CSS样式,这些样式当然是为了除错而引入的,但它们使一个CSS文件的维护性能降低,有时这样的CSS文件的维护量甚至比过去的HTML文件的维护量还大。常见的特别CSS样式多是针对Internet Explorer(尤其IE 6、IE 7等旧版本)的显示错误而额外编写。

有时一个作者可能会过度地使用CSS来决定他的文件应该怎样被显示,如:一个作者会决定隐藏超链接底下的横线,这很容易做到,但对浏览者来说这可能会带来不便。

有些新的CSS3样式尚未成为标准,因此在使用时需要加上前缀(Prefix),使其可以在采用不同排版引擎的浏览器中正确显示。但于Internet Explorer 10 Release Preview起, transform, transition, animation和gradient渐变等属性均可不加前缀。[3][4]例如使用transition时,需要额外撰写四行编码:

-webkit-transition: height 0.2s linear; /* 針對使用WebKit排版引擎的瀏覽器,如Google Chrome、Apple Safari */
-moz-transition: height 0.2s linear; /* 針對使用Gecko排版引擎的瀏覽器,如Mozilla Firefox */
-o-transition: height 0.2s linear; /* 針對使用Presto排版引擎的瀏覽器,如Opera */
-ms-transition: height 0.2s linear; /* MSIE,但Release Preview起可以不用前缀*/
transition: height 0.2s linear; /* CSS3標準,放最後*/

CSS的大小因此增大,到这些CSS样式不需前缀时,又需要额外花时间把它们删除。

参考资料[编辑]

文内引用[编辑]

  1. 1.0 1.1 见莫振杰《HTML与CSS进阶教程》第172页(位于第11章“CSS图形”第3节“圆”)。
  2. w:CSS
  3. Unprefixed CSS3 Gradients in IE10
  4. Moving the Stable Web Forward in IE10 Release Preview

补充来源[编辑]

  • 莫振杰. HTML与CSS进阶教程 1. 中国北京: 人民邮电出版社. 2016年. ISBN 978-7-115-43295-7 (中文(中国大陆)). 

其它资料[编辑]

  • Cascading Style Sheets, Level 2
  • Code Style Media monitor
  • CSS - Cascading Style Sheets
  • CSS Bugs and Workarounds
  • CSS Panic Guide
  • CSS Reference Table
  • css-bug info
  • glish.com CSS layout techniques
  • glish.com
  • Guide to Cascading Style Sheets
  • Little Boxes
  • Pixellated! DesignDevelopDeliver
  • RichInStyle.com - Style sheet master class part 1 - writing perfect style sheets
  • Tableless layout HOWTO
  • The Layout Reservoir - BlueRobot
  • Web Nouveau Table-less sites list-1
  • Webmonkey Reference Stylesheets Guide
  • Working with CSS - Introduction to CSS Layout
Wikipedia-logo.png
维基百科中的相关条目: