CSS 样式用法大全

文章目录

- [一、CSS 基础语法](#一、CSS 基础语法)
- [二、CSS 引入方式](#二、CSS 引入方式)
- [三、CSS 选择器大全](#三、CSS 选择器大全)
- - 常用伪类
  - 常用伪元素
- [四、常用 CSS 属性](#四、常用 CSS 属性)
- - [1. 文本与字体](#1. 文本与字体)
  - [2. 盒模型（Box Model）](#2. 盒模型（Box Model）)
  - - 边框详细设置
  - [3. 背景](#3. 背景)
  - [4. 显示与可见性](#4. 显示与可见性)
  - [5. 定位（Positioning）](#5. 定位（Positioning）)
  - [6. 浮动与清除](#6. 浮动与清除)
- 五、现代布局方式
- - [1. Flexbox（弹性布局）](#1. Flexbox（弹性布局）)
  - [2. Grid（网格布局）](#2. Grid（网格布局）)
  - [3. 多列布局（Columns）](#3. 多列布局（Columns）)
- 六、响应式设计
- - [1. 媒体查询（Media Queries）](#1. 媒体查询（Media Queries）)
  - [2. 视口单位](#2. 视口单位)
  - [3. 相对单位](#3. 相对单位)
- 七、过渡与动画
- - [1. 过渡（Transition）](#1. 过渡（Transition）)
- 八、其他实用技巧
- - [1. 重置默认样式（CSS Reset）](#1. 重置默认样式（CSS Reset）)
  - [2. 清除浮动（Clearfix）](#2. 清除浮动（Clearfix）)
  - [3. 居中技巧](#3. 居中技巧)
- [九、CSS 最佳实践](#九、CSS 最佳实践)
- [十、现代 CSS 特性（可选）](#十、现代 CSS 特性（可选）)

CSS（层叠样式表）是用于描述HTML或XML（包括如SVG或XHTML）文档外观和格式的样式语言。它控制网页的布局、颜色、字体、动画等视觉表现。

以下是一个全面的 CSS 样式用法大全 概览，涵盖常用语法、选择器、属性、布局方式及现代特性。

一、CSS 基础语法

css 复制代码

选择器 {
    属性: 值;
    属性: 值;
}

示例：

css 复制代码

p {
    color: red;
    font-size: 16px;
}

二、CSS 引入方式

内联样式（Inline）
html 复制代码
```
<p style="color: blue;">文本</p>
```

内部样式表（Internal）

html 复制代码

<head>
    <style>
        p { color: green; }
    </style>
</head>

外部样式表（External）
html 复制代码
```
<link rel="stylesheet" href="styles.css">
```
文件 styles.css 内容：
css 复制代码
```
p { color: purple; }
```

三、CSS 选择器大全

选择器	示例	说明
元素选择器	`p { }`	选择所有 `<p>` 元素
类选择器	`.class { }`	选择 class="class" 的元素
ID 选择器	`#id { }`	选择 id="id" 的元素
后代选择器	`div p { }`	div 内的所有 p 元素
子选择器	`div > p { }`	div 的直接子元素 p
相邻兄弟	`h1 + p { }`	紧接在 h1 后的 p 元素
通用兄弟	`h1 ~ p { }`	h1 后面所有的同级 p 元素
属性选择器	`[type="text"]`	拥有 type="text" 的元素
伪类	`a:hover { }`	鼠标悬停时的链接
伪元素	`::before`, `::after`	在元素前后插入内容

常用伪类

:hover - 鼠标悬停
:focus - 获得焦点
:active - 被激活（点击）
:visited - 已访问链接
:first-child, :last-child
:nth-child(n) - 第 n 个子元素
:not() - 排除某个选择器

常用伪元素

::before / ::after - 插入内容
::first-line - 首行样式
::first-letter - 首字母样式
::selection - 选中文本样式

四、常用 CSS 属性

1. 文本与字体

css 复制代码

color: #333;              /* 文字颜色 */
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;         /* normal, bold, 100-900 */
font-style: italic;        /* 斜体 */
text-align: center;        /* left, right, justify */
text-decoration: none;     /* underline, overline, line-through */
text-transform: uppercase; /* 大写、小写、首字母大写 */
line-height: 1.5;          /* 行高 */
letter-spacing: 1px;       /* 字间距 */
word-spacing: 2px;         /* 词间距 */
white-space: nowrap;       /* 控制空白处理 */

2. 盒模型（Box Model）

css 复制代码

width: 200px;
height: 100px;
padding: 10px;             /* 内边距 */
border: 1px solid #ccc;    /* 边框 */
margin: 20px;              /* 外边距 */
box-sizing: border-box;    /* 包含 padding 和 border 在 width/height 中 */

边框详细设置

css 复制代码

border-width: 1px;
border-style: solid;
border-color: black;
/* 或简写 */
border: 2px dashed red;

/* 圆角 */
border-radius: 8px;
border-top-left-radius: 10px;

/* 阴影 */
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

3. 背景

css 复制代码

background-color: #f0f0f0;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;     /* contain, 100% 100% */
background-attachment: fixed; /* 背景固定 */

/* 简写 */
background: #fff url(bg.png) no-repeat center center / cover;

4. 显示与可见性

css 复制代码

display: block;            /* block, inline, inline-block, none */
visibility: hidden;        /* visible, hidden (保留空间) */
opacity: 0.8;              /* 透明度 0-1 */
overflow: hidden;          /* visible, scroll, auto */

5. 定位（Positioning）

css 复制代码

position: static;          /* 默认 */
position: relative;        /* 相对定位 */
position: absolute;        /* 绝对定位（相对于最近的定位祖先） */
position: fixed;           /* 固定定位（相对于视口） */
position: sticky;          /* 粘性定位 */

top: 10px;
right: 10px;
bottom: 10px;
left: 10px;

z-index: 10;               /* 层叠顺序，仅对定位元素有效 */

6. 浮动与清除

css 复制代码

float: left;               /* left, right, none */
clear: both;               /* both, left, right, none */

⚠️ 注意：浮动主要用于早期布局，现多被 Flex/Grid 替代。

五、现代布局方式

1. Flexbox（弹性布局）

css 复制代码

.container {
    display: flex;
    flex-direction: row;           /* row, column, row-reverse, column-reverse */
    justify-content: center;       /* 主轴对齐 */
    align-items: center;           /* 交叉轴对齐 */
    flex-wrap: wrap;               /* 是否换行 */
}

.item {
    flex: 1;                       /* 缩写：flex-grow, flex-shrink, flex-basis */
    flex-basis: 100px;
}

2. Grid（网格布局）

css 复制代码

.container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 列宽 */
    grid-template-rows: 100px 1fr;  /* 行高 */
    gap: 10px;                      /* 网格间距 */
    grid-template-areas:
        "header header"
        "nav main"
        "footer footer";
}

.header { grid-area: header; }
.nav { grid-area: nav; }

3. 多列布局（Columns）

css 复制代码

.container {
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid #ddd;
}

六、响应式设计

1. 媒体查询（Media Queries）

css 复制代码

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

@media (min-width: 1024px) {
    .sidebar {
        width: 300px;
    }
}

2. 视口单位

css 复制代码

width: 100vw;   /* 视口宽度的 100% */
height: 100vh;  /* 视口高度的 100% */
font-size: 4vmin; /* 取 vw 和 vh 中较小者 */

3. 相对单位

em：相对于父元素字体大小
rem：相对于根元素（html）字体大小
%：相对于父元素
ch：相对于字符 '0' 的宽度
ex：相对于小写字母 x 的高度

七、过渡与动画

1. 过渡（Transition）

css 复制代码

.button {
    background: blue;
    transition: all 0.3s ease;
}

.button:hover {
    background: red;
    transform: scale(1.1);
}


### 2. 动画（Animation）
```css
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.element {
    animation: fadeIn 2s ease-in-out infinite alternate;
}

八、其他实用技巧

1. 重置默认样式（CSS Reset）

css 复制代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2. 清除浮动（Clearfix）

css 复制代码

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

3. 居中技巧

水平居中：margin: 0 auto;（块级元素）

水平垂直居中：

css 复制代码

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

或使用 Flex：

css 复制代码

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

九、CSS 最佳实践

语义化命名：使用 BEM、SMACSS 等命名规范
避免过度嵌套：减少选择器复杂度

使用变量（CSS Custom Properties）

css 复制代码

:root {
    --primary-color: #007bff;
}
.btn {
    background: var(--primary-color);
}

模块化与组件化：便于维护
性能优化 ：避免频繁重排重绘，合理使用 transform 和 opacity

十、现代 CSS 特性（可选）

CSS Houdini：自定义属性与渲染
Container Queries：基于容器尺寸的响应式
Scroll Snap：滚动吸附
Backdrop Filter：背景模糊
Color Functions ：color-mix(), oklch() 等（现代浏览器支持）