Web笔记 ·

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速查手册

CSS 框模型 (Box Model)

css速查手册

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 教程 (辅助)

 

参与评论