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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT派

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

33110
来自专栏hightopo

原 荐 WebGL 3D 电信机架实战之数据

24060
来自专栏王磊的博客

Unity3D默认的快捷键

shift +方向键             向“向方向键前进” Windows系统Unity3D中的快捷键 组合键键功能 File 文件 Ctrl ...

38770
来自专栏程序员宝库

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

16430
来自专栏大壮

iOS 动画(理论篇)

17850
来自专栏wOw的Android小站

[iOS] 圆形进度条及计时功能

用的贝塞尔曲线UIBezierPath来画,这个类支持画很多种形状,可以单独去尝试。

31820
来自专栏GIS讲堂

Arcgis for js加载天地图

天地图的切片地图可以通过esri.layers.TiledMapServiceLayer来加载,在此将之进行了一定的封装,如下:

79320
来自专栏Web项目聚集地

Javascript将HTML转成PDF并下载「支持多页」

由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览...

43320
来自专栏hightopo

WebGL 3D 工业隧道监控实战

15420
来自专栏carven

利用canvas实现毛笔字帖(一)

最近在慕课网上找到了很好的canvas教程, 来自 @liuyubobobo 的 学写一个字 canvas绘图教程 在 @liuyubobobo 老师的系列ca...

21920

扫码关注云+社区

领取腾讯云代金券