基本语法

1. CSS 基本结构

CSS（Cascading Style Sheets）用于设置 HTML 的样式。

CSS 的引入方式

内联样式（在 HTML 标签中直接使用 style 属性）：
1
<p style="color: red;">这是红色的文字。</p>

内部样式表（在 HTML 的 <style> 标签中定义）：

<style>
    p {
        color: blue;
    }
</style>

外部样式表（将样式写在独立的 .css 文件中，并通过 <link> 标签引用）：
1
<link rel="stylesheet" href="styles.css">

2. CSS 选择器

CSS 选择器用于选择需要应用样式的 HTML 元素。

常见选择器

通用选择器：选择所有元素
1
2
3
4
* {
margin: 0;
padding: 0;
}
标签选择器：选择某种 HTML 标签
1
2
3
h1 {
color: green;
}

类选择器：选择特定类的元素

1
2
3

.highlight {
    background-color: yellow;
}

ID 选择器：选择特定 ID 的元素
1
2
3
#main-title {
font-size: 24px;
}
后代选择器：选择某元素内部的所有特定子元素
1
2
3
div p {
color: gray;
}

组合选择器：

选择多个元素：

1
2
3

h1, h2, p {
    font-family: Arial, sans-serif;
}

子元素选择器：
1
2
3
div > p {
color: red;
}
相邻兄弟选择器：
1
2
3
h1 + p {
font-style: italic;
}

3. 常见样式属性

文本和字体样式

p {
    color: blue; /* 文本颜色 */
    font-size: 16px; /* 字体大小 */
    font-family: Arial, sans-serif; /* 字体系列 */
    font-weight: bold; /* 字体粗细 */
    font-style: italic; /* 字体样式 */
    text-align: center; /* 文本对齐 */
    text-decoration: underline; /* 文本装饰 */
    line-height: 1.5; /* 行高 */
    letter-spacing: 2px; /* 字符间距 */
}

背景样式

body {
    background-color: #f0f0f0; /* 背景颜色 */
    background-image: url('background.jpg'); /* 背景图片 */
    background-repeat: no-repeat; /* 背景图片是否重复 */
    background-size: cover; /* 背景图片大小 */
    background-position: center; /* 背景图片位置 */
}

边框样式

div {
    border: 2px solid black; /* 边框宽度、样式和颜色 */
    border-radius: 10px; /* 边框圆角 */
    box-shadow: 2px 2px 5px gray; /* 阴影效果 */
}

盒模型相关属性

div {
    width: 300px; /* 宽度 */
    height: 200px; /* 高度 */
    margin: 20px; /* 外边距 */
    padding: 10px; /* 内边距 */
    border: 1px solid black; /* 边框 */
}

4. 定位与布局

定位（Position）

div {
    position: relative; /* 定位方式（static, relative, absolute, fixed, sticky） */
    top: 10px; /* 相对原位置向下移动 */
    left: 20px; /* 相对原位置向右移动 */
}

浮动（Float）

img {
    float: left; /* 浮动到左侧 */
    margin-right: 10px; /* 添加右侧间距 */
}

Flex 布局

.container {
    display: flex; /* 启用 Flex 布局 */
    justify-content: center; /* 子元素水平居中 */
    align-items: center; /* 子元素垂直居中 */
    gap: 10px; /* 子元素之间的间距 */
}

Grid 布局

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 定义 3 列，每列等宽 */
    gap: 10px; /* 单元格间距 */
}

5. 伪类与伪元素

伪类

伪类用于选择元素的特定状态。

a:hover {
    color: red; /* 鼠标悬停时文字变红 */
}

input:focus {
    border-color: blue; /* 输入框获取焦点时边框变蓝 */
}

伪元素

伪元素用于选择元素的一部分。

p::first-line {
    font-weight: bold; /* 段落的第一行加粗 */
}

p::before {
    content: "提示: "; /* 在段落前添加提示 */
}

6. 媒体查询

媒体查询用于响应式设计，根据屏幕大小应用不同的样式。

/* 屏幕宽度小于600px时 */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

7. 动画

过渡（Transition）

button {
    background-color: blue;
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: red; /* 鼠标悬停时背景色变红 */
}

动画（Animation）

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

div {
    animation: slideIn 1s ease-in-out;
}

8. 单位

绝对单位：px（像素），cm，mm，in。
相对单位：
- em：相对于父元素字体大小。
- rem：相对于根元素字体大小。
- %：相对于父元素的百分比。
- vw：视口宽度的百分比。
- vh：视口高度的百分比。

9. CSS 变量

CSS 支持自定义变量，增强样式的复用性。

:root {
    --main-color: #3498db;
    --padding: 10px;
}

div {
    color: var(--main-color);
    padding: var(--padding);
}

10. 浏览器前缀

为了兼容不同浏览器，某些 CSS 属性需要添加前缀。

div {
    -webkit-transform: rotate(45deg); /* Chrome/Safari */
    -moz-transform: rotate(45deg);    /* Firefox */
    -ms-transform: rotate(45deg);     /* IE */
    transform: rotate(45deg);         /* 标准 */
}

高级特性

1. 高级选择器

属性选择器

匹配具有特定属性的元素：

1
2
3

input[type="text"] {
    border: 1px solid black;
}

属性值以某字符串开头：
1
2
3
a[href^="https"] {
color: green;
}

属性值包含某字符串：

1
2
3

a[href*="example"] {
    color: blue;
}

伪类选择器

:nth-child：匹配第 n 个子元素。

1
2
3

li:nth-child(odd) {
    background-color: lightgray;
}

:not：排除某些元素。
1
2
3
div:not(.active) {
opacity: 0.5;
}

