css 中文手册

css 普通选择器

通配符选择器选择所有元素

HTML标签选择器选择HTML标签

ID选择器选择id属性元素

class类选择器选择class属性元素

包含选择器选择后代元素

子选择器选择子元素

相邻选择器选择后面紧邻的兄弟元素

兄弟选择器 CSS3选择后面相邻的所有兄弟元素

css 属性选择器

[attr] 具有attr属性的元素

[attr=val] 值等于指定值的元素

[attr~=val] 选择包含指定值的元素

[attr^=val] CSS3选择指定值开头的元素

[attr$=val] CSS3选择指定值结尾的元素

[attr*=val] CSS3包含指定值的元素

[attr|=val] 选择指定值开头

css 动态伪类选择器

:link 超链接

:visited 链接已被访问过

:hover 鼠标悬停

:active 被激活时

css 结构性伪类选择器

:lang() 选择带有lang属性元素

:not() CSS3排除某类元素

:root CSS3选择根元素

:first-child 第一个元素

:last-child CSS3最后一个子元素

:only-child CSS3仅有的一个子元素

:nth-child() CSS3第n个子元素

:nth-last-child() CSS3倒数第n个子元素

:first-of-type CSS3第一个同级兄弟元素

:last-of-type CSS3最后一个同级兄弟元素

:only-of-type CSS3唯一的一个同级兄弟元素

:nth-of-type() CSS3第n个同级兄弟元素

:nth-last-of-type() CSS3倒数第n个同级兄弟元素

:empty CSS3没有任何子元素

:target CSS3URL指向的元素

UI元素状态伪类选择器

:focus 输入焦点

:checked CSS3选中状态的元素

:enabled CSS3可用状态的元素

:disabled CSS3禁用状态的元素

:read-only CSS3只读状态的元素

:read-write CSS3能编辑的元素

:optional CSS3选择非必填元素

:required CSS3选择必填元素

:in-range CSS3选择有限定范围的元素

:indeterminate CSS3选择处于不确定状态的表单元素

:default CSS3默认状态的表单元素

:focus-within css3元素或者后代元素获得焦点

:out-of-range css3当值处于范围之外

css 伪对象选择器

::first-letter CSS3第一个字符的样式

::first-line CSS3第一行的样式

::before CSS3对象前发生的内容

::after CSS3对象后发生的内容

::placeholder CSS3设置文字占位符

::selection CSS3设置选择框样式

::cue CSS3字幕提示

css 字体属性

font 文本字体的复合属性

font-style 字体样式

font-variant 设为小型尺寸的大写字母

font-weight 字体粗细

font-size 字体尺寸

font-family 设置使用的字体

font-stretch CSS3文字横向拉伸变形

font-size-adjust CSS3

font-feature-settings CSS3控制OpenType字体中的高级印刷功能

font-kerning CSS3字距

css 文本样式

text-transform 指定文本字母为大写或者小写

white-space 文字间的空白距离

tab-size CSS3制表符的长度

word-break CSS3单词内断行

word-wrap CSS3内容超过指定容器的边界时是否断行

overflow-wrap CSS3内容超过指定容器的边界时是否断行

word-spacing 单词之间距离

letter-spacing 字符之间距离

line-height 行高

text-size-adjust CSS3设置移动端页面中对象文本的大小

text-decoration 文本修饰线外观的

text-decoration-line CSS3文本装饰线条的位置

text-decoration-color CSS3装饰线的颜色

text-decoration-style CSS3装饰线的形状

text-decoration-skip CSS3文本装饰线跳过部分内容

text-underline-position CSS3下划线的位置

text-shadow CSS3文字阴影

content 对象前或后显示内容

quotes 设置引号的样式

<string> 字符串的数据类型

<url> 资源地址

<ident> 用作一个任意字符串的标识符

attr() 元素的属性值

text-overflow CSS3内容溢出

css 背景颜色

background 背景复合属性

background-color 背景颜色

background-image 背景图像

background-repeat 背景图像填充方式

background-attachment 背景图的固定方式

background-position 背景图像位置

background-origin CSS3背景图的原始位置

background-clip CSS3背景图像外裁剪的区域

background-size CSS3背景图像的尺寸

css 颜色

color 文本颜色

opacity CSS3不透明度

<color> CSS3标准RGB色彩空间

Color Name 颜色名称

rgb() 红绿蓝生成各式各样的颜色

rgba() CSS3RGB透明度模式

hsl() CSS3色相饱和度明度模式

hsla() CSS3圆柱坐标系统表示颜色

transparent 全透明色彩

currentColor CSS3当前颜色值

text-fill-color 文字填充颜色

css 渐变

linear-gradient() CSS3线性渐变

radial-gradient() CSS3径向渐变

repeating-linear-gradient() CSS3重复的线性渐变

repeating-radial-gradient() CSS3重复的径向渐变

<gradient> CSS3颜色渐变数据类型

css 计数器

counter() CSS3计数器的值

counters() CSS3嵌套计数器

counter-increment CSS3计数器给定值

counter-reset CSS3计数器重置

counter-set CSS3计数器设定值

@counter-style CSS3自定义计数器的样式

css 图像

<image> 2D图形数据类型

image() CSS3指定图像或者图像替代

image-set() CSS3匹配合适的图像

grayscale() CSS3把图片转化为灰度图

blur() CSS3模糊图像

brightness() CSS3让图像更明亮或更暗淡

drop-shadow() CSS3在图像后方应用投影

image-rendering CSS3图像缩放算法

object-fit CSS3适应到其使用的高度和宽度确定的框

object-position CSS3设置对象在其框中的位置

filter 滤镜

css 列表

list-style 列表项目复合属性

list-style-image 列表项图像

list-style-position 列表项标记位置

list-style-type 列表项预设标记

css 表格

table-layout 布局表格单元格

border-collapse 表格边框与单元格边框模式

border-spacing 表格边框线与单元格之间的间距

caption-side 设置caption显示位置

empty-cells 单元格无内容时边框

css 用户界面

appearance CSS3设置呈现用户界面样式

outline 外轮廓线复合属性

outline-width 外轮廓线宽度

outline-color 外轮廓线条颜色

outline-style 外轮廓线条的样式

outline-offset CSS3外轮廓线条间隙

cursor 设置光标形状

zoom CSS3缩放比例

resize CSS3调整大小

pointer-events CSS3指定鼠标事件

css 文本流方向

direction 文本流的方向

unicode-bidi 设置文档中的双书写方向文本

writing-mode CSS3设置文字内容块固有的书写方向

css 文本对齐方式

text-align 文本水平对齐方式

text-align-last CSS3最后一行对齐方式

text-justify CSS3齐行方式

text-indent 文本缩进

vertical-align 垂直对齐方式

css 长度

<length> 距离尺寸数据类型

em 相对字体尺寸的长度单位

ex 相对于字符x的高度

ch CSS3所用字体中数字0的宽度

rem CSS3相对于根元素字体尺寸的倍数

vw CSS3相对于视窗口区域的宽度

vh CSS3相对于视窗口区域的高度

vmax CSS3相对于视窗口区域的宽度或高度中最大值

vmin CSS3视窗口区域中vw 和宽度 vh 两者之间的最小值

cm 绝对长度单位厘米

mm 绝对长度单位毫米

Q 四分之一毫米

in 绝对长度单位英寸

pt 绝对长度单位点

pc 绝对长度单位派卡

px 绝对长度单位像素

calc() CSS3动态计算长度值

var() CSS3自定义属性(CSS 变量)

<number> 数字数据类型

<integer> 整数数据类型

<percentage> 百分比值

percentage

css 角度

<angle> CSS3角度数据类型

deg CSS3度

grad CSS3百分度

rad CSS3弧度

turn CSS3转

css 时间

<time> CSS3时间数据类型

s CSS3秒

ms CSS3毫秒

css 分辨率

<frequency> CSS3分辨率数据类型

<resolution> CSS3分辨率

dpi CSS3点数

dpcm CSS3每厘米上的点数

dppx CSS3每个像素的点数

css 变形（2D 3D 转化）

<transform-function> CSS3图形的坐标系统

transform-box CSS3过度效果布局框

transform CSS3元素变形

transform-origin CSS3元素变形的原点

transform-style CSS3变形样式为3D或者2D

perspective CSS3使具有三维位置变换的元素产生透视效果

perspective-origin CSS3指定观察者的位置

backface-visibility CSS3元素背面朝向观察者时是否可见

css 过度

<timing-function> CSS3缓动函数

transition CSS3复合属性，设置过渡效果

transition-property CSS3过渡属性的名称

transition-duration CSS3过渡动画所需的时间

transition-timing-function CSS3过度效果加速度曲线

transition-delay CSS3过渡效果开始作用之前需要等待的时间

css 动画

animation CSS3动画特效

animation-name CSS3动画名称

animation-duration CSS3动画的持续时间

animation-timing-function CSS3动画的过渡类型

animation-delay CSS3动画的延迟时间

animation-iteration-count CSS3动画的循环次数

animation-direction CSS3动画是否反向播放

animation-play-state CSS3定义一个动画是否运行或者暂停

animation-fill-mode CSS3动画样式应用模式

css 多列布局

columns CSS3设置列数和每列的宽度复合属性

column-width CSS3列宽

column-count CSS3列数

column-gap CSS3列之间的距离

column-rule CSS3列之间的边框宽度、样式和颜色

column-rule-width CSS3边框宽度

column-rule-style CSS3边框样式

column-rule-color CSS3边框颜色

column-span CSS3跨列

column-fill CSS3多列填充方式

break-before CSS3前断行

break-after CSS3后断行

break-inside CSS3内部断行

css 网格布局

grid CSS3网格布局

grid-template CSS3定义网格中行、列与分区

grid-template-columns 网格列

grid-template-rows CSS3网格行

grid-template-areas CSS3网格区域

grid-row CSS3网格行

grid-row-start CSS3网格项在网格行中的起始位置

grid-row-end CSS3网格项在网格行中的结束位置

grid-column CSS3网格列

grid-column-start CSS3网格项在网格列中的起始位置

grid-column-end CSS3网格项在网格列中的结束位置

grid-area CSS3网格项的大小和位置

grid-auto-columns CSS3隐式创建的网格纵向轨道的宽度

grid-auto-flow CSS3在网格中被自动布局的元素排列

grid-auto-rows CSS3隐式创建的行轨道大小

gap CSS3网格行与列之间的间隙

row-gap CSS3行元素之间的间隙

css 定位布局

box-sizing CSS3盒模型组成模式

position 定位

z-index 重叠层顺序

top 上距离定位

right 右距离定位

bottom 下距离定位

left 左距离定位

display 显示模式

float 浮动

clear 清除浮动

visibility 显示或隐藏元素

overflow 内容溢出

overflow-x 横向溢出内容

overflow-y 纵向溢出内容

<position> 定位坐标数据类型

css 外边距

margin 外边距复合属性

margin-top 顶部外边距

margin-right 右外边距

margin-bottom 下外边距

margin-left 左外边距

css 内边距

padding 内边距

padding-top 顶部内边距

padding-right 右内边距

padding-bottom 下内边距

padding-left 左内边距

css 边框

border 边界线复合属性

border-width 边框宽度

border-style 边框样式

border-color 边框颜色

border-top 上方边框

border-top-width 顶部边框宽度

border-top-style 顶部边框样式

border-top-color 顶部边框颜色

border-right 右边边框复合属性

border-right-width 右边框宽度

border-right-style 右边框样式

border-right-color 右边框颜色

border-bottom 下边框复合属性

border-bottom-width 底部边框宽度

border-bottom-style 底部边框线样式

border-bottom-color 底部边框颜色

border-left 左边框复合属性

border-left-width 左边框宽度

border-left-style 左边框线样式

border-left-color 左边框颜色

box-shadow CSS3阴影

css 尺寸

width 宽度

min-width 最小宽度

max-width 最大宽度

height 高度

min-height 最小高度

max-height 最大高度

css 弹性盒子布局

display:flex CSS3弹性盒子布局

flex-grow CSS3增长系数

flex-shrink CSS3收缩

flex-basis CSS3弹性盒在主轴方向的伸缩基准值

flex CSS3简写伸缩。flex-grow、flex-shrink、flex-basis

flex-direction CSS3主轴方向

flex-wrap CSS3控制flex容器是单行或者多行

flex-flow CSS3flex-direction 和 flex-wrap 的简写

align-content CSS3在交叉轴上分配空间

align-items CSS3在交叉轴方向上的对齐方式

align-self CSS3定义 flex 子项单独在纵轴方向上的对齐方式

justify-content CSS3在主轴方向上的对齐方式

justify-items CSS3默认方式沿适当轴线对齐到每个盒子

justify-self CSS3沿适当轴对齐的方式

place-content CSS3align-content 和 justify-content的简写

place-items CSS3分别设置 align-items 和 justify-items 属性

order CSS3可伸缩项目在布局时的顺序

css 圆角

border-radius CSS3圆角

border-top-left-radius CSS3左上角圆角边框

border-top-right-radius CSS3右上角圆角边框

border-bottom-right-radius CSS3右下角圆角边框

border-bottom-left-radius CSS3左下角圆角边框

css 边框图像

border-image CSS3边框图像复合属性

border-image-source CSS3边框图片的资源

border-image-slice CSS3边框背景图的分割方式

border-image-width CSS3边框图像的宽度

border-image-outset CSS3边框图像可超出边框盒的大小

border-image-repeat CSS3图片如何填充边框

css @规则

inherit 关键字继承祖先

initial CSS3关键字设置属性为初始值

unset CSS3关键字重置继承关系

@namespace CSS3在CSS样式表中的XML命名空间的@规则

@supports CSS3特性查询

@media CSS3媒体查询

@charset 指定字符编码

@import 导入样式规则

all CSS3表示所有的CSS属性

@font-face CSS3使用自定义字体

@keyframes CSS3指定动画名称和动画效果

css 滚动效果

scroll-behavior CSS3指定滚动行为

scroll-margin CSS3滚动区域的起点

scroll-margin-block CSS3滚动页边距

scroll-margin-block-start CSS3滚动页边距开始处

scroll-margin-block-end CSS3滚动页边距结尾处

scroll-margin-top CSS3滚动区域的上边距

scroll-margin-right CSS3滚动区域的右边距

scroll-margin-bottom CSS3滚动区域的下边距

scroll-margin-left CSS3滚动区域的左边距

scroll-padding CSS3设置滚动内边距

scroll-padding-block CSS3滚动内边距填充

scroll-padding-block-start CSS3滚动页内边距开始处

scroll-padding-block-end CSS3滚动页内边距结束处

scroll-padding-top CSS3滚动区域顶部的偏移量

scroll-padding-right CSS3滚动区域右侧的偏移量

scroll-padding-bottom CSS3滚动区域底部的偏移量

scroll-padding-left CSS3滚动区域左侧的偏移量

css 语法和语义

css 语法

css 继承

css 优先级

css 属性值定义语法

css 单位与取值类型

css 打印文档

:first 打印时页面容器第一页使用的样式

:left 对打印文档的左侧页设置CSS样式

:right 打印文档的所有右页

@page 打印文档时修改某些CSS属性

返回主导航