CSS 备忘单

选择器

元素选择器

p {
  /* 样式规则 */
}

类选择器

.class-name {
  /* 样式规则 */
}

ID 选择器

#id {
  /* 样式规则 */
}

子选择器

parent > child {
  /* 样式规则 */
}

后代选择器

ancestor descendant {
  /* 样式规则 */
}

相邻兄弟选择器

element + sibling {
  /* 样式规则 */
}

通用兄弟选择器

element ~ sibling {
  /* 样式规则 */
}

盒模型

/* 内容宽度 + 内边距 + 边框 + 外边距 = 元素宽度 */

宽度和高度

width: value;
height: value;

内边距

padding: top right bottom left;

边框

border: width style color;

外边距

margin: top right bottom left;

文本样式

字体大小

font-size: value;

字体样式

font-style: value;

字体粗细

font-weight: value;

文本颜色

color: value;

文本水平对齐

text-align: value;

文本垂直对齐

vertical-align: value;

背景样式

背景颜色

background-color: value;

背景图片

background-image: url("path/to/image");

背景重复

background-repeat: value;

背景大小

background-size: value;

定位与布局

相对定位

position: relative;

绝对定位

position: absolute;

固定定位

position: fixed;

浮动

float: value;

清除浮动

clear: value;

布局

display: value;

动画与过渡

动画

animation: name duration timing-function delay iteration-count direction fill-mode;

过渡

transition: property duration timing-function delay;

响应式设计

@media screen and (max-width: value) {
  /* 样式规则 */
}

参考链接

• CSS 参考手册
• CSS 教程