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

css速查手册

最近发现一个不错的英文版css速查手册,整理出来与小伙伴们分享下。不多说了,上代码~参考地址详情见附录~

语法(Syntax)

基础 Comments

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

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

[toggle hide=“no” title=“Comments " color=”"]

/* Comments */
@media type {
  selector {
    property: value;
  }
}
1
2
3
4
5
6

Note: media type is optional [/toggle]

内联样式 (Inline Style)

<tag style="property: value;">
1

内部样式表( Embedded Style)

[toggle hide=“no” title=“内部样式表( Embedded Style)” color=“”]

<head>
    <style type="text/css">
      selector { property: value; }
    </style>
  </head>
1
2
3
4
5

[/toggle]

外部样式表 (External Style Sheet)

[toggle hide=“no” title=“外部样式表 (External Style Sheet)” color=“”]

<head>
    <link rel="stylesheet"
     type="text/css" href="style.css" />
  </head>
1
2
3
4

[/toggle]

选择器 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’            |

[/toggle]

Pseudo-selectors

包含**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    |

[/toggle]

文本样式 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速查手册

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 |

[/toggle]

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]

Positioning

[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]

Dimensions

[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]

Other

[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                            |

[/toggle]

附录

参考资料

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

CSS 教程 (辅助)

预览
Loading comments...
0 条评论

暂无数据

example
预览