css速查

总述

CSS主要描述网页内容的样式，其规则为：

1
2
3
4
5
6
p /* 选择器，选择一个需要修改的HTML元素 */
{
    /* 声明 */
    color: red;
    font-size: 12px;
}

目录在右侧

创建

外部样式表

在HTML文件外部的样式表，以 .css 为后缀进行保存。在HTML中则需要进行引用：

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="name.css">
</head>

再在css文件内直接指定样式。

1
2
p {margin-left:20px;}
body {background-image:url("/images/name.gif");}

内部样式表

使用 <style> 标签在文档头部定义内部样式表

1
2
3
4
5
6
<head>
    <style>
        p {margin-left:20px;}
        body {background-image:url("images/name.gif");}
    </style>
</head>

内联样式

在标签内使用 style 属性进行指定。

1
<p style="margin-left:20px">这是一个段落。</p>

大体优先级为内联样式 > 内部样式 > 外部样式。但如果将外部样式放在内部样式后面，那么外部样式将覆盖内部样式。

background

指定HTML元素的背景

1
2
3
4
5
6
7
8
9
10
body
{
    background-color: "#ff0000"; /* 指定颜色 */
    background-image: url("name1.gif"), url("name2.gif"); /* 指定背景图*/
    background-repeat: repeat-x; /* 指定平铺属性，以及其重复的方式 */
    background-attachment: local, scroll; /* 指定背景图像是否随区块滚动*/
    background-position: top, left /* 指定图片位置 */
}
/* 简写形式，属性值顺序与上面一致 */
body{background: #ff0000 url("name1.gif"),url("name2.gif") repeat-x local, scroll top, left}

repeat属性

单值语法（可以理解为双值语法的缩写）

值 说明
repeat-x repeat-y 水平/垂直方向重复
repeat 在范围内全部重复
space 自动分配位置，不会裁剪
round 允许在space的基础上，当尺寸增长时被重复的图像将会被伸展
no-repeat 图像不会被重复

双值语法（第一个值表示水平重复行为，第二个值表示垂直重复行为）
repeat no-repeat 相当于 repeat-x ，以此类推。

attachment属性

值 说明
fixed 相对视口固定，不会随着元素内容滚动
local 背景相对于元素的内容固定，随着元素内容滚动
scroll 背景相对元素本身固定，不随着元素内容滚动

可以使用逗号分隔不同的属性值以支持多张背景的图片。

position属性

一个字： center，top，bottom，left，right，指定其放在哪个边界。也可以是 <length> 或 <percentage>，指定相对左边界的x坐标。y坐标默认为50%。
两个字或四个字： 一个定义x坐标，另一个定义y坐标。可以指定边界，并通过 <length> 或 <percentage>指定偏移量。

文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
p
{
    color: rgb(255,0,0); /* 指定颜色 */
    font-family: arial; /* 指定字体 */
    font-size: 10px; /* 指定字体大小 */
    font-style: normal; /* 设置斜体 */
    font-weight: normal; /* 设置粗体 */
    font-variant: normal; /* 指定多种属性 */
    font-stretch: normal; /* 指定字体的扩展与压缩 */
    text-indent: 0; /* 指定文本前面缩进的长度 */
    text-align: left; /* 指定文本对齐的方式 */
    text-decoration: none; /* 给文本添加修饰 */
    text-transform: none; /* 指定文本的大小写字母 */
    text-shadow: 4px 4px 5px red; /* 指定阴影 */
    text-overflow: ellipsis; /* 指定溢出状况 */
    line-height: 1.5; /* 指定行高 */
    line-break: auto; /* 指定中文文本行 */
    hyphens: none; /* 指定是否使用换行符 */
    letter-spacing: 2px; /* 指定字母间距 */
    word-spacing: 4px; /* 指定单词间间距 */
    white-space: normal; /* 指定元素内空白的处理方式 */
}

font-family属性

css定义了5种泛型字体名称，注意：在不同的浏览器中显示的结果可能不同。在确保均能显示的情况下，可以指定具体的名称。也可指定多种字体，以选用备用字体，中间用逗号分隔。

值 说明 对应字体 示例
serif 有衬线字体 Georgia Times New Roman

This is a kind of font.
sans-serif 无衬线字体 Arial Trebuchet MS Verdana

This is a kind of font.
monospace 等宽字体 Courier New Courier

This is a kind of font.
cursive 手写字体

This is a kind of font.
fantasy 装饰字体

This is a kind of font.

font-size属性

设置字体大小有多种单位。

值 说明
px 相对电脑显示器屏幕的长度单位
em 相对于当前对象内文本的字体尺寸，其值不固定，会继承父级元素的字体大小。任意浏览器默认字体高为16px，因此未调整时为1em=16px
rem 相对于HTML根元素的相对大小

font-style属性

值 说明
normal 设置为普通字体
italic 若字体斜体版本可用，则将文本设置为斜体版本。若不可用则模拟斜体
oblique 将普通文本倾斜的样子模拟为斜体运用

font-weight属性

值 说明
normal 普通字体
bold 加粗字体
lighter bolder 加细，加粗。也可以直接填写100~900的粗体值进行精细控制

font-variant属性

用于设置大写字母的字体显示文本，由多个属性简写而来。

值 说明
normal 普通字体
small-caps 小型大写字母

This is a Kind of Font.

font-variant-east-asian

控制东亚文字（中文和日语）的替代字形使用。

值 说明
normal 不使用替代字形
ruby 强制使用ruby字符。有的会粗一点
simplified traditional 中文简繁体转换

font-variant-ligatures

ligatures指将两个字母连写的方式。

值 反义 说明
normal / 依据字体、语言等情况决定是否连写
none / 不允许连写
common-ligatures no-common-ligatures 较正常的连写的部分在这里也会连写，即normal的连写方式，如 fi ffi th 等
discretionary-ligatures no-discretionary-ligatures 特殊连写
historical-ligatures no-historical-ligatures 历史上曾用的连写方式
contextual no-contextual 字母将会视其周围的字母样式进行样式调整

font-variant-numeric

设置数字和分数的样式。

值 说明 示例
normal 正常数字

2020
ordinary 其余与normal一样，但英语序数词会有所差别

1st. 500
slashed-zero 给0加斜划线

2020
lining-nums 使数字都在一条基线上

015527
oldstyle-nums 与上一个相反，欧洲旧时的数字写法，数字错落有致

015527
proportional-nums 数字大小不同

015527
tabular-nums 与上一个相反，数字大小相同，使其方便排列在表格中

015527
diagonal-fractions 使分子和分母更小，被斜线分隔

1/2 0.5
stacked-fractions 使分子和分母更小，被水平线分隔

1/2 0.5

font-variant-position

用于标记是否是上下标。

值 说明
normal 正常文字
sub 下标
super 上标

font-variation-settings

用于字体变形，通过更低层次进行控制。通过开启或关闭不同的OpenType字体特性。

font-stretch属性

用于伸展文本，可以用关键字值或百分比值。

关键字 百分比
ultra-condensed 50%
extra-condensed 62.5%
condensed 75%
semi-condensed 87.5%
normal 100%
semi-expanded 112.5%
expanded 125%
extra-expanded 150%
ultra-expanded 200%

font简写

简写的格式为

1
2
3
4
font:
    italic normal bold normal 3em/1.5 Helvetica,
    Arial,
    sans-serif;

顺序为： font-style, font-variant, font-weight, font-stretch, font-size/(这两个属性中间一定要放 /) line-height, font-family。
若需要使用简写，则必须要指定 font-size和 font-family。

text-indent属性

用于指定文本的缩进，需要指定缩进长度（单位为px，em，rem等）或百分率。还可以指定一些参数。

值 说明
each-line 缩进会影响第一行、强制换行，但不影响软换行
hanging 除第一行，所有行都会缩进

text-align属性

left right center 向左对齐，向右对齐，居中。
justify 每一行宽度相等，左右边距相等（word的默认模式）。

text-decoration属性

用于设置字体的划线等装饰。该属性为一个缩写形式。它由 text-decoration-line text-decoration-style 和 text-decoration-color 构成。

text-decoration

值 说明
none 无，删除划线
overline 上划线
line-through 中间划线
underline 下划线

text-decoration-style

值 说明
solid 实线
double 双实线
dotted 点划线
dashed 虚线
wavy 波浪线

text-transform属性

用于设置大小写字母。

值 说明
uppercase 全部大写
lowercase 全部小写
capitalize 首字母大写

text-shadow属性

该属性需要需要至少4个属性：

  • 阴影与初始文本的水平偏移。正数表示向右偏移。
  • 阴影与原始文本的垂直偏移。正数表示向上偏移。
  • 模糊半径。更高的值表示阴影分散得更广泛。
  • 颜色。默认为black。
    也可以通过逗号分隔的多个阴影值叠加，应用于同一文本。

text-overflow属性

用于指定如何提示用户存在隐藏的溢出内容。

值 说明
clip 默认值，在极限处直接截断文本
ellipsis 用省略号显示被截断的文本
<string> 用字符串显示被截断的文本

line-break属性

用于处理如何断开带有标点符号的中文文本行。

值 说明
auto 默认规则
loose 用尽可能松散的规则分解文本
normal 一般的断行规则分解
strict 最严格的规则
anywhere 每一个字（印刷字符单元）都能进行换行

hyphens属性

用于告诉浏览器换行时是否需要连字符链接单词。

值 说明
none 只在空白处换行
manual 只在建议换行点（可用Unicode字符指定可能的换行点）换行
auto 自动使用连字符

white-space属性

用于说明元素内空白的处理方式。

关键字 换行符 空格/制表符 文本换行 行末空格 行末其他空白分隔符
normal 合并 合并 换行 移除 挂起
nowrap 合并 合并 不换行 移除 挂起
pre 保留 保留 不换行 保留 不换行
pre-wrap 保留 保留 换行 挂起 挂起
pre-line 保留 合并 换行 移除 挂起
break-spaces 保留 保留 换行 换行 换行

链接

css可以设置不同的链接状态。

链接状态 说明
a:link{} 未访问链接
a:visited{} 已访问链接
a:hover{} 鼠标悬停时的链接样式
a:focus{} 通过Tab键等方法选中时的链接样式
a:active{} 链接被点击的状态

其表现实质是伪类的应用，详见这里。

列表

css中可以规定列表中某些特定的属性。

list-style-type属性

该属性用于设置列表的计数器或标记框的样式（圆点、符号等）。

值 说明
none 不显示列表的标记
disc 实心圆点（默认）
circle 空心圆点
square 实心方块
decimal 十进制数字
decimal-leading-zero 十进制，但从0开始计数
lower-roman upper-roman 小/大写罗马字母

list-style-image属性

该属性用于指定标记框图片，后面直接跟url。

list-style-position属性

该属性用于指定标记框在主体块框的位置。

值 说明
outside 默认值，标记框在主块外
inside 标记框在主块内

以上可以使用 list-style简写，顺序与上面一致。注意：如果同时指定了type和image，那么type将为image无法加载时的备选。

盒模型

所有HTML元素都可以看作盒子。每一个盒子都有4种边界，分别是：

  • 内容盒子(content)：显示内容的区域。
  • 内边距盒子(padding)：填充内容周围的空白。
  • 边距盒子(border)：包住内容。
  • 外边距盒子(margin)：盒子与其他元素之间的空白。外边距不计入盒子的实际大小，但影响盒子在页面上占据的总空间。

层次图示

border属性

该属性是多个属性的简写，可以通过分别指定不同属性与属性个数绘制不同的边框。属性个数对绘制的影响如下

参数个数 各个参数影响的边
4 上->右->下->左
3 上->左右->下
2 上下->左右
1 /

属性顺序如下

border-width

边框宽度，由border-bottom-width border-left-width border-right-width border-top-width4个值组成。其中的值可以是数字，也可以是关键字thin medium thick。

border-style

设定元素所有边框的样式。可由border-top-style border-right-style border-bottom-style border-left-style分别指定。

值 说明
none 默认值，无边框
hidden 与none类似，但在单元格边框重叠的情况下，它的优先级最高
dotted 圆点边框
dashed 短方形虚线
solid 实线
double 双实线
groove 雕刻效果边框
ridge 浮雕效果边框，明暗区域与groove相反
inset 陷入效果边框，为只有两边的groove
outset 突出效果边框，样式与inset相反，为只有两边的ridge

border-color

边框颜色，由border-top-color border-right-color border-bottom-color border-left-color4个值组成。

padding属性

用于控制边框与内容间的间距。参数类似。

outline属性

设置多个轮廓属性的样式，但和border相比，它并不占据空间，围绕在border外面，也可以是非矩形的。参数类似。

margin属性

定义元素周围空间。参数类似。

尺寸相关

值 说明
height 设置元素高度
line-height 设置行高
width 设置元素宽度
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-height 设置元素最小宽度

display属性

display属性设置元素是否可以被视为盒子以及子元素的布局。

外部表现

其内部值默认为flow。

值 说明
block 生成一个块级盒子，在该元素之前和之后产生换行
inline 生成一个或多个盒子，但不会换行

内部表现

值 说明
flow 使用流式布局
flow-root 生成块级元素盒，建立一个新的区块格式化上下文
table 类似<table>，定义一个块级盒子
flex 使用弹性盒模型布局
grid 使用网格模型布局
ruby 类似<ruby>，依据ruby格式化类型布局它的内容

内部

值 说明
table-row-group 类似于<tbody>
table-header-group 类似于<thead>
table-footer-group 类似于<tfoot>
table-row 类似于<tr>
table-cell 类似于<td>
table-column-group 类似于<colgroup>
table-column 类似于<col>
table-caption 类似于<caption>
ruby-base 类似于<rb>
ruby-text 类似于<rt>

预组合

值 等效
inline-block inline flow-root
inline-table inline table
inline-flex inline flex
inline-grid inline grid

visibility属性

用于显示或隐藏元素

值 说明
visible 其值可见
hidden 其值不可见，不绘制
collapse
  1. 用于<table>行、列、行组、列组时，将隐藏表格的行与列，并不占用任何空间。但计算其他行与列的大小时，仍会以以前的大小计算。
  2. 折叠的弹性元素和<ruby>元素会被隐藏，占据的空间也会被移除
  3. 其他元素，与hidden相同

position属性

该属性指定一个元素在文档中的定位方式。

值 说明
static 元素的正常布局行为
此时top``right``left``bottom和具体数值无效
relative 相对定位元素，先放置在未添加定位时的元素，再在不改变布局的前提下调整元素位置
对某些表格元素无效
absolute 绝对定位元素，元素被移出正常文档流，通过指定元素相对于最近的非static定位父元素的偏移
该元素可设置外边距，且不与其他边距合并
fixed 绝对定位元素，元素被移出正常文档流，通过指定元素相对于屏幕视口的位置来指定元素位置，屏幕滚动时不会改变元素位置
sticky 粘性定位元素，元素根据正常文档流进行定位，相对最近滚动祖先进行定位，最近滚动祖先滑动时不改变元素位置

cursor属性

显示鼠标指针悬停在元素上时显示的相应样式。

值 说明与样例
悬停时可见，但有的显示不了
<url> url(), url()，指向图片文件(无样例)
<x> <y> 坐标，两个小于32的无单位非负数(无样例)
auto
浏览器自动选择
default
默认的箭头指针
none
无指针
pointer
可点击
progress
程序后台繁忙
wait
程序繁忙
cell
指示单元格可被选中
crosshair
位图框选
text
文字可被选中
vertical-text
垂直文字可被选中
move
被悬浮的物体可移动
not-allowed
不能执行
grab
可抓取
grabbing
抓取中
zoom-in
放大
zoom-out
缩小

overflow属性

该属性设置了元素溢出时所需的行为

值 说明
visible 内容不能被裁剪，渲染到盒外部
hidden 溢出的内容消失
clip 内容将以元素的边距盒进行裁剪
scroll 裁剪成盒，其余的显示滚动条
auto 由浏览器决定

其他定位属性

还可额外指定top``right``left``bottom属性来指明偏移量。

关键字 说明 值
z-index 元素的堆叠顺序 /
clip 裁剪元素
  • shape 设置元素形状。唯一合法的形状值为rect(top,right,bottom,left)
  • auto 默认值，不使用剪裁
float 指定一个元素应沿其容器的左侧或右侧放置
  • none 元素不进行浮动
  • left right 元素浮动在左/右侧
  • inline-start inline-end 元素浮动在其块容器的开始/结束一侧，哪一测则有文字方向决定

选择器

选择器选择我们想要样式化的HTML元素进行操作化。

选择器类型 标识符 说明
类型选择器 <> 选择HTML标签/元素
全局选择器 * 选择文档中的所有内容
当紧随在其他元素后时，则代指父元素的所有内容
类选择器 . 选择这个类的物件
ID选择器 # 选择设定了相应id元素的物件，应用与类选择器基本相同，但在一篇文档中一个ID只能用一次
属性选择器 / 选择特定属性的元素
伪类/伪元素选择器 :/:: 选择处于特定状态的元素
关系选择器 ``/>/+/~ 在该选择器与其他选择器间建立关系

属性选择器

存否何值选择器

选择器 说明
[attr] 匹配存在attr属性的元素
[attr=value] 匹配存在attr属性且属性值为value的元素
[attr~=value] 匹配存在attr属性且属性其中一个值value的元素
[attr|=value] 匹配存在attr属性且属性值正为value或开始为value，后面紧随连字符的元素

子字符串匹配选择器

选择器 说明
[attr^=value] 匹配存在attr属性且值开头为value子字符串的元素
[attr$=value] 匹配存在attr属性且值结尾为value子字符串的元素
[attr*=value] 匹配存在attr属性且值存在value子字符串的元素

大小写敏感

在中括号闭合前加i，表示以大小写不敏感的方式进行匹配。

伪类

用户行为伪类

选择器 说明
:hover 鼠标悬浮到元素上时匹配
:active 用户激活时匹配
:focus 元素有焦点时匹配
:fucus-visible 元素有焦点，且元素对用户可见时匹配
:focus-within 元素或其子代元素有焦点时匹配

浏览器相关伪类

选择器 说明
:link 未访问的链接
:visited 已访问链接
:any-link 链接，无论是否已访问

表单相关伪类

选择器 说明
:blank 空输入值的<input>元素
:checked 处于选中状态的表单元素
:in-range 值处于区间内时匹配
:out-of-range 值不处于区间内时匹配
:valid 通过验证的有效表单元素
:invalid 未通过验证的无效表单元素
:indeterminate 匹配未定态值的元素，通常是复选框
:required 匹配必填的表单元素

元素状态伪类

选择器 说明
:disable 处于禁用状态的用户界面元素
:enable 处于启用的用户界面元素
:empty 没有子元素的元素
:lang() 基于语言(HTML中lang属性的值)匹配元素

次序相关伪类(大部分前面或括号内都要有HTML元素)

选择器 说明
:first 分页情况下的第一页
:first-child 匹配兄弟元素中的第一个元素
:first-of-type 匹配兄弟元素中第一个有某种类型的元素
:last-child 匹配兄弟元素中最后一个某种类型的元素
:last-of-type 匹配兄弟元素中最后一个某种类型的元素
:only-child 匹配没有兄弟元素的元素
:only-of-type 匹配兄弟元素中某类型仅有的元素
:nth-child() 根据元素在父元素的子元素列表中的索引来选择元素
括号中可以是关键字odd或even表示索引号奇偶，也可以写出等差数列通项公式
:nth-of-type() 基于相同类型的兄弟元素中的位置来匹配元素
括号与上面一致
:nth-child() 匹配一组兄弟元素，从后向前数
括号与上面一致
:nth-of-type() 匹配同类型的一组兄弟元素，从后向前数
括号与上面一致

其他伪类

选择器 说明
:is() 选择括号内选择器列表中任一种元素，可用于以更紧凑的形式编写大型选择器
:not() 匹配不符合一组选择器的元素
:paused 匹配音视频中能播放或暂停，且正在暂停的元素
:playing 匹配音视频中能播放或暂停，且正在播放的元素
:read-only 匹配用户不可更改的元素
:read-write 匹配用户可更改的元素
:target 匹配当前网页url的元素

伪元素

选择器 说明
::after 某元素后的一个元素
::before 某元素前的一个元素
::first-letter 元素的第一个字母
::first-line 包含此伪元素的元素第一行
::grammar-error 元素中浏览器标记的语法错误的部分
::spelling-error 元素中拼写错误的部分
::selection 元素中被选择的部分

关系选择器

选择器 标识符 说明
后代选择器 `` 表示后者是前者的子元素
子元素选择器 > 选择某元素的一级子元素
邻接兄弟选择器 + 选择紧接在另一元素后的元素，且二者有相同元素
后续兄弟选择器 ~ 选择所有指定元素后的相邻兄弟元素

注意

  • ID名与类名的第一个字符不能是数字，它无法在FireFox和Mozilla中使用。
  • IE6及更低版本不支持属性选择器。
  • -child类伪类和-of-type类伪类的区别：前者选择其父元素的第一个符合条件的元素，而不关心其类型；后者选择其父元素中指定类型的第一个符合条件的子元素。
  • ::after和::before后面可指定属性content以写明内容。

继承与优先级

控制继承

每个CSS属性都接收这些继承值

继承值 说明
inherit 子元素属性与父元素一样
initial 元素属性设置为初始值
revert 属性值设置为浏览器的默认值，而非该属性的默认值
revert-layer 属性值设置为上一个层叠层中设立的值
unset 设置为自然值，可能是inherit或initial
值 说明
all 继承值应用于几乎所有属性

优先级规则

  1. 最近的祖先样式比其他祖先样式高。
  2. 直接样式比祖先样式优先级高。
  3. 内联样式 > ID选择器 x > 类选择器 = 属性选择器 = 伪类选择器 y > 标签选择器 = 伪元素选择器 z。
  4. 计算选择器中x，y，z的值，大的则优先级高，若三者都相等，则按照“就近原则”判断。
  5. !important属性拥有最高优先级。若同时拥有，则按照规则3、4判断优先级。
前端
#CSS #前端 #速查
css速查
http://example.com/2024/08/05/css/
作者
Ivan Chen
发布于
2024年8月5日
许可协议
IVAN