专栏首页WindCodercss速查手册

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 条评论
登录 后参与评论

相关文章

  • 并发编程学习笔记01-Java并发机制的底层原理之volatile

    Volatile是轻量级的synchronize,在多处理器开发中保证了共享变量的“可见性”。

    汐楓
  • 数组版通讯录-C++

    汐楓
  • 个人常用语句笔记-Java

    JDK1.7的新语法,这种try语句可以自动执行资源关闭过程,无需再在finally中显式关闭流。

    汐楓
  • 【同行说技术】致前端:react开发的5个资源合集

    本文作者:IMWeb seagirl 原文出处:IMWeb社区 未经同意,禁止转载 ? 现在最热门的前端框架,毫无疑问是React。在基于React的...

    IMWeb前端团队
  • 第76天:jQuery中的宽高

    2、window对象可以省略,比如alert()也可以写成window.alert()

    半指温柔乐
  • Caffe: Could not find PROTOBUF Compiler(Profobuf 3.0 above)

    在用cmake生成Caffe工程文件的时候,如果你使用Protobuf 3.0以上的版本,cmake可能会产生如下的报错: CMake Error at cm...

    用户1148648
  • 推荐系统评价:NDCG方法概述

    用户1737318
  • 再议 C++ 11 Lambda表达式

    C++ 11 标准发布,各大编译器都开始支持里面的各种新特性,其中一项比较有意思的就是lambda表达式。

    owent
  • 有一种桌面,叫程序员的电脑桌面.....

    老九君
  • harbor使用自签名证书实现https

    前面说了怎么搭建harbor仓库,这里讲一讲harbor实现https访问,因为只需要内网访问,没必要去申请一个ssl证书,所以我就用openssl颁发自签名证...

    kevinfaith

扫码关注云+社区

领取腾讯云代金券