:hover 和 :focus：交互状态。

1
2
3

button:hover {
    background-color: lightblue;
}

2. 变量与计算

CSS 变量

CSS 变量提高样式的复用性和动态性。

:root {
    --main-color: #3498db;
    --padding: 10px;
}

button {
    background-color: var(--main-color);
    padding: var(--padding);
}

`calc()` 函数

使用 calc() 动态计算属性值。

div {
    width: calc(100% - 50px);
    padding: calc(1rem + 10px);
}

3. Flex 布局

Flexbox 是一种用于一维布局的强大工具。

容器属性

.container {
    display: flex;
    flex-direction: row; /* 横向排列 */
    justify-content: space-between; /* 水平对齐方式 */
    align-items: center; /* 垂直对齐方式 */
    gap: 10px; /* 子元素间距 */
}

子元素属性

.item {
    flex: 1; /* 占据等比宽度 */
    align-self: flex-start; /* 单独控制对齐方式 */
}

4. Grid 布局

Grid 是一种用于二维布局的强大工具。

容器属性

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 定义三列 */
    grid-template-rows: auto 1fr; /* 定义两行 */
    gap: 10px; /* 单元格间距 */
}

子元素属性

.item {
    grid-column: 1 / 3; /* 占据第 1 到第 3 列 */
    grid-row: 2; /* 占据第 2 行 */
}

5. 响应式设计

媒体查询

根据屏幕尺寸应用不同的样式。

@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

CSS 中的断点

常见屏幕尺寸的断点：

/* 手机 */
@media (max-width: 600px) { }

/* 平板 */
@media (min-width: 601px) and (max-width: 1024px) { }

/* 桌面 */
@media (min-width: 1025px) { }

6. 过渡与动画

过渡效果

使用 transition 实现元素样式的平滑过渡。

button {
    background-color: blue;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
button:hover {
    background-color: red;
    transform: scale(1.1);
}

动画效果

使用 @keyframes 定义动画。

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

div {
    animation: slideIn 1s ease-in-out;
}

7. 剪裁与遮罩

剪裁（Clipping）

使用 clip-path 裁剪元素。

div {
    clip-path: circle(50%);
    background-color: lightblue;
    width: 100px;
    height: 100px;
}

遮罩（Masking）

通过遮罩图片控制元素的显示。

div {
    mask-image: url(mask.png);
    background-color: red;
}

8. 滤镜（Filters）

滤镜用于给元素应用视觉效果。

img {
    filter: grayscale(100%); /* 转为灰度 */
    filter: blur(5px); /* 添加模糊效果 */
    filter: brightness(1.2); /* 调整亮度 */
}

9. 高级背景与渐变

背景渐变

1
2
3

div {
    background: linear-gradient(to right, red, blue);
}

多背景

div {
    background: url(bg1.jpg), url(bg2.jpg);
    background-position: left top, right bottom;
    background-repeat: no-repeat;
}

10. 伪类与伪元素的高级用法

伪类

:nth-of-type()：匹配特定类型的子元素。
1
2
3
p:nth-of-type(2) {
color: red;
}

:target：匹配当前被锚点选中的元素。

1
2
3

#section:target {
    background-color: yellow;
}

伪元素

创建自定义内容：
1
2
3
h1::after {
content: " 🌟";
}

11. 混合模式

使用 mix-blend-mode 和 background-blend-mode 创建混合效果。

div {
    background: url(image.jpg);
    mix-blend-mode: multiply; /* 与背景相乘混合 */
}

12. 滚动效果

滚动行为

1
2
3

html {
    scroll-behavior: smooth; /* 平滑滚动 */
}

固定背景

body {
    background: url(bg.jpg);
    background-attachment: fixed; /* 背景固定 */
}

13. 自定义字体

使用 @font-face 导入自定义字体。

@font-face {
    font-family: 'CustomFont';
    src: url('customfont.woff2') format('woff2');
}

p {
    font-family: 'CustomFont', sans-serif;
}

14. Web 支持功能

检测浏览器功能支持

@supports (display: grid) {
    .container {
        display: grid;
    }
}

15. CSS Houdini

CSS Houdini 提供低级 API，让开发者扩展 CSS 的功能。

CSS.registerProperty({
    name: '--custom-property',
    syntax: '<color>',
    inherits: false,
    initialValue: 'black',
});

基本语法

1. CSS 基本结构

CSS 的引入方式

2. CSS 选择器

常见选择器

3. 常见样式属性

文本和字体样式

背景样式

边框样式

盒模型相关属性

4. 定位与布局

定位（Position）

浮动（Float）

Flex 布局

Grid 布局

5. 伪类与伪元素

伪类

伪元素

6. 媒体查询

7. 动画

过渡（Transition）

动画（Animation）

8. 单位

9. CSS 变量

10. 浏览器前缀

高级特性

1. 高级选择器

属性选择器

伪类选择器

2. 变量与计算

CSS 变量

calc() 函数

3. Flex 布局

容器属性

子元素属性

4. Grid 布局

容器属性

子元素属性

5. 响应式设计

媒体查询

CSS 中的断点

6. 过渡与动画

过渡效果

动画效果

7. 剪裁与遮罩

剪裁（Clipping）

遮罩（Masking）

8. 滤镜（Filters）

9. 高级背景与渐变

背景渐变

多背景

10. 伪类与伪元素的高级用法

伪类

伪元素

11. 混合模式

12. 滚动效果

滚动行为

固定背景

13. 自定义字体

14. Web 支持功能

检测浏览器功能支持

15. CSS Houdini

`calc()` 函数