CSS Basic

初发布于 02 Apr 2014 | in CSS

Cascading Style Sheets（层叠样式表）缩写为 CSS。

CSS 用来描述一个 HTML（或 XML）文档的应该如何在屏幕、纸张或其他媒体上渲染，可用来美化页面、增强页面的显示能力。

因为 HTML 是用来定义文档的内容，从来没打算要包含一些用于定义文档格式的标签，因此 CSS 解决了 HTML 的样式问题。

CSS Syntax

A CSS rule-set consists of a selector (选择器，指向你希望样式化的 HTML 元素) 和 a declaration block (包含一个或多个由分号分隔开的声明)。

每一个声明包含 a property name (属性名称) 和 a value (值)，并由冒号隔开。例如:

p {color: red; text-align: center;}

CSS Selectors

CSS 选择器用于查找或选择 HTML 元素，可以是以下几种：

  1. Element selector: E, 选取 E 类型的元素，等同于 *|E，选取任何 namespace 里的 E 元素
  2. ID Selector: 以 # 开始，后跟 HTML 元素的 id 特性值，用来选取指定元素。如果要选择一个唯一的元素，需确保 id 在页面中是唯一存在的。
  3. Class Selector: 以 . 开始，后跟指定的 class 特性名
  4. Universal selector: *，选取任何元素

选择满足特定 class 或 id 的元素。如：E.myclass，E#myid

注意：id、name 的名字不要以数字开头。

Groups of selectors 群组选择器

用逗号隔开，组合拥有相同 CSS 代码的 HTML 元素，以简化代码。

h1, h2, p {
  text-align: center;
  color: red;
}

更多 CSS 选择器内容参看 CSS Selectors 章节。

CSS Comments

CSS 注释以 /* 开始，以 */ 结束，可以单行注释，也可以有多行。

如何引入CSS？

External Style Sheet 外部样式表

在 <link> 元素中添加指向外部样式表文件的引用，<link> 元素需要定义在页面 <head> 区域。

样式保存在以 .css 为后缀的文件中。这样的好处是只需改变一个文件，就修改了整个网站（或多个页面）的样式。

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

注意： The type attribute is not necessary in HTML5.

Internal style sheet 内部样式表

当一个页面需要有唯一的样式时，将样式写在 <style> 元素里，放在页面 <head> 区域。

<head>
<style>
body {background-image: url("images/background.gif");}
p {margin-left: 20px;}
</style>
</head>

Inline Styling 内联样式

当一个元素需要使用唯一的样式时，使用 style 特性。小心使用，不然失去了样式表的优势（把内容与表现混合在一起了）。

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

@import

@import 是 CSS at-rule，用来从其他样式表里引入样式规则。

用户可以指定 media-dependent 的 @import 规则，通过在 URL 后面指定以逗号分隔的 media queries。这样避免去请求设备不支持的 CSS 规则。

@import url; /* 不指定任何媒体查询，则表示无条件用于所有媒体设备 */

url 可以是字符串，也可以是 url()。

@import "custom.css";
@import url("common.css") screen, projection;
@import url("landscape.css") screen and (orientation: landscape);

避免使用 @import，因为这样做会导致样式文件无法并行下载。使用 @import 引用的文件，只有在引用它的 css 文件被下载、解析之后，浏览器才知道还有另外一个 css 文件需要下载，然后去下载，完了之后再开始解析、构建render tree等一系列操作，会出现页面闪烁。有些浏览器中 css @import 引起的 css 解析延迟，会加长页面留白期。

CSS Cascading Order 样式表层叠优先级

当我们对同一个 HTML 元素进行多次 CSS 样式定义时，这些样式将层叠起来，就像形成了一个新的虚拟的样式表。层叠规则如下，数字越大优先级越高。

  1. Browser default 浏览器默认样式
  2. External style sheet 和 Internal style sheet (in the head section) 注意：外部样式表和内部样式表在头部书写的顺序也会影响优先级，写在后面的优先级高。
  3. Inline style
  4. 使用 !important

同一个 HTML 元素应用多个 CSS class 重复定义相同属性时，样式规则写在最后的覆盖前面所有，与 class 书写顺序无关。

<style>
.a1{color:red;}
.a2{color:green;}
.a3{color:blue;}
</style>
<p class="a3 a1 a2">Hello world</p>
<!--文字颜色最终为blue-->