CSS

维基教科书，自由的教学读本
跳转至： 导航、 搜索
Split-arrows.svg 此条目被建议分割为若干不同条目。（讨论）

目录

状态 [编辑]

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

本书的内容 [编辑]

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

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

先统一辞汇 [编辑]

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)
  • 由起始标签、结束标签和其间的内容所构成，例如：This is bold text

属性 (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)? [编辑]

规则(Rules) [编辑]

注解符号 (Commenting) [编辑]

规则的形式 (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) [编辑]

外部样式表通常有两种写法。

@import url("mystyle.css");

这是 CSS 内的 @import 语句，可以在一个 CSS 内引入其它 CSS。另一种引入样式表的方法是，使用 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）
  • 类别选取项（Class）
  • ID 选取项（ID）
  • 拟元素选取项（Pseudo-element）
  • 拟类别选取项（Pseudo-classes）

一般选取项(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元素。[1]目前共有 5 种

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

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

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

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

参考资料 [编辑]

  1. ↑ w:CSS
  • 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
维基百科中的相关条目：
CSS
来自“http://zh.wikibooks.org/w/index.php?title=CSS&oldid=49907”