关于 CSS 你应该知道的一切

0x00 前言

本笔记诞生于很久前零零散散记录的笔记,拿出来发布一下。

0x01 CSS 是如何工作的?

HTML 是元素的标记语言。

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

样式和布局都有哪些呢?

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

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

0x02 CSS 基本语法

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

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

2.1 CSS 规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// 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.
:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:focus-within
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
// 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

http://cssreference.io/positioning/

Display

Box Model

块级元素 (Block)
新开始一行并且尽可能撑满容器,p,form,header,footer,section
设置块级元素的 width 可以防止它从左到右撑满整个容器
行内元素 (inline)
包裹一些文字,而不会打乱段落的布局,a,span
none
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

OOCSS 与 BEM 混用

只要是可维护的好代码,并不需要拘泥于用什么风格

5.1 圣杯

0xEE 参考链接


ChangeLog:

  • 2017-12-20 初始化本文