Toptal 的快速实用的 CSS 备忘单

句法

盒子模型

/* 注释 */

@媒体类型 {

选择器 {

适当的价值;

}

}

注意：媒体类型是可选的

内联样式

<标签>

嵌入式风格

<头部>

<style type="text/css">

选择器 { 属性：值； }

</style>

</head>

外部样式表

<头部>

<link rel="样式表"

type="text/css" href="style.css" />

</head>

盒子

利润

边距顶部
右边距
边距底部
左边距

选择器

填充

填充顶部
填充权
填充底部
向左填充

*

所有元素

标签

所有标签元素

边境

边框顶部
右边界
边框底部
左边框

标签 *

标签内的所有元素

标记标记2

标签内的 tag2 元素

边框颜色

边框顶部颜色
右边框颜色
边框底色
左边框颜色

标记，标记2

所有 tag 和 tag2 元素

标签 > 标签2

tag2 是 tag 的孩子

边框样式

边框顶部样式
右边框样式
边框底部样式
左边框样式

标签 + 标签2

tag2 前面有标签

。班级

具有类“类”的元素

边框宽度

边框顶部宽度
右边框宽度
边框底部宽度
左边框宽度

标签类

所有带有“类”类的标签

＃ID

id 为“id”的元素

尺寸和颜色

标签#id

带有 id 'id' 的标签

相对尺寸

时间 | 雷姆 | 前 | ch

大众 | vh | 最小 | 最大 | %

伪选择器

：积极的

为活动元素添加样式

绝对尺寸

厘米 | 毫米 | 在

像素 | 点 | 个人电脑

：后

在元素之后添加内容

：前

元素前的广告内容

颜色

十六进制 #ff00ff

：第一个孩子

为第一个孩子添加样式

RGB RGB(255,0,255)

:首字母

为第一个字符添加样式

定位

：第一行

将样式添加到第一行

位置

绝对 | 固定 | 相对 | 静态 | 继承

：重点

为焦点元素添加样式

：徘徊

鼠标悬停时添加样式

漂浮

离开 | 对 | 没有 | 继承

：关联

为未访问的链接添加样式

:访问过

为访问的链接添加样式

右上，
左下方

设置从边缘的偏移量

文本

字体系列

指定字体系列

清除

离开 | 对 | 两者| 没有 | 继承

字体大小

指定字体大小

字体样式

正常 | 斜体 | 斜 | 继承

展示

指定文档流中的元素放置

字体变体

正常 | 小型股| 继承

溢出

可见 | 隐藏 | 滚动 | 汽车 | 继承

字体

-重量

正常 | 粗体 | 更大胆 | 打火机| 整数 (100- 900) | 继承

能见度

可见 | 隐藏 | 崩溃 | 继承

颜色

设置文本的颜色

线高

正常 | 整数| % | 继承

z-index

汽车 | 整数| 继承

文本对齐

离开 | 对 | 中心 | 证明 | 继承

方面

高度

汽车 | 整数| % | 继承

文本-

装饰

没有 | 下划线 | 上划线 | 直通 | 眨眼 | 继承

最大高度

没有 | 整数| % | 继承

最大宽度

没有 | 整数| % | 继承

文本缩进

整数| % | 继承

最小高度

整数| % | 继承

文本-

转变

没有 | 大写 | 大写 | 小写 | 继承

最小宽度

整数| % | 继承

宽度

汽车 | 整数| % | 继承

垂直的

-对齐

整数| % | 基线 | 子 | 超级 | 顶部 | text-top 中间 | 底部 | 文字底部 | 继承

其他

背景

格式：

背景（颜色）（图像）

（重复）（位置）

白色的

-空间

正常 | 无包装 | 预 | 前线 | 预包装| 继承

光标

设置光标类型

字间距

正常 | 长度 | 继承

引号

设置引号类型