css_examples
现代 CSS 示例
Section titled “现代 CSS 示例”CSS 选择器
定位元素：类型选择器（例如，h1），类选择器（.my-class），ID 选择器（#unique-id）。
组合选择器：后代选择器（article p），子选择器（ul > li），兄弟选择器（h2 + p，h2 ~ p）。
属性选择器：存在属性选择器（[target]），精确属性值选择器（[target="_blank"]），部分属性值选择器（[class*="button"]）。
伪类：状态伪类（:hover，:focus），结构性伪类（:nth-child(2n)）。
伪元素：元素的特定部分（::before，::first-line）。
分组选择器：应用相同的样式（h1, h2, h3）。
了解 CSS 选择器如何定位 HTML 元素进行样式设置。
CSS 背景
设置页面的背景颜色（body）。
为不同元素设置背景颜色。
使用图片作为背景（background-image）。
控制背景重复（background-repeat）。
定位背景图片（background-position）。
缩放背景图片（background-size: cover, contain）。
定义背景绘制区域（background-clip）。
控制定位参考点（background-origin）。
创建固定背景（background-attachment: fixed）。
使用多个背景图片。
使用 background 简写属性用于简洁表达。
探索如何使用颜色、图片等为元素设置背景样式。
CSS 文本样式
设置文本颜色（color）。
对齐文本（text-align: left, right, center, justify）。
装饰文本（text-decoration: underline, none 等）。
转换文本大小写（text-transform: uppercase, lowercase, capitalize）。
缩进文本（text-indent）。
调整字符间距（letter-spacing）。
控制行高（line-height）。
管理空白区域（white-space: nowrap）。
处理文本溢出（text-overflow: ellipsis）。
控制单词换行（overflow-wrap: break-word）。
特定上下文中的垂直对齐（例如，flexbox，grid）。
了解控制文本外观和布局的属性。
CSS 字体
设置字体族（font-family: websafe 字体或自定义字体）。
定义字体大小（font-size: 使用 px、em、rem、%、vw）。
指定字体粗细（font-weight: normal、bold、数值 100-900）。
设置字体样式（font-style: normal, italic）。
应用字体变体（font-variant: small-caps）。
使用 font 简写属性。
使用 @font-face 加载自定义字体。
理解如何在网页上控制排版。
CSS 链接
使用伪类根据状态设置链接样式（:link、:visited、:hover、:active、:focus、:focus-visible）。
移除默认下划线（text-decoration: none）。
添加背景颜色和内边距以实现按钮般的外观。
悬停时改变光标（cursor: pointer）。
学习如何有效地设置超链接样式。
CSS 列表
改变列表项标记（list-style-type）。
使用自定义图片作为标记（list-style-image）。
控制标记位置（list-style-position）。
使用 list-style 简写属性。
使用 ::marker 伪元素或 ::before 实现现代自定义列表标记。
探索为有序列表和无序列表设置样式的属性。
CSS 表格
为表格元素添加边框（border）。
折叠边框（border-collapse: collapse）。
设置表格宽度和高度（width、height）。
水平对齐文本内容（text-align）。
垂直对齐内容（vertical-align）。
在单元格内添加内边距（padding）。
设置表格标题样式（caption-side）。
响应式表格策略（例如，在包裹容器上设置 overflow-x: auto）。
学习如何设置 HTML 表格样式。
CSS 盒模型
理解 content（内容区）、padding（内边距）、border（边框）、margin（外边距）。
默认盒尺寸计算（content-box）。
现代最佳实践：box-sizing: border-box（在宽度/高度计算中包含内边距和边框）。
示例：使用 border-box 时总宽度为 250px 的元素。
理解基础的 CSS 盒模型。
CSS 边框
设置边框宽度（border-width、border-top-width 等）。
设置边框样式（border-style、border-left-style 等：solid（实线）、dashed（虚线）、dotted（点线））。
设置边框颜色（border-color、border-bottom-color 等）。
使用 border 简写（border: 1px solid black）。
使用单侧边框简写（border-top、border-right 等）。
创建圆角（border-radius）。
学习如何设置元素边框样式。
CSS 轮廓
在元素周围绘制轮廓（outline）。
设置轮廓样式（outline-style）。
设置轮廓颜色（outline-color）。
设置轮廓宽度（outline-width）。
偏移轮廓（outline-offset）。
用例：为可访问性设置聚焦状态样式（通常比使用 border 更适合用于聚焦）。
探索与 border 不同的 outline 属性。
CSS 外边距
指定边框外部的外边距（margin-top、margin-right 等）。
使用 margin 简写（1 到 4 个值）。
使用 auto 使块级元素水平居中（margin: 0 auto）。
理解外边距折叠（相邻元素之间的垂直外边距）。
学习如何使用外边距在元素周围创建空间。
CSS 内边距
指定边框内部的内边距（padding-top、padding-right 等）。
使用 padding 简写（1 到 4 个值）。
内边距区域使用元素的背景。
学习如何使用内边距在元素内部创建空间。
CSS 尺寸
设置明确的宽度和高度（width、height）。
使用各种单位（px、%、em、rem、vw、vh）。
设置最小尺寸（min-width、min-height）。
设置最大尺寸（max-width、max-height）。
理解百分比高度需要父元素有明确的高度定义。
控制元素的尺寸。
CSS display 属性
控制元素的布局行为（display）。
常见值：block（块级）、inline（行内）、inline-block（行内块级）、none（隐藏）。
现代布局方法：flex (Flexbox)，grid (Grid Layout)。
隐藏元素：display: none（从布局中移除） 与 visibility: hidden（占用空间）。
理解 display 属性如何影响布局。
CSS 定位
定位方案：static（静态，默认）、relative（相对）、absolute（绝对）、fixed（固定）、sticky（粘性）。
使用偏移属性（top、right、bottom、left）。
理解绝对定位的包含块。
创建堆叠上下文（z-index）。
控制溢出（overflow: hidden, scroll, auto）。
改变鼠标光标样式（cursor）。
学习不同的元素定位方法。
CSS 浮动（传统技术）
使用 float: left 或 float: right。
清除浮动（clear: both）。
当前主要用例：文本环绕图片。
注意：网页布局更推荐使用 Flexbox 和 Grid。
理解 float 属性及其现代用法。
CSS 元素对齐
块级元素水平居中（margin: auto）。
使用 Flexbox 对齐项目（justify-content、align-items、align-self）。
使用 Grid 对齐项目（justify-items、align-items、place-items、justify-self、align-self）。
元素内部文本对齐（text-align）。
特定上下文中的垂直对齐（vertical-align 用于行内/表格单元格，Flex/Grid 用于通用对齐）。
学习使用 Flexbox、Grid 和外边距的现代元素对齐技术。
CSS 组合器
后代组合器（ ）：选择在另一个元素内部的元素。
子组合器（>）：选择直接子元素。
相邻兄弟组合器（+）：选择紧随另一个元素的元素。
通用兄弟组合器（~）：选择所有紧随另一个元素的同级元素。
组合选择器，根据元素之间的关系定位它们。
CSS 生成内容
使用 ::before 和 ::after 伪元素。
使用 content 属性插入内容（文本、符号、图片、计数器）。
使用 CSS 计数器（counter-reset、counter-increment、content: counter(...)）。
指定引号（quotes）。
使用 CSS 向页面添加内容。
CSS 伪类
链接状态：:link（未访问）、:visited（已访问）。
用户操作状态：:hover（悬停）、:active（激活）、:focus（聚焦）、:focus-visible（改进的聚焦样式）。
输入状态：:checked（选中）、:disabled（禁用）、:enabled（启用）。
结构性伪类：:first-child（第一个子元素）、:last-child（最后一个子元素）、:nth-child()（第 N 个子元素）、:nth-of-type()（同类型第 N 个元素）、:only-child（唯一子元素）、:empty（空元素）。
语言伪类：:lang()。
根据元素的状态或在文档中的位置设置样式。
CSS 伪元素
为元素的特定部分设置样式：::first-letter（第一个字母）、::first-line（第一行）。
插入生成内容：::before、::after。
设置列表标记样式：::marker。
设置选中文本样式：::selection。
定位元素内容的特定部分（使用 :: 语法）。
CSS 导航栏
创建垂直和水平导航菜单。
使用 Flexbox 或 Grid 实现现代布局。
将列表项（li）和链接（a）设置为菜单项样式。
使用现代 CSS 布局技术构建导航栏。
CSS 图片库
创建响应式图片库。 使用 Flexbox 或 Grid 进行布局。 为图片和图片说明设置样式。
学习使用现代 CSS 创建图片库。
CSS 透明度
使用 opacity 设置元素的透明度（0.0 到 1.0）。
使用透明度创建悬停效果。
使用 RGBA 和 HSLA 颜色值设置 color 或 background-color 的透明度，而不影响子元素的透明度。
控制元素和颜色的透明度。
CSS 图片精灵
将多张图片组合到一个文件（精灵图）。
使用 background-image、background-position、width 和 height 显示单个图标。
减少 HTTP 请求。
替代方案：SVG 图标、字体图标。
理解图片精灵技术用于性能优化。
CSS 属性选择器
根据属性存在选择：[data-value]。
根据精确属性值选择：[type="submit"]。
根据空格分隔的单词选择：[class~="warning"]。
根据连字符分隔的值选择（语言代码）：[lang|="en"]。
根据前缀选择：[href^="https"]。
根据后缀选择：[src$=".png"]。
根据子字符串选择：[alt*="figure"]。
大小写不敏感匹配：[type="submit" i]。
根据元素的属性和属性值定位元素。
CSS 圆角
使用 border-radius 创建圆角。
应用于所有角落（简写）。
应用于单独角落（border-top-left-radius 等）。
通过为每个角落提供两个值创建椭圆角。
学习如何轻松创建圆角。
CSS 边框图片
使用图片创建复杂边框（border-image-source）。
切割图片用于角落和侧边（border-image-slice）。
定义边框图片宽度（border-image-width）。
控制图片重复（border-image-repeat: stretch, repeat, round）。
使用 border-image 简写。
探索使用图片作为元素边框。
高级 CSS 背景
应用多个背景图片（分层）。
控制背景尺寸（background-size: cover, contain, length, percentage）。
定义背景定位原点（background-origin: padding-box, border-box, content-box）。
指定背景剪裁区域（background-clip: padding-box, border-box, content-box, text）。
创建全屏背景图片。
深入了解高级背景样式。
CSS 渐变
创建平滑的颜色过渡。
线性渐变（linear-gradient()）：指定方向（角度或关键字，如 to top left）和颜色停止点。
径向渐变（radial-gradient()）：指定形状（ellipse 椭圆，circle 圆），大小，位置，和颜色停止点。
重复渐变（repeating-linear-gradient()，repeating-radial-gradient()）。
在渐变中使用透明度。
学习如何在不使用图片的情况下创建背景渐变。
CSS 阴影效果
为文本添加阴影（text-shadow: offset-x offset-y blur-radius color）。
为元素框添加阴影（box-shadow: offset-x offset-y blur-radius spread-radius color）。
可选的 inset 关键字用于内阴影（box-shadow）。
通过逗号分隔值应用多个阴影。
使用文本和框阴影创建深度和强调效果。
高级 CSS 文本效果
处理溢出文本（text-overflow: clip, ellipsis）。
控制单词换行（overflow-wrap: break-word，word-break: break-all）。
指定书写模式（writing-mode）。
控制文本方向（text-orientation）。
探索更高级的文本样式和布局选项。
CSS 自定义字体 (@font-face)
使用 @font-face 规则嵌入自定义字体。
指定字体族名称和源 URL（src: url(...) format(...)）。
包含不同的字体格式以确保浏览器兼容性（推荐使用 WOFF2，WOFF）。
在 @font-face 中定义字体粗细和样式变体。
学习如何在你的网站上使用自定义字体。
CSS 2D 转换
使用 transform 应用 2D 转换。
移动元素（translate(x, y)、translateX(x)、translateY(y)）。
旋转元素（rotate(angle)）。
缩放元素（scale(x, y)、scaleX(x)、scaleY(y)）。
倾斜元素（skew(x-angle, y-angle)、skewX(angle)、skewY(angle)）。
使用 matrix() 组合转换。
改变转换原点（transform-origin）。
在 2D 空间中操作元素，而不影响布局流。
CSS 3D 转换
使用 transform 应用 3D 转换。
绕轴旋转（rotateX(angle)、rotateY(angle)、rotateZ(angle)）。
在 3D 中移动（translate3d(x, y, z)、translateZ(z)）。
在 3D 中缩放（scale3d(x, y, z)、scaleZ(z)）。
设置 3D 空间的透视（perspective 在父元素上）。
定义透视原点（perspective-origin 在父元素上）。
控制嵌套 3D 元素的渲染（transform-style: preserve-3d 在父元素上）。
隐藏旋转元素的背面（backface-visibility: hidden）。
使用 3D 转换创建深度和透视效果。
CSS 过渡
平滑地动画属性变化（transition）。
指定要过渡的属性（transition-property）。
设置时长（transition-duration）。
定义时间函数（加速度曲线：ease、linear、ease-in-out、cubic-bezier()）（transition-timing-function）。
添加开始前的延迟（transition-delay）。
使用 transition 简写属性。
当属性值变化时创建平滑的视觉效果。
CSS 动画
使用 @keyframes 规则定义复杂的动画。
将动画应用于元素（animation）。
指定动画名称（animation-name）。
设置时长（animation-duration）。
定义时间函数（animation-timing-function）。
添加延迟（animation-delay）。
控制迭代次数（animation-iteration-count: infinite 无限）。
设置动画方向（animation-direction: alternate 交替）。
指定填充模式（animation-fill-mode: forwards, backwards 前进，后退）。
控制播放状态（animation-play-state: paused 暂停）。
使用 animation 简写属性。
使用关键帧构建多步动画。
CSS 多列布局
将内容流式布局到多列（column-count 列数，column-width 列宽，columns 简写）。
控制列之间的间隙（column-gap）。
在列之间添加分隔线（column-rule-style、column-rule-width、column-rule-color、column-rule 简写）。
使元素跨越多列（column-span: all 全部）。
控制列中断（break-inside、break-before、break-after）。
创建报纸般的多列文本布局。
CSS 用户界面
允许用户调整元素大小（resize: horizontal 水平，vertical 垂直，both 双向）。
控制轮廓偏移（outline-offset）。
修改光标外观（cursor）。
自定义表单元素外观（accent-color、appearance）。
影响用户界面元素和交互的属性。
CSS 盒尺寸计算
默认（content-box 内容盒）：宽度/高度仅应用于内容区。
推荐（border-box 边框盒）：宽度/高度包括内容、内边距和边框。
在全局使用 box-sizing: border-box 简化布局计算。
控制浏览器如何计算元素尺寸（盒模型）。