Skip to content

Latest commit

 

History

History
193 lines (128 loc) · 4.83 KB

readme.md

File metadata and controls

193 lines (128 loc) · 4.83 KB

CSS 参考

资源:http://css.doyoe.com/

概述

CSS(Cascading Style Sheets,层叠样式表)指的是一系列的 CSS 样式。样式定义了 HTML 元素的显示规则(如 字体、颜色、尺寸等)。

CSS 的最新标准为 CSS 2.1,CSS3 标准还在制定和发展中。

内容与表现

早期的 HTML 中,仅有 <h*> <p> 等基本的元素,它们不仅描述了页面的内容,还决定了内容的外观表现。开发人员开始不断地向 HTML 中添加新的标签(如 <b> <center> 等),用来实现更丰富的外观表现。这些新的标签带来了更丰富的样式,却使网页变得杂乱和臃肿,难以修改和维护。

为了解决 HTML 内容和表现关联较强的问题(耦合),开发人员将 HTML 内容的表现部分独立出来,以样式表的形式来定义 HTML 内容的表现。

使用样式

在网页中使用样式,有三种方法:

1.内联样式

为元素定义 style 属性,即可使用内联样式:

<p style="color:red;">段落的文本显示为红色</p>

内联样式只对当前的元素有效。

2.内部样式

<head> 元素内定义 <style> 标签,并在其中添加样式规则:

<style>
  p{
    color:red;
  } // 当前页面中的所有段落中的文本均显示为红色
</style>

在内部样式中,可以为当前页面中的任意元素定义样式规则。

3.外部样式

外部样式的规则记录在一个 .css 文件中,并通过 <head> 元素中的 <link> 元素引入到网页中:

<link rel="stylesheet" href="main.css" />

在外部样式中,可以为所有引用该样式文件的页面中的任意元素定义样式规则。

注意:

建议所有的样式规则都写在外部样式表中,这种方式有许多益处:

  1. 所有样式都在独立的文件中,方便修改和查找
  2. 外部样式表可以被多个 HTML 文档引用,其中的样式可以在多个页面共享
  3. 在 HTML 中可以简单地切换外部样式文件(网站改版或换肤功能)

层叠、优先权与继承

HTML 元素同时被多组 CSS 指定了样式,称为 层叠

// style.css
p {
  color: red;
}
// index.html
...
<link rel="stylesheet" href="style.css" />
<style>
  p {
    color: yellow;
  }
</style>
...
<p style="color: blue;">some text</p>

这段代码中的 <p> 元素同时受到三组颜色属性的控制,它的文本会是什么颜色呢?

在多组样式同时作用于一个元素时,会依据 优先权 来选择应用哪一个样式的规则。

网页中同时存在的样式可能有三类,共 5 组:

  1. 浏览器默认样式
  2. 网页定义的样式(包括 内联样式、内部样式和外部样式)
  3. 用户自定义样式(通过 custom.css 或通过浏览器插件设置的样式)

参考:user stylesheet

优先权从高到低依次为:

  1. 用户自定义样式
  2. 内联样式
  3. 内部样式
  4. 外部样式
  5. 浏览器默认样式

附加规则:

  • 同一个 style 属性中,同一个内部或外部样式中的相同或不同样式组中,后定义的样式规则优先权高
  • 如果页面通过 <link> 元素引用了多个外部样式文件,最后引用的样式文件优先权高
  • 内部样式和外部样式的位置?
  • @import 引入的样式?

继承 是来自面向对象的概念,CSS 中的继承有如下特点:

  • 外部元素(父元素,祖先元素)中定义的样式规则会同时应用于内部元素(子元素,后代元素)
  • 子元素中定义的样式规则会取代父元素中定义的同一规则

语法规则

CSS 规则 的语法如下:

selector {
  declaration1;
  declaration2;
  ...
  declarationN;
}

上面的代码称为一条 CSS 规则。每个规则分为两个部分:

  1. 选择器
    选择器通过一系列的规则,指定了应用当前样式规则的目标元素。
  2. 声明列表
    列表中包含了一系列的样式声明。样式声明列表需要包含在 {}中。

样式声明 由属性和值两部分组成:

property: value;
  • 属性名和属性值通常为小写字母;
  • 属性名通常由小写字母组成,也可以包含 -
  • 属性值可以为数字、小写字母、字符串或其他形式;
  • 每条样式声明都必须以 ; 结尾。

CSS 注释 的语法如下:

/* CSS 单行注释 */

注释可以是单行的,也可以是多行的。

/*
* CSS
* 多行注释
*/

颜色和单位

参考:color units

选择器

参考:selectors

样式属性

参考:properties

声明

参考:declaration

专题

内容与表现分离

reset.css or Normalize.css

响应式

CSS 处理器等

UI 组件库

经典案例