本文详细介绍了CSS3中的各种选择器，如类选择器、ID选择器、通用选择器、伪类选择器以及属性选择器。此外，还深入探讨了背景、边框、布局、过渡、转换和动画等样式属性。内容涵盖了背景图像、边框样式、布局模型、媒体查询以及响应式设计等关键概念，旨在帮助开发者更好地理解和运用CSS3进行网页样式设计。
- 选择器
.intro 选取所有 class=“intro” 的元素。
#id #firstname 选取 id=“firstname” 的那个元素。
- 选取所有元素。 通用选择器
p 选取所有元素。
div,p 选取所有元素和所有元素。
border-collapse 属性设置是否将表格边框折叠为单一边框：
nth-child() 选择器
后代选择器 (空格) 子选择器 (>) 相邻兄弟选择器 (+) 通用兄弟选择器 (~)
伪类选择器 :first-child 伪类 ::after 在每个元素之后插入内容。::before 在每个
元素之前插入内容。::first-letter 选择每个
元素的首字母。::first-line 选择每个
元素的首行。::selection 选择用户选择的元素部分。
属性选择器 [] [attribute=“value”] 选择器用于选取带有指定属性和值的元素。 [attribute~=“value”] 选择器选取属性值包含指定词的元素。[attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。 [attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。 [attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。 [attribute*=“value”] 选择器选取属性值包含指定词的元素。
第一优先级最高： 行内样式（在 HTML 元素中） 外部和内部样式表（在 head 部分） 浏览器默认样式
background-color 属性指定元素的背景色。
background-image 属性指定用作元素背景的图像。
background-image 属性在水平和垂直方向上都重复图像。
background-clip 规定背景的绘制区域。
background-position 属性用于指定背景图像的位置。
background-size 规定背景图像的尺寸。
background-origin 规定在何处放置背景图像。
background-attachment 属性指定背景图像是应该滚动还是固定的
background-clip 属性指定背景的绘制区域。
background-image: linear-gradient(direction, color-stop1, color-stop2, …); 线性渐变
background-image: radial-gradient(shape size at position, start-color, …, last-color); 径向渐变 shape 为椭圆形，size 为最远角，position 为中心。
background: #ffffff url(“tree.png”) no-repeat right top;
border 属性允许您指定元素边框的样式、宽度和颜色。
border-style 属性指定要显示的边框类型。
border-width 属性指定四个边框的宽度。
border-color 属性用于设置四个边框的颜色。
background-origin 属性指定背景图像的位置
background-size 属性允许您指定背景图像的大小。
border-radius 属性用于向元素添加圆角边框：
border-image 属性允许您指定要使用的图像，而不是包围普通边框
border-image-source 规定用作边框的图像的路径。
border-image-slice 规定如何裁切边框图像。
border-image-width 规定边框图像的宽度。
border-image-outset 规定边框图像区域超出边框盒的量。
border-image-repeat 规定边框图像应重复、圆角、还是拉伸。
border: 5px solid red;
margin 属性用于在任何定义的边框之外，为元素周围创建空间。
padding 属性用于在任何定义的边界内的元素内容周围生成空间。
height 和 width 属性用于设置元素的高度和宽度。
outline-style 属性指定轮廓的样式
outline-color 设置轮廓的颜色。
outline-offset 指定轮廓与元素的边缘或边框之间的空间。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
outline: none; 消除输入框周围添加蓝色轮廓
:focus 选择器可以在输入字段获得焦点时为其设置样式：
box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框
color 属性用于设置文本的颜色。
text-align 属性用于设置文本的水平对齐方式。
direction 和 unicode-bidi 属性可用于更改元素的文本方向。
vertical-align 属性设置元素的垂直对齐方式。
text-decoration 属性用于设置或删除文本装饰。
text-transform 属性用于指定文本中的大写和小写字母。
text-indent 属性用于指定文本第一行的缩进
letter-spacing 属性用于指定文本中字符之间的间距。
line-height 属性用于指定行之间的间距 行高
word-spacing 属性用于指定文本中单词之间的间距。
white-space 属性指定元素内部空白的处理方式。
text-shadow 属性为文本添加阴影。
text-overflow 指定应如何向用户示意未显示的溢出内容。
font-family 属性规定文本的字体。
font-style 属性主要用于指定斜体文本。
font-weight 属性指定字体的粗细：
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
font-size 属性设置文本的大小。
text-align-last 指定如何对齐文本的最后一行。
writing-mode 属性规定文本行是水平放置还是垂直放置。
word-wrap 属性使长文字能够被折断并换到下一行。
text-justify 指定对齐的文本应如何对齐和间隔。
resize 属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）
resize 属性规定元素是否应（以及如何）被用户调整大小。
resize: horizontal; 只允许用户调整元素的宽度
resize: vertical;只允许用户调整元素的高度：
resize: both;能够调整
button
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
box-shadow 属性为按钮添加阴影：
opacity 属性为按钮添加透明度
a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时
a:hover 必须在 CSS 定义中的a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
list-style-type 属性指定列表项标记的类型。
list-style-image 属性将图像指定为列表项标记：
list-style-position 属性指定列表项标记（项目符号）的位置。
border-collapse 属性设置是否将表格边框折叠为单一边框：
overflow-x:auto 的容器元素（例如
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条 仅适用于具有指定高度的块元素。
visible - 默认。溢出没有被剪裁 可见。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条
overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：
overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。
display 属性规定是否/如何显示元素。
块级元素 block
-
position 属性规定应用于元素的定位方法的类型。 static relative fixed absolute sticky粘性定位
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
CSS 多列属性
column-count 属性规定元素应被划分的列数。
column-gap 属性规定列之间的间隔。
column-rule-style 属性规定列之间的规则样式
column-rule-width 属性规定列之间的规则宽度
column-rule-color 属性规定列之间的规则的颜色
column-rule 属性是用于设置上面所有 column-rule-* 属性的简写属性 column-rule: 1px solid lightblue;
column-span 属性规定元素应跨越多少列
column-width 属性为列指定建议的最佳宽度
float 属性规定元素如何浮动
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
box-sizing 可以轻松地并排创建三个浮动框 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。
box-shadow 属性应用阴影于元素
opacity 属性指定元素的不透明度/透明度。属性的取值范围为 0.0-1.0。值越低，越透明
counter-reset - 创建或重置计数器 必须首先使用 counter-reset 创建它。
counter-increment - 递增计数器值
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素
cm 厘米
mm 毫米
in 英寸 (1in=96px=2.54cm)
px * 像素 (1px=1/96th of 1in) * 像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。
pt 点 (1pt=1/72 of 1in)
pc 派卡 (1pc=12 pt)
em 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍
ex 相对于当前字体的 x-height(极少使用)
ch 相对于 “0” （零）的宽度
rem 相对于根元素的字体大小（font-size）
vw 相对于视口宽度的 1%
vh 相对于视口高度的 1%
vmin 相对于视口较小尺寸的 1％
vmax 相对于视口较大尺寸的 1％
% 相对于父元素
transition 过渡效果
transition-timing-function 属性规定过渡效果的速度曲线。
transition-delay 属性规定过渡效果的延迟（以秒计）。
transition-property 规定过渡效果所针对的 CSS 属性的名称。
transition-duration 规定过渡效果要持续多少秒或毫秒。
transforms 转换 允许您移动、旋转、缩放和倾斜元素。
transform-origin 允许你改变被转换元素的位置
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。
rotate() 方法根据给定的角度顺时针或逆时针旋转元素。
scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。 scaleX() 方法增加或减少元素的宽度。 scaleY() 方法增加或减少元素的高度。
skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。 skewX() 方法使元素沿 X 轴倾斜给定角度。 skewY() 方法使元素沿 Y 轴倾斜给定角度。
matrix() 方法把所有 2D 变换方法组合为一个。
matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。
参数如下：matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
@keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式
animation-name 动画名
animation-duration 属性定义需要多长时间才能完成动画。
animation-delay 属性规定动画开始的延迟时间。
animation-iteration-count 属性指定动画应运行的次数。
animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
animation-timing-function 属性规定动画的速度曲线。
animation-fill-mode 属性规定目标元素的样式
animation-play-state 规定动画是运行还是暂停。
布局
CSS Flexbox 布局模块
使用 Flexbox 模型，您需要首先定义 Flex 容器。
将 display 属性设置为 flex，flex 容器将可伸缩：
flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。
column 值设置垂直堆叠 flex 项目 （从上到下）
column-reverse 值垂直堆叠 flex 项目（但从下到上)
row 值水平堆叠 flex 项目（从左到右
row-reverse 值水平堆叠 flex 项目（但从右到左）
flex-wrap 属性规定是否应该对 flex 项目换行。 nowrap 值规定将不对 flex 项目换行 wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行
wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行
justify-content 属性用于对齐 flex 项目： center flex-start 值将 flex 项目在容器的开头对齐 flex-end 值将 flex 项目在容器的末端对齐：
space-around 值显示行之前、之间和之后带有空格的 flex 项目 space-between 值显示行之间有空格的 flex 项目 显示的弹性线之间有相等的间距：
align-items 属性用于垂直对齐 flex 项目。 center 值将 flex 项目在容器中间对齐：
flex-start 值将 flex 项目在容器顶部对齐 flex-end 值将弹性项目在容器底部对齐
stretch 值拉伸 flex 项目以填充容器 baseline 值使 flex 项目基线对齐：
align-content 属性用于对齐弹性线
center值在容器中间显示弹性线
stretch 值拉伸弹性线以占据剩余空间（默认）：
space-around 值显示弹性线在其之前、之间和之后带有空格：
flex-start 值在容器开头显示弹性线：
flex-end 值在容器的末尾显示弹性线：
order 属性规定 flex 项目的顺序。 order 值必须是数字，默认值是 0 属性可以改变 flex 项目的顺序：
flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少 该值必须是数字，默认值是 0。
flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。 该值必须是数字，默认值是 0。
flex-basis 属性规定 flex 项目的初始长度。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
align-self 属性规定弹性容器内所选项目的对齐方式。 align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。
媒体查询
CSS3 媒体类型
响应式布局
all 用于所有媒体类型设备。
print 用于打印机。
screen 用于计算机屏幕、平板电脑、智能手机等等。
speech 用于大声“读出”页面的屏幕阅读器。
@media 规则来引用 CSS 属性块。
网络布局
CSS 网格布局模块（CSS Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。
网格布局由一个父元素以及一个或多个子元素组成。
当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。
网格容器的所有直接子元素将自动成为网格项目。
网格列（Grid Columns） 网隔行（Grid Rows） 网格间隙（Grid Gaps） 网格行（Grid Lines）网格行（Grid Lines） 行之间的线称为行线（row lines）
grid-column-gap 属性设置列之间的间隙：
grid-row-gap 属性设置行之间的间隙：
grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写属性 grid-gap 属性还可用于将行间隙和列间隙设置为一个值：
grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度
grid-template-rows 属性定义每列的高度
justify-content 属性用于在容器内对齐整个网格。 网格的总宽度必须小于容器的宽度，这样 justify-content 属性才能生效。
align-content 属性用于垂直对齐容器内的整个网格
grid-column 属性定义将项目放置在哪一列上 是 grid-column-start 和 grid-column-end 属性的简写属性
grid-row 属性定义了将项目放置在哪一行。
grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
grid-template-areas 属性来引用命名的网格项目。
4013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
