最近发现一个不错的英文版css速查手册，整理出来与小伙伴们分享下。不多说了，上代码参考地址详情见附录
语法（Syntax）
基础 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=""]
<head> <style type="text/css"> selector { property: value; } </style> </head>[/toggle]
外部样式表 （External Style Sheet）
[toggle hide=“no” title=“外部样式表 （External Style Sheet）” color=""]
<head> <link rel="stylesheet" type="text/css" href="https://windcoder.com/style.css" /> </head>[/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 框模型 (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 |[/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 教程 (辅助)
评论