CSS概述

原创于 2025-07-01 10:42:28 发布 · 821 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

7 篇文章

订阅专栏

CSS概述

CSS (Cascading Style Sheets) 是用于描述HTML或XML文档呈现样式的样式表语言。

1. CSS基础概念

1.1 CSS的作用

控制网页的布局和外观
实现内容与表现的分离
提高开发效率和维护性

1.2 CSS语法结构

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

示例：

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

1.3 CSS引入方式

内联样式（行内样式）：

<p style="color: red;">红色文字</p>

内部样式表：

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

外部样式表（推荐）：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

2. CSS选择器

2.1 基本选择器

元素选择器：p { ... }
类选择器：.className { ... }
ID选择器：#idName { ... }
通配符选择器：* { ... }

2.2 组合选择器

后代选择器：div p { ... }
子元素选择器：div > p { ... }
相邻兄弟选择器：h1 + p { ... }
通用兄弟选择器：h1 ~ p { ... }

2.3 属性选择器

[attribute]：具有指定属性
[attribute=value]：属性等于特定值
[attribute^=value]：属性以特定值开头
[attribute$=value]：属性以特定值结尾
[attribute*=value]：属性包含特定值

2.4 伪类选择器

:hover：鼠标悬停
:active：被激活
:focus：获得焦点
:nth-child(n)：第n个子元素
:first-child：第一个子元素
:last-child：最后一个子元素

2.5 伪元素选择器

::before：元素前插入内容
::after：元素后插入内容
::first-line：第一行文本
::first-letter：第一个字母

3. CSS盒模型

3.1 盒模型组成

内容(content)：实际内容区域
内边距(padding)：内容与边框之间的空间
边框(border)：围绕内容和内边距的边界
外边距(margin)：元素与其他元素之间的空间

3.2 盒模型类型

标准盒模型：box-sizing: content-box（默认）
- 元素总宽度 = width + padding + border + margin
IE盒模型：box-sizing: border-box
- 元素总宽度 = width（包含padding和border） + margin

4. CSS布局

4.1 传统布局方式

普通流：默认布局方式
浮动(float)：left | right | none
定位(position)：
- static：默认
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
- sticky：粘性定位

4.2 Flex布局（弹性盒子）

.container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    justify-content: flex-start | flex-end | center | space-between | space-around;
    align-items: stretch | flex-start | flex-end | center | baseline;
    flex-wrap: nowrap | wrap | wrap-reverse;
}

4.3 Grid布局（网格布局）

.container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    grid-template-rows: 50px 1fr;
    gap: 10px;
}
.item {
    grid-column: 1 / 3;
    grid-row: 1;
}

5. CSS常用属性

5.1 文本属性

color：文本颜色
font-family：字体
font-size：字号
font-weight：字体粗细
text-align：文本对齐
line-height：行高
text-decoration：文本装饰

5.2 背景属性

background-color：背景颜色
background-image：背景图片
background-repeat：重复方式
background-position：位置
background-size：尺寸
background-attachment：固定或滚动

5.3 边框属性

border-width：边框宽度
border-style：边框样式
border-color：边框颜色
border-radius：圆角半径

5.4 过渡与动画

过渡(transition)：

.element {
    transition: property duration timing-function delay;
}

动画(animation)：

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
.element {
    animation: example 2s infinite;
}

5.5 变形(transform)

translate()：移动
rotate()：旋转
scale()：缩放
skew()：倾斜
matrix()：矩阵变换

6. CSS响应式设计

6.1 媒体查询

@media screen and (max-width: 768px) {
    /* 小屏幕样式 */
}

6.2 响应式单位

vw：视口宽度的1%
vh：视口高度的1%
vmin：视口较小尺寸的1%
vmax：视口较大尺寸的1%
rem：根元素字体大小
em：当前元素字体大小

7. CSS预处理器（Sass/Less）

7.1 变量

$primary-color: #333;
body {
    color: $primary-color;
}

7.2 嵌套

nav {
    ul {
        margin: 0;
        li { display: inline-block; }
    }
}

7.3 混合(Mixin)

@mixin border-radius($radius) {
    border-radius: $radius;
}
.box { @include border-radius(10px); }

7.4 继承

.message {
    border: 1px solid #ccc;
}
.success { @extend .message; border-color: green; }

8. CSS最佳实践

使用外部样式表：分离结构和表现
合理使用选择器：避免过度复杂的选择器
使用CSS重置：消除浏览器默认样式差异
模块化CSS：使用BEM等命名规范
性能优化：
- 减少重绘和回流
- 使用CSS精灵图
- 压缩CSS文件
渐进增强：确保基本功能在所有浏览器可用
浏览器前缀：处理浏览器兼容性

9. CSS新特性

9.1 CSS变量（自定义属性）

:root {
    --main-color: #06c;
}
.element {
    color: var(--main-color);
}

9.2 CSS Grid

更强大的二维布局系统

9.3 Flexbox Gap

.container {
    display: flex;
    gap: 10px;
}

9.4 aspect-ratio

.container {
    aspect-ratio: 16/9;
}

9.5 :is()和:where()伪类

简化选择器编写

10. 浏览器兼容性

使用Can I Use网站检查特性支持
使用Autoprefixer自动添加浏览器前缀
考虑渐进增强策略
必要时使用polyfill