# 0x00 前言


# 0x01 CSS 是如何工作的?

HTML 是元素的标记语言。

CSS 被用来 样式和网页布局的。


  • 字体
  • 颜色
  • 大小
  • 内容间距
  • 多列
  • 动画

通过 DOM 树的节点和样式节点结合,生成渲染树,然后交给浏览器进行渲染从而使得外观发生变化。

# 0x02 CSS 基本语法

CSS 基本语法有三个组成部分:

  1. 规则
  2. 选择器
  3. 属性

# 2.1 CSS 规则

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;

// @规则

@import @charset @media @font-face
  /* in shorthand like padding and margin, the values are applied
in the order top, right, bottom, left (the same order as an analog clock). There are also other
shorthand types, for example two values, which set for example
the padding for top/bottom, then left/right */ padding: 10px 15px 15px 5px;

# 2.2 选择器

// Simple selectors: Match one or more elements based on element type, class, or id.
/* All div elements are blue */
div {
    color: blue;

h1 {
    color: red;
    text-shadow: 1px 1px 1px black;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.1));
    padding: 3px;
    text-align: center;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), inset -2px -2px 5px rgba(255,255,255,0.5);

// Attribute selectors: Match one or more elements based on their attributes/attribute values.
/* All elements with the attribute "data-vegetable"
are given green text */

[data-vegetable] {
    color: green;

/* All elements with the attribute "data-vegetable"
with the exact value "liquid" are given a golden
background color */

[data-vegetable="liquid"] {
    background-color: goldenrod;

/* All elements with the attribute "data-vegetable",
containing the value "spicy", even among others,
are given a red text color */

[data-vegetable~="spicy"] {
    color: red;

// Pseudo-classes: Match one or more elements that exist in a certain state, such as an element that is being hovered over by the mouse pointer, or a checkbox that is currently disabled or checked, or an element that is the first child of its parent in the DOM tree.
// Pseudo-elements: Match one or more parts of content that are in a certain position in relation to an element, for example the first word of each paragraph, or generated content appearing just before an element.


// Combinators: These are not exactly selectors themselves, but ways of combining two or more selectors in useful ways for very specific selections. So for example, you could select only paragraphs that are direct descendants of divs, or paragraphs that come directly after headings.

A, B	匹配 A 或 B
A B	    匹配 A 里面的 B
A > B	匹配 A 里面的直属 B
A + B	匹配 A 下一个兄弟节点 B
A ~ B	匹配 A 的下一群兄弟节点 B

// Multiple selectors: Again, these are not separate selectors; the idea is that you can put multiple selectors on the same CSS rule, separated by commas, to apply a single set of declarations to all the elements selected by those selectors.

# 2.3 属性

# Position


# Display

# Box Model

块级元素 (Block)
设置块级元素的 width 可以防止它从左到右撑满整个容器
行内元素 (inline)
script 默认 display:none,visibility:hidden 是占据空间





# 0x03 CSS 新语法

# 3.1 Flex Layout

# 3.2 Grid Layout

# 0x04 SCSS

这是一种兼容 CSS 语法的新语言。主要用于提升代码的可维护性。

至于其他 less 之类大同小异。只选取了功能最强大的部分进行间接。

# 4.1 OOCSS / BEM / 我的实践

# 4.1 如何组织 SCSS 代码 — 布局篇

# 4.2 如何组织 SCSS 代码 — 组件篇

# 4.2 BEM

# 0x05 CSS 规范

  • https://github.com/airbnb/css

  • Use soft tabs (2 spaces) for indentation

  • Prefer dashes over camelCasing in class names.

    • Underscores and PascalCasing are okay if you are using BEM (see OOCSS and BEM below).
  • Do not use ID selectors

  • When using multiple selectors in a rule declaration, give each selector its own line.

  • Put a space before the opening brace { in rule declarations

  • In properties, put a space after, but not before, the : character.

  • Put closing braces } of rule declarations on a new line

  • Put blank lines between rule declarations



# 5.1 圣杯

# 0xEE 参考链接


  • 2017-12-20 初始化本文