Web笔记 · · By/蜜汁炒酸奶




基础 Comments

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
[toggle hide="no" title="Comments " color=""]
/* Comments */
@media type {
  selector {
    property: value;
Note: media type is optional [/toggle]

内联样式 (Inline Style)

<tag style="property: value;">

内部样式表( Embedded Style)

[toggle hide="no" title="内部样式表( Embedded Style)" color=""]
    <style type="text/css">
      selector { property: value; }

外部样式表 (External Style Sheet)

[toggle hide="no" title="外部样式表 (External Style Sheet)" color=""]
    <link rel="stylesheet"
     type="text/css" href="style.css" />

选择器 Selectors

[toggle hide="no" title="选择器 Selectors" color=""]
选择器 描述
* All elements
tag All tag elements
tag * All elements within tag
tag tag2 tag2 elements within tag
tag, tag2 All tag and tag2 elements
tag > tag2 tag2 is a child of tag
tag + tag2 tag2 preceded by tag
.class Elements with class ‘class’
tag.class All tags with class ‘class’
#id Element with id ‘id’
tag#id Tag with id ‘id’


包含CSS 伪类 (Pseudo-classes)伪元素(Pseudo-elements)两类 [toggle hide="no" title="Pseudo-selectors" color=""]
选择器 描述
​:active Adds style to active element
:after Adds content after element
:before Ads content before element
:first­-child Adds style to first child
:first-letter Adds style to first character
:first-line Adds style to first line
:focus Adds style to focused element
:hover Adds style when mouse is over
:link Adds style to unvisited link
:visited Adds style to visited link

文本样式 Text

包含CSS 文本属性CSS 字体属性 [toggle hide="no" title="文本样式 Text" color=""]
参数 详情
font-family Specifies the font family
font-size Specifies the font size
font-style normal | italic | oblique | inherit
font-variant normal | small-caps | inherit
font-weight normal | bold | bolder | lighter | int (100- 900) | inherit
color Sets the color of text
line-height normal | int | % | inherit
text-align left | right | center | justify | inherit
text-decoration none | underline | overline | line-through | blink | inherit
text-indent int | % | inherit
text-transform none | capitalize | uppercase | lowercase | inherit
vertical-align int | % | baseline | sub | super | top | text-top middle | bottom | text-bottom | inherit
​white-space normal | nowrap | pre | pre-line | pre-wrap| inherit
word-spacing normal | length | inherit
[/toggle] css速查手册

CSS 框模型 (Box Model)


CSS 框模型的相关属性 Boxes

[toggle hide="no" title="Boxes" color=""]
参数 详情
  margin margin-top margin-right margin-bottom margin-left
  padding   ​padding-top padding-right padding-bottom padding-left
  border   border-top border-right border-bottom border-left
  border-color   border-top-color border-right-color border-bottom-color border-left-color
  border-style   border-top-style border-right-style border-bottom-style border-left-style
border-width   border-top-width border-right-width border-bottom-width border-left-width

Size and colors

[toggle hide="no" title="Size and colors" color=""]
参数 详情
  Relative sizes   em | rem | ex | ch vw | vh | vmin | vmax | %
  Absolute sizes   cm | mm | in px | pt | pc
  Colors   Hex #ff00ff RGB rgb(255,0,255)


[toggle hide="no" title="Positioning" color=""]
参数 详情
position absolute | fixed | relative | static | inherit
  float   left | right | none | inherit
  top, right, bottom, left   Sets the offset from the edge
  clear   left | right | both | none | inherit
  display   Specifies element placing in the document flow​
  overflow   visible | hidden | scroll | auto | inherit
  visibility   visible | hidden | collapse | inherit
  z-index   auto | int | inherit


[toggle hide="no" title="Dimensions" color=""]
​参数 详情
height auto | int | % | inherit
max-height none | int | % | inherit
max-width none | int | % | inherit
min-height int | % | inherit
min-width int | % | inherit
width auto | int | % | inherit


[toggle hide="no" title="Other" color=""]
参数 详情
background Format: background (color) (image) (repeat) (position)
cursor Set the type of cursor
quotes Set type of quotation marks



Toptal's Quick and Practical CSS Cheat Sheet (主要,英文原版可见此处)

CSS 教程 (辅助)