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
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
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
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 框模型 (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 教程 (辅助)
预览
除特别注明外，本站所有文章均为 windcoder 原创，转载请注明出处来自： csssuchashouce
Loading comments...
预览
暂无数据