css速查手册
最近发现一个不错的英文版css速查手册，整理出来与小伙伴们分享下。不多说了，上代码~参考地址详情见附录~
语法（Syntax）
基础 Comments
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }Comments
/* Comments */
@media type {
selector {
property: value;
}
}Note: media type is optional
内联样式 （Inline Style）
<tag style="property: value;">内部样式表( Embedded Style)
内部样式表( Embedded Style)
<head>
<style type="text/css">
selector { property: value; }
</style>
</head>外部样式表 （External Style Sheet）
外部样式表 （External Style Sheet）
<head>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>选择器 Selectors
选择器 Selectors
选择器 | 描述 |
|---|---|
* | 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’ |
Pseudo-selectors
包含CSS 伪类 (Pseudo-classes)和伪元素(Pseudo-elements)两类
Pseudo-selectors
选择器 | 描述 |
|---|---|
: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 字体属性
文本样式 Text
参数 | 详情 |
|---|---|
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 |
CSS 框模型 (Box Model)
CSS 框模型的相关属性 Boxes
Boxes
参数 | 详情 |
|---|---|
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
Size and colors
参数 | 详情 |
|---|---|
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) |
Positioning
Positioning
参数 | 详情 |
|---|---|
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 |
Dimensions
Dimensions
参数 | 详情 |
|---|---|
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 |
Other
Other
参数 | 详情 |
|---|---|
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 教程 (辅助)