产品展示网站模板下载网站seo在线诊断

✅ 一、选择器（Selectors）

1. 属性选择器

• [attr^=value]: 匹配属性值以特定字符串开头的元素。
• [attr$=value]: 匹配属性值以特定字符串结尾的元素。
• [attr*=value]: 匹配属性值包含特定字符串的元素。

2. 子元素和兄弟元素选择器

• :nth-child(n): 匹配父元素下的第 n 个子元素。
• :nth-last-child(n): 匹配父元素下的倒数第 n 个子元素。
• :nth-of-type(n): 类似于 nth-child, 但只计算同类型的兄弟元素。
• :first-child, :last-child: 分别匹配第一个和最后一个子元素。
• + 相邻兄弟选择器：选中紧接在另一个元素后的某个元素，并且二者有相同的父元素。
• ~ 通用兄弟选择器：选中某元素之后的所有兄弟元素。

3. 其他伪类选择器

• :not(selector): 匹配不符合指定条件的所有元素。
• :empty: 匹配没有子节点的元素。

---

✅ 二、颜色与透明度

1. RGBA 和 HSLA 颜色模式

• rgba(red, green, blue, alpha) 和 hsla(hue, saturation, lightness, alpha) 支持透明度设置。

2. Opacity 属性

• opacity: 设置元素的透明度（0 - 1之间的小数值）。

---

✅ 三、边框与背景

1. 圆角边框

• border-radius: 创建圆角效果。

2. 盒阴影

• box-shadow: 添加阴影效果给元素。

3. 背景渐变

• linear-gradient(): 创建线性渐变背景。
• radial-gradient(): 创建径向渐变背景。

---

✅ 四、文本效果

1. 文本阴影

• text-shadow: 给文本添加阴影效果。

2. 多列布局

• column-count: 指定将元素分割成多少列。
• column-gap: 定义列之间的间距。
• column-rule: 在列间添加分隔线。

3. 字体加载

• @font-face: 自定义字体加载规则。

---

✅ 五、变形、过渡及动画

1. 变形 (Transform)

• transform: 对元素进行旋转 (rotate)、缩放 (scale)、倾斜 (skew) 或移动 (translate) 等操作。

2. 过渡 (Transition)

• transition: 平滑地改变元素样式属性值。
• transition-property: 指定应用过渡效果的 CSS 属性名称。
• transition-duration: 规定完成过渡效果需要花费的时间。
• transition-timing-function: 定义速度曲线。
• transition-delay: 延迟多久后开始过渡。

3. 动画 (Animation)

• @keyframes: 定义动画的关键帧。
• animation: 应用 @keyframes 定义的动画到选定元素上。

---

✅ 六、弹性盒子模型 (Flexbox)

主要概念

• Flex Container & Flex Items: 弹性容器和其直接子元素被称为弹性项目。
• display: flex; / inline-flex: 将元素设为弹性容器。
• 主轴 (main axis) 和交叉轴 (cross axis): 默认情况下，主轴是水平方向，交叉轴垂直于主轴。

常见属性

• flex-direction: 定义主轴方向。
• justify-content: 定义如何沿主轴分布空间。
• align-items: 定义如何沿交叉轴对齐所有项目。
• flex-wrap: 控制是否换行以及如何换行。

---

✅ 七、网格布局 (Grid Layout)

核心概念

• Grid Container & Grid Items: 网格容器和网格项。
• 使用 display: grid; 来创建网格布局。
• grid-template-columns 和 grid-template-rows: 定义列和行的大小。
• grid-column 和 grid-row: 定位网格项跨越的列和行。