CSS 基础

CSS(层叠样式表)用来规定 HTML 文件的呈现形式(外观和格式编排)。

问题导向清单
问题解决方案
定义样式使用样式声明语句:属性:值;
将样式直接应用于元素用 style 属性创建元素内嵌样式
创建可用于多个 HTML 文件的样式创建一个外部样式表文件(.css),并用 link 元素引用它
确定元素将使用什么样式属性对样式来源适用层叠规则,同级样式发生冲突时计算并比较样式的具体程度。
改变正常的样式层叠次序使用重要样式声明语句:属性:值!important;
使用父元素的样式属性使用属性继承。
根据一条属性确定另一条属性的值使用相对度量单位。
动态计算属性值使用 calc 函数。

CSS 规则

CSS 语言的基本组成单位是 CSS 规则。一个 .css 文件就是一个 CSS 规则集(rule-set)。

一条 CSS 规则由 选择器(selector) + 一组样式声明语句 组成:

						
selector {
  property1: value1;
  property2: value2;
  property3: value31 value32 value33;	
}

h1 {
  color: red;
  font-size: 5em;
  text-align: center;
  border: 1px solid black;
}
						
					
  • 选择器指定了需要添加样式的 HTML 元素。
  • 样式声明语句由 CSS 属性名:属性值; 组成。每种属性都控制着元素外观方面的特性。
  • 多条样式声明语句由 { } 包裹,紧跟 选择器 后面。
  • 一个 CSS 样式表(.css 文件)可以包含很多个 CSS 规则。

添加 CSS

让 CSS 规则能够应用到 HTML 文件中,有三种方式可以实现:

  • 使用元素内嵌样式

    使用全局属性 style 定义样式。style 属性只影响它所属的元素(元素级别)。

  • 使用文档内嵌样式

    使用 style 元素定义样式。style 元素只影响它所在的 HTML 文档(文档级别)。

  • 使用外部样式表

    使用 link 元素链接外部样式表。被 link 元素链接的外部样式表影响其所链接的所有站点(站点级别)。

						

<head>
  
  <link rel="stylesheet" href="default.css">
  
  <style type="text/css">
    selector {
      property: value;
    }
  </style>
</head>
<body>
  <p style="property1:value1; property2:value2;">段落。<p>
</body>
						
					

Selector

选择器(selector)用来指定网页中需要添加样式的 HTML 元素。选择器所选择的元素,叫做“选择器的对象”。

基本选择器

通配选择器(Universal selector)

选择所有元素。(可选)可以将其限制为特定的名称空间或所有名称空间。

在 CSS 中,一个星号“*”就是一个通配选择器.它可以匹配任意类型的 HTML 元素。

  • 在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果。比如,*.warning 和 .warning 的效果完全相同。
  • 在 CSS3 中,星号“*”可以和命名空间组合使用。
						
* {
  属性名: 属性值;
}

/*
 * 匹配 ns 命名空间下的所有元素
 */
ns|* {
  属性名: 属性值;
}

/*
 * 匹配所有命名空间下的所有元素
 */
*|* {
  属性名: 属性值;
}

/*
 * 匹配所有没有命名空间的元素
 */
|* {
  属性名: 属性值;
}
						
					

元素选择器(Type selector)

按照给定的节点名称(元素名),选择所有匹配的元素。

CSS 元素选择器(也称为类型选择器)通过 node 节点名称匹配元素。因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该 HTML 文件中所有此类型的元素。

						
elementname {
  属性名: 属性值;    //样式声明
}
						
					

类选择器(Class selector)

按照给定的 classname,选择所有匹配的元素。也就是说,选择具有 class 属性且其属性值为 classname 的所有元素。

						
.classname {
  属性名: 属性值;
}
						
					

ID 选择器(ID selector)

按照给定的 idname,选择一个与之匹配的元素。也就是说,选择具有 id 属性且其属性值为 idname 的唯一元素。在一个 HTML 文件中,属性 id 的属性值具有唯一性,即不重复。

						
#idname {
  属性名: 属性值;
}
						
					

属性选择器(Attribute selector)

按照给定的属性,选择所有匹配的元素。

语法:

  • [attr]

    选择所有具有 attr 属性的元素,不论这个属性的属性值是什么。

  • [attr=value]
  • [attr~=value]
  • [attr|=value]
  • [attr^=value]
  • [attr$=value]
  • [attr*=value]

分组选择器(Grouping selectors)

选择器列表(Selector list)

如果有多个使用相同样式的 CSS 选择器,那么这些单独的选择器之间用逗号“,”隔开,组成一个选择器列表,这样,相同规则就可以应用到多个选择器上。

						
h1 {
  font-size: 5em;	
}

h2 {
  font-size: 4em;
}

h3 {
  font-size: 3em;
}

h4 {
  font-size: 2em;
}

h1, h2, h3, h4, .special {
  color: red;
  text-align: center;
}

h1,
h2,
h3,
h4,
.special {
  color: red;
  text-align: center;
}
						
					

说明:

  • 空格可以在逗号前或后,每个选择器都另起一行也是允许的。
  • 当使用选择器列表时,如果某个选择器无效 (存在语法错误),那么整条规则都会被忽略。

组合器(Combinators)

后代组合器(Descendant combinator)

后代(空格)组合器选择前一个元素的后代节点。

直接子代选择器(Child combinator)

直接子代(>)组合器选择前一个元素的直接子代的节点。

一般兄弟组合器(General sibling combinator)

一般兄弟(~)组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。

紧邻兄弟组合器(Adjacent sibling combinator)

紧邻兄弟(+)组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。

列组合器(Column combinator)

列(||)组合器选择属于某个表格行的节点。

伪选择器(Pseudo)

伪类

伪类(:)选择器支持按照未被包含在文档树中的状态信息来选择元素。

						
/*
 * a:visited 匹配所有已经被访问过的 a 元素
 */
a:visited {
  color: red;
}
						
					

伪元素

伪元素(::)选择器用于表示无法用 HTML 语义表达的实体。

						
/*
 * p::first-line 匹配所有 p 元素的第一行
 */
p::first-line {
  color: red;
}