本笔记诞生于很久前零零散散记录的笔记，拿出来发布一下。
HTML 是元素的标记语言。
CSS 被用来 样式和网页布局的。
样式和布局都有哪些呢？
通过 DOM 树的节点和样式节点结合，生成渲染树，然后交给浏览器进行渲染从而使得外观发生变化。
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;
// 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.
http://cssreference.io/positioning/
块级元素 (Block)
新开始一行并且尽可能撑满容器，p,form,header,footer,section
设置块级元素的 width 可以防止它从左到右撑满整个容器
行内元素 (inline)
包裹一些文字，而不会打乱段落的布局，a,span
none
script 默认 display:none,visibility:hidden 是占据空间
盒模型
属性
三，层叠与继承
既然是层叠，就要有层叠的规律
这是一种兼容 CSS 语法的新语言。主要用于提升代码的可维护性。
至于其他 less 之类大同小异。只选取了功能最强大的部分进行间接。
Use soft tabs (2 spaces) for indentation
Prefer dashes over camelCasing in class names.
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 混用
只要是可维护的好代码，并不需要拘泥于用什么风格
ChangeLog: