/* CSS 注释 */ /* CSS 注释格式 */
/* example.css */ /* CSS 文件后缀 */
/* 基本选择器 */
a /* 元素选择器 */
#id /* ID 选择器 */
.class /* 类选择器 */
* /* 通配选择器 */
a[href="example.com/"] /* 属性选择器 */
/* 组合选择器 */
A + B /* A元素后的第一个兄弟元素B */
A ~ B /* A元素后的所有兄弟元素B */
A > B /* A元素后的所有子类元素B */
A B /* A元素后的所有后代元素B */
A, B /* 选择A元素和B元素 */
A.B /* 筛选A元素同级中含有类型B的元素 */
A { &.B } /* & 当前选择器的引用 */
/* 伪类 */
:link /* 未访问 */
:local-link /* 内链未访问 */
:visited /* 已访问 */
:any-link /* 匹配 :link 和 :visited */
:hover /* 悬停状态 */
:active /* 激活状态 */
:focus /* 鼠标焦点状态 */
:focus-visible /* 键盘焦点状态 */
:focus-within /* 当前或后代元素焦点状态 */
:target /* 与id匹配的目标元素 */
:target-within /* 与id或后代id匹配的目标元素 */
:autofill /* 未编辑的 input 元素 */
:default /* 默认值的 input 元素 */
:in-range /* 值处于min和max范围的input元素 */
:out-of-range /* 值处于min和max范围之外的input元素 */
:indeterminate /* 处于不确定状态的input和progress元素 */
:checked /* radio、checkbox和option的选中状态 */
:disabled /* 禁用状态 */
:enabled /* 启用状态 */
:valid /* 通过验证的表单元素 */
:invalid /* 未通过验证的表单元素 */
:user-invalid /* 提交后未通过验证的表单元素 */
:user-valid /* 提交后通过验证的表单元素 */
:defined /* 任何已定义的元素 */
:dir(ltr) /* 特定文字书写方向的元素 */
:empty /* 不包含子元素的元素 */
:lang() /* 基于语言匹配页面元素 */
:fullscreen /* 全屏下的元素 */
:has() /* 可实现选择父元素或先前兄弟元素 */
:is() /* 排列组合可以选择的元素 */
:where() /* 排列组合可以选择的元素,优先级为0 */
:not() /* 反选元素 */
:host /* Shadow DOM 元素 */
:host() /* 与参数匹配的 Shadow DOM 元素 */
@page:first /* 打印文档的第一页 */
:first-child /* 同级第一个元素 */
:last-child /* 同级最后一个元素 */
:first-of-type /* 同级第一个同类元素 */
:last-of-type /* 同级最后一个同类元素 */
:nth-child(n) /* 同级第n个元素 */
:nth-last-child(n) /* 同级倒数第n个元素 */
:nth-of-type(n) /* 同级第n个同类元素 */
:nth-last-of-type(n) /* 同级倒数第n个同类元素 */
:only-child /* 没有任何兄弟元素的元素 */
:only-of-type /* 没有同类兄弟元素的元素 */
:required /* 设置 required 属性的表单元素 */
:optional /* 未设置 required 属性的表单元素 */
:placeholder-shown /* 当前显示 placeholder 的表单元素 */
:popover-open /* popover 打开状态的元素 */
:read-only /* 不可编辑的表单元素 */
:read-write /* 可编辑的表单元素 */
:root /* html 元素 */
:scope/@scope /* 限定作用域的根元素 */
:state() /* 自定义元素的自定义状态 */
/* 伪元素 */
::before /* 当前元素的前一个伪元素 */
::after /* 当前元素的后一个伪元素 */
::backdrop /* 位于顶层之下与视口大小相同的伪元素 */
::cue(:cue) /* 匹配所选元素中的 WebVTT 提示 */
::file-selector-button /* type="file" 的 input 按钮 */
::first-letter /* 区块内第一行的第一个字母 */
::first-line(:first-line) /* 区块内的第一行 */
::target-text /* 基于文字的URL锚点定位与样式设置 */
::part() /* Shadow DOM 匹配 part 的元素 */
::placeholder /* placeholder 文本 */
::slotted() /* template 中的元素 */
/* @规则 */
@charset "UTF-8"; /* 定义样式使用的字符集 */
@import "example.css"; /* 引入外部样式表 */
@media all {} /* 媒体查询 */
@font-face {} /* 引入外部字体 */
@keyframes keyframes-name {} /* CSS 动画帧 */
@supports () {} /* 条件规则 */
/* 简写属性 */
.background { /* Background 属性 */
background-color: #000; /* 背景颜色 */
background-image: url("example.png"); /* 背景图片 */
background-repeat: no-repeat; /* 背景图片重复 */
background-position: top left; /* 背景图片位置 */
}
.background {background: #000 url("example.png") no-repeat top left;}
.font { /* Font 属性 */
font-style: italic; /* 字体样式 */
font-weight: bold; /* 字体粗细 */
font-size: 1em; /* 字体大小 */
line-height: 1.2; /* 行高 */
font-family: Arial, sans-serif; /* 字体类型 */
}
.font {font: italic bold 1em/1.2 Arial,sans-serif;}
.border { /* Border 属性, Outline 相同 */
border-width: 1px; /* 边框宽度 */
border-style: solid; /* 边框类型 */
border-color: #000; /* 边框颜色 */
}
.border {border: 1px solid #000;}
.margin { /* Margin 属性,Padding 相同 */
margin-top: 5px; /* 上外边距宽度 */
margin-right: 10px; /* 右外边距宽度 */
margin-bottom: 5px; /* 下外边距宽度 */
margin-left: 10px; /* 左外边距宽度 */
}
.margin {margin: 5px 10px 5px 10px}
ul { /* 列表属性 */
list-style-image: url("example.png"); /* 列表项标记图片 */
list-style-position: inside; /* 列表项标记位置 */
list-style-type: circle; /* 列表项标记类型 */
}
ul {list-style: url("example") inside circle}
/* 文本属性 */
.text {
color: #000; /* 文本颜色 */
direction: ltr; /* 文本方向 */
letter-spacing: normal; /* 字符间距 */
line-height: 16px; /* 行高 */
text-align: center; /* 水平对齐方式 */
text-decoration: none; /* 文本修饰 */
text-indent: 1em; /* 文本首行缩进 */
text-shadow: #000; /* 文本阴影 */
text-transform: none; /* 字母大小写 */
text-overflow: clip; /* 文本溢出处理方式 */
vertical-align: center; /* 竖直对齐方式 */
white-space: normal; /* 空格处理方式 */
word-spacing: normal; /* 字间距 */
word-wrap: break-word; /* 单词分割换行 */
}
/* 盒模型：margin + (outline) + border + padding + content */
/* 尺寸属性 */
.size {
height: 10px; /* 高度 */
min-height: 5px; /* 最小高度 */
max-height: 15px; /* 最大高度 */
width: 10px; /* 宽度 */
min-width: 5px; /* 最小宽度 */
max-width: 15px; /* 最大宽度 */
}
/* 显示、可见和不透明属性 */
.visual {
display: block; /* 显示属性 */
visibility: visible; /* 可见属性 */
opacity: 0.1; /* 不透明属性 */
}
/* 定位属性 */
.position {
position: relative; /* 元素定位类型 */
top: 10px; /* 元素定位上外边界与父级元素上边界的偏移 */
right: 10px; /* 元素定位右外边界与父级元素右边界的偏移 */
bottom: 10px; /* 元素定位下外边界与父级元素下边界的偏移 */
left: 10px; /* 元素定位左外边界与父级元素左边界的偏移 */
clip: auto; /* 剪辑一个绝对定位元素 */
cursor: pointer; /* 光标移动到元素的样式 */
overflow: auto; /* 溢出内容处理方式 */
z-index: 100; /* 元素堆叠顺序 */
}
/* 浮动属性 */
.float {
float: left; /* 设置浮动 */
clear: both; /* 清除浮动 */
}
/* CSS3 边框属性 */
.css3-border {
border-image: url("example.png"); /* 边框图片 */
border-radius: 3px; /* 边框圆角 */
box-shadow: #000; /* 边框阴影 */
}
/* CSS3 背景属性 */
.css3-background {
background-image: url("example.png"); /* 背景图片 */
background-size: 10px 10px; /* 背景图片尺寸 */
background-origin: border-box; /* 背景图片定位区域 */
background-clip: border-box; /* 背景图片裁剪属性 */
}
/* CSS3 渐变属性 */
.css3-gradients {
background: linear-gradient(to bottom right, red 10%, green 20%, blue); /* 线性渐变 */
background: repeating-linear-gradient(red, green, blue); /* 重复线性渐变 */
background: radial-gradient(circle, red 10%, green 20%, blue); /* 径向渐变 */
background: repeating-radial-gradient(red, green, blue); /* 重复径向渐变 */
}
/* CSS3 2D转换 */
.css3-2d-transform {
transform: translate(10px 10px); /* 平移 */
transform: rotate(30deg); /* 旋转 */
transform: scale(1.1); /* 缩放 */
transform: skew(30deg, 30deg); /* 倾斜 */
transform: matrix(10px); /* 矩阵，包含以上六项 */
transform-origin: center; /* 转换元素的位置 */
}
/* CSS3 3D转换 */
.css3-3d-transform {
transform: translate3d(10px, 10px, 10px); /* 3D 平移 */
transform: rotate3d(1, 1, 1, 30deg); /* 3D 旋转 */
transform: scale3d(1.1, 1.1, 1.1); /* 3D 缩放 */
transform: matrix3d(10, 10, 10, 10 /* 3D 矩阵，16个值 */
,10, 10, 10, 10
,10, 10, 10, 10
,10, 10, 10, 10);
transform-style: preserve-3d; /* 3D 显示方式 */
perspective: 10px; /* 3D 透视效果 */
perspective-origin: 10px; /* 3D 底部位置 */
backface-visibility: visible; /* 不面对屏幕时是否可见 */
}
/* CSS3 过渡 */
.css3-transition {
transition-property: width; /* 应用过渡的 CSS 属性的名称 */
transition-duration: 1s; /* 过渡时间 */
transition-timing-function: linear; /* 过渡时间曲线 */
transition-delay: 0s; /* 延迟时间 */
transition: width 1s linear 0s; /* 过渡简写 */
}
/* CSS3 动画 */
@keyframes keyframes-name {
0% {background: red; left:0; top: 0;}
50% {background: green; left: 100px; top: 0;}
100% {background: blue; left: 100px; top: 100px;}
}
.class {
animation-name: keyframes-name; /* 动画名称 */
animation-duration: 5s; /* 动画时间 */
animation-timing-function: linear; /* 动画时间曲线 */
animation-fill-mode: none; /* 动画不播放时需要应用到元素的样式 */
animation-delay: 0s; /* 动画延迟时间 */
animation-iteration-count: 1; /* 动画播放次数 */
animation-direction: normal; /* 动画在下一周期是否逆向播放 */
animation-play-state: running; /* 动画运行状态 */
animation: keyframes-name 5s linear; /* 动画简写，除了动画运行状态 */
}
/* CSS3 多列 */
div {
column-width: 100px; /* 列宽 */
column-count: 2; /* 列数 */
columns: 100px 2; /* 列宽和列数的简写 */
column-fill: auto; /* 填充列的方式 */
column-gap: normal; /* 列间间隙 */
column-span: all; /* 跨列数 */
column-rule-width: 1px; /* 列间边框宽度 */
column-rule-style: solid; /* 列间边框类型 */
column-rule-color: #000; /* 列间边框颜色 */
column-rule: 1px solid #000; /* 列间边框简写 */
}
/* 弹性盒子 */
/* 弹性容器属性 */
.container {
display: flex;
/* 设置主轴方向 */
flex-direction: row; /* 主轴为水平方向从左到右，默认值 */
flex-direction: column; /* 主轴为竖直方向从上到下 */
flex-direction: row-reverse; /* 主轴为水平方向从右到左 */
flex-direction: column-reverse; /* 主轴为竖直方向从下到上 */
/* 主轴的排列处理 */
flex-wrap: nowrap; /* 不换行，默认值 */
flex-wrap: wrap; /* 换行 */
flex-wrap: wrap-reverse; /* 反向换行 */
/* 弹性容器复合属性 */
flex-flow: flex-direction flex-wrap;
/* 主轴对齐方式 */
justify-content: flex-start; /* 沿主轴起点对齐 */
justify-content: center; /* 沿主轴居中对齐 */
justify-content: flex-end; /* 沿主轴终点对齐 */
justify-content: space-between; /* 沿主轴弹性元素间等距对齐 */
justify-content: space-around; /* 沿主轴弹性元素外间距等距对齐 */
justify-content: space-evenly; /* 沿主轴将剩余空间平均分割 */
/* 交叉轴对齐方式 */
align-items: stretch; /* 默认值，若弹性元素未设置尺寸时撑满交叉轴 */
align-items: flex-start; /* 尺寸由弹性元素决定，沿交叉轴起点对齐 */
align-items: center; /* 尺寸由弹性元素决定，沿交叉轴居中对齐 */
align-items: flex-end; /* 尺寸由弹性元素决定，沿交叉轴终点对齐 */
align-items: baseline; /* 尺寸由弹性元素决定，沿交叉轴第一个弹性元素第一行文字的基线对齐 */
/* 交叉轴多行对齐 */
align-content: stretch;
align-content: flex-start;
align-content: center;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
}
/* 弹性元素属性 */
.flex-item {
flex-grow: 1; /* 弹性容器宽度/高度剩余时，弹性元素如何放大，默认值为 0，即不放大 */
flex-shrink: 1; /* 弹性容器宽度/高度不够时，弹性元素如何缩小，默认值为 1 */
flex-basis: 0; /* 弹性元素初始宽度/高度，0 表示根据内容撑开宽度/高度 */
flex-basis: 100px; /* 给定弹性元素初始宽度/高度 */
flex-basis: auto; /* 如果设置了 width/height，则由 width/height 决定，若无，则由内容决定 */
/* 弹性元素复合属性 */
flex: flex-grow flex-shrink flex-basis;
/* 调整弹性元素顺序 */
order: 1;
/* 单独对某个弹性元素设置交叉轴对齐方式 */
align-self: align-items; /* 取值与 align-items 相同 */
}
