CSS 详解速览

最新推荐文章于 2025-08-01 23:32:40 发布

csdn_tom_168

最新推荐文章于 2025-08-01 23:32:40 发布

阅读量309

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css 前端学习

本文链接：https://blog.youkuaiyun.com/csdn_tom_168/article/details/149689788

前端专栏收录该内容

20 篇文章

订阅专栏

CSS （Cascading Style Sheets）详解速览

1. CSS (层叠样式表 ) 基础概念

1.1 CSS 简介

CSS（Cascading Style Sheets）是层叠样式表，用于控制网页的外观和布局。

1.2 CSS 语法结构

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

/* 示例 */
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

1.3 CSS 引入方式

内联样式

<p style="color: red; font-size: 16px;">这是内联样式</p>

内部样式表

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

外部样式表

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

2. CSS 选择器

2.1 基本选择器

/* 元素选择器 */
p { color: black; }

/* 类选择器 */
.highlight { background-color: yellow; }

/* ID 选择器 */
#header { height: 100px; }

/* 通用选择器 */
* { margin: 0; padding: 0; }

2.2 组合选择器

/* 后代选择器 */
div p { color: blue; }

/* 子选择器 */
div > p { font-weight: bold; }

/* 相邻兄弟选择器 */
h1 + p { margin-top: 0; }

/* 通用兄弟选择器 */
h1 ~ p { color: gray; }

2.3 属性选择器

/* 存在属性 */
input[type] { border: 1px solid #ccc; }

/* 属性值完全匹配 */
input[type="text"] { width: 200px; }

/* 属性值以指定内容开头 */
a[href^="https"] { color: green; }

/* 属性值以指定内容结尾 */
a[href$=".pdf"] { color: red; }

/* 属性值包含指定内容 */
a[href*="example"] { text-decoration: underline; }

2.4 伪类选择器

/* 链接状态 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* 结构伪类 */
li:first-child { font-weight: bold; }
li:last-child { color: gray; }
li:nth-child(2n) { background: #f0f0f0; }
li:nth-child(3n+1) { background: #e0e0e0; }

/* 表单伪类 */
input:focus { border-color: blue; }
input:disabled { background: #f5f5f5; }
input:checked + label { font-weight: bold; }

/* 其他伪类 */
p:empty { display: none; }
p:target { background: yellow; }

2.5 伪元素选择器

/* 第一个字母 */
p::first-letter { font-size: 2em; font-weight: bold; }

/* 第一行 */
p::first-line { font-weight: bold; }

/* 选中文本 */
::selection { background: blue; color: white; }

/* 在元素前插入内容 */
.quote::before { content: """; }

/* 在元素后插入内容 */
.quote::after { content: """; }

/* 占位符 */
input::placeholder { color: #999; }

3. CSS 盒模型

3.1 盒模型概念

.box {
    /* 内容区域 */
    width: 200px;
    height: 100px;
    
    /* 内边距 */
    padding: 20px;
    
    /* 边框 */
    border: 5px solid #333;
    
    /* 外边距 */
    margin: 10px;
}

3.2 盒模型类型

/* 标准盒模型 */
.standard-box {
    box-sizing: content-box; /* 默认值 */
    width: 200px;
    padding: 20px;
    border: 5px solid #333;
    /* 实际宽度 = 200 + 20*2 + 5*2 = 250px */
}

/* 怪异盒模型 */
.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid #333;
    /* 实际宽度 = 200px（包含 padding 和 border） */
}

3.3 外边距合并

/* 垂直外边距合并 */
.top-element {
    margin-bottom: 20px;
}

.bottom-element {
    margin-top: 30px;
    /* 实际外边距 = max(20px, 30px) = 30px */
}

4. 文本和字体样式

4.1 字体属性

.text-styling {
    /* 字体族 */
    font-family: "Microsoft YaHei", Arial, sans-serif;
    
    /* 字体大小 */
    font-size: 16px;
    
    /* 字体粗细 */
    font-weight: bold; /* normal | bold | 100-900 */
    
    /* 字体样式 */
    font-style: italic; /* normal | italic | oblique */
    
    /* 字体变体 */
    font-variant: small-caps;
    
    /* 行高 */
    line-height: 1.5;
    
    /* 字体大小调整 */
    font-size-adjust: 0.5;
}

4.2 文本属性

.text-properties {
    /* 颜色 */
    color: #333;
    
    /* 文本对齐 */
    text-align: center; /* left | center | right | justify */
    
    /* 文本装饰 */
    text-decoration: underline; /* none | underline | overline | line-through */
    
    /* 文本转换 */
    text-transform: uppercase; /* none | capitalize | uppercase | lowercase */
    
    /* 文本缩进 */
    text-indent: 2em;
    
    /* 字母间距 */
    letter-spacing: 2px;
    
    /* 单词间距 */
    word-spacing: 5px;
    
    /* 白空格处理 */
    white-space: nowrap;
    
    /* 文本溢出 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

4.3 自定义字体

@font-face {
    font-family: 'MyCustomFont';
    src: url('font.woff2') format('woff2'),
         url('font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.custom-font {
    font-family: 'MyCustomFont', Arial, sans-serif;
}

5. 背景和边框

5.1 背景属性

.background-properties {
    /* 背景颜色 */
    background-color: #f0f0f0;
    
    /* 背景图片 */
    background-image: url('bg.jpg');
    
    /* 背景重复 */
    background-repeat: no-repeat; /* repeat | repeat-x | repeat-y | no-repeat */
    
    /* 背景定位 */
    background-position: center top; /* 关键词 | 百分比 | 长度值 */
    
    /* 背景附着 */
    background-attachment: fixed; /* scroll | fixed */
    
    /* 背景尺寸 */
    background-size: cover; /* auto | cover | contain | 长度值 */
    
    /* 简写 */
    background: #f0f0f0 url('bg.jpg') no-repeat center/cover;
}

5.2 多背景

.multi-background {
    background-image: 
        url('top.png'),
        url('middle.png'),
        url('bottom.png');
    background-position: 
        top left,
        center,
        bottom right;
    background-repeat: no-repeat;
}

5.3 渐变背景

/* 线性渐变 */
.linear-gradient {
    background: linear-gradient(
        to right,           /* 方向 */
        #ff0000,           /* 起始颜色 */
        #00ff00 50%,       /* 中间颜色 */
        #0000ff            /* 结束颜色 */
    );
}

/* 径向渐变 */
.radial-gradient {
    background: radial-gradient(
        circle at center,   /* 形状和位置 */
        #ff0000,           /* 起始颜色 */
        #0000ff 70%        /* 结束颜色 */
    );
}

/* 重复渐变 */
.repeating-gradient {
    background: repeating-linear-gradient(
        45deg,
        #ff0000,
        #ff0000 10px,
        #00ff00 10px,
        #00ff00 20px
    );
}

5.4 边框属性

.border-properties {
    /* 边框宽度 */
    border-width: 2px;
    
    /* 边框样式 */
    border-style: solid; /* none | solid | dashed | dotted | double */
    
    /* 边框颜色 */
    border-color: #333;
    
    /* 简写 */
    border: 2px solid #333;
    
    /* 单独设置各边 */
    border-top: 1px solid red;
    border-right: 2px dashed blue;
    border-bottom: 3px dotted green;
    border-left: 4px double orange;
}

5.5 圆角边框

.border-radius {
    border-radius: 10px;
    /* 分别设置四个角 */
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 5px;
}

5.6 阴影效果

.shadow-effects {
    /* 盒阴影 */
    box-shadow: 
        2px 2px 5px rgba(0,0,0,0.3),  /* 外阴影 */
        inset 0 0 10px rgba(255,0,0,0.5); /* 内阴影 */
    /* box-shadow: x偏移 y偏移 模糊半径 扩展半径 颜色 inset */
    
    /* 文本阴影 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

6. 布局属性

6.1 定位布局

.positioning {
    /* 静态定位（默认） */
    position: static;
    
    /* 相对定位 */
    position: relative;
    top: 10px;
    left: 20px;
    
    /* 绝对定位 */
    position: absolute;
    top: 0;
    right: 0;
    
    /* 固定定位 */
    position: fixed;
    top: 0;
    left: 0;
    
    /* 粘性定位 */
    position: sticky;
    top: 0;
}

6.2 浮动布局

.float-layout {
    /* 浮动 */
    float: left; /* left | right | none */
    
    /* 清除浮动 */
    clear: both; /* left | right | both | none */
}

/* 清除浮动的常用方法 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

6.3 弹性盒子 (Flexbox)

.flex-container {
    display: flex;
    flex-direction: row; /* row | row-reverse | column | column-reverse */
    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
    justify-content: space-between; /* 主轴对齐 */
    align-items: center; /* 交叉轴对齐 */
    align-content: space-around; /* 多行对齐 */
}

.flex-item {
    flex-grow: 1; /* 放大比例 */
    flex-shrink: 1; /* 缩小比例 */
    flex-basis: auto; /* 基础大小 */
    /* 简写：flex: grow shrink basis */
    flex: 1 1 auto;
}

6.4 网格布局 (Grid)

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
    grid-template-rows: auto 1fr auto; /* 行高 */
    grid-gap: 10px; /* 网格间距 */
    /* 简写：grid-template: rows / columns */
    grid-template: auto 1fr auto / repeat(3, 1fr);
}

.grid-item {
    grid-column: 1 / 3; /* 占据第1到第3列 */
    grid-row: 1; /* 在第1行 */
    /* 简写：grid-area: row-start / col-start / row-end / col-end */
    grid-area: 1 / 1 / 2 / 4;
}

6.5 多列布局

.multi-column {
    column-count: 3;                /* 列数 */
    column-width: 200px;            /* 列宽 */
    column-gap: 20px;               /* 列间距 */
    column-rule: 1px solid #ccc;    /* 列边框 */
    column-fill: balance;           /* 列填充方式 */
}

.column-span {
    column-span: all;               /* 跨越所有列 */
}

7. 变换和动画

7.1 2D 变换

.transform-2d {
    transform: 
        translate(50px, 30px)    /* 平移 */
        rotate(45deg)            /* 旋转 */
        scale(1.5, 1.2)          /* 缩放 */
        skew(30deg, 15deg);      /* 倾斜 */
}

/* 单独使用 */
.translate { transform: translateX(100px); }
.rotate { transform: rotate(90deg); }
.scale { transform: scale(2); }
.skew { transform: skewX(30deg); }

7.2 3D 变换

.transform-3d {
    transform-style: preserve-3d; /* 保持3D空间 */
    perspective: 1000px; /* 透视距离 */
    transform: 
        translate3d(10px, 20px, 30px)
        rotateX(45deg)
        rotateY(30deg)
        rotateZ(15deg)
        scale3d(1.2, 1.2, 1.2);
}

.perspective-container {
    perspective: 800px;
}

.perspective-item {
    transform: rotateY(45deg);
}

7.3 过渡效果 (Transition)

.transition-example {
    width: 100px;
    height: 100px;
    background: red;
    transition: 
        width 2s ease-in-out,
        height 1s linear 0.5s,
        background 0.5s step-end;
    /* transition: property duration timing-function delay */
}

.transition-example:hover {
    width: 200px;
    height: 200px;
    background: blue;
}

/* 常用缓动函数 */
.ease { transition-timing-function: ease; }
.linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }

7.4 动画效果 (Animation)

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(10%);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.animated-element {
    animation: 
        slideIn 2s ease-in-out 0.5s infinite alternate;
    /* animation: name duration timing-function delay iteration-count direction fill-mode play-state */
}

/* 动画属性详解 */
.animation-properties {
    animation-name: slideIn;                    /* 动画名称 */
    animation-duration: 2s;                     /* 持续时间 */
    animation-timing-function: ease-in-out;     /* 缓动函数 */
    animation-delay: 0.5s;                      /* 延迟时间 */
    animation-iteration-count: infinite;        /* 重复次数 */
    animation-direction: alternate;             /* 方向 */
    animation-fill-mode: both;                  /* 填充模式 */
    animation-play-state: running;              /* 播放状态 */
}

8. 响应式设计

8.1 媒体查询

/* 基本媒体查询 */
@media screen and (max-width: 768px) {
    .container {
        width: 100%;
        padding: 10px;
    }
}

/* 复杂媒体查询 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .sidebar {
        width: 25%;
    }
}

/* 设备方向 */
@media screen and (orientation: landscape) {
    .hero {
        height: 50vh;
    }
}

/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url('logo@2x.png');
    }
}

/* 打印样式 */
@media print {
    .no-print {
        display: none;
    }
    .page-break {
        page-break-before: always;
    }
}

8.2 视口单位

.viewport-units {
    width: 100vw;  /* 视口宽度 */
    height: 100vh; /* 视口高度 */
    min-width: 50vmin; /* 视口最小尺寸 */
    max-height: 80vmax; /* 视口最大尺寸 */
}

8.3 弹性图片

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 背景图片响应式 */
.responsive-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

9. 滤镜和混合模式

9.1 滤镜效果

.filter-effects {
    filter: 
        blur(5px)                    /* 模糊 */
        brightness(1.2)              /* 亮度 */
        contrast(1.5)                /* 对比度 */
        grayscale(50%)               /* 灰度 */
        hue-rotate(90deg)            /* 色相旋转 */
        invert(100%)                 /* 反色 */
        opacity(0.8)                 /* 透明度 */
        saturate(2)                  /* 饱和度 */
        sepia(50%)                   /* 褐色 */
        drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); /* 投影 */
}

9.2 混合模式

.blend-modes {
    /* 背景混合模式 */
    background-blend-mode: multiply; /* multiply | screen | overlay | darken | lighten 等 */
    
    /* 混合模式 */
    mix-blend-mode: color-burn;
}

10. 变量和自定义属性

10.1 CSS 变量

:root {
    --primary-color: #007cba;
    --secondary-color: #f0f0f0;
    --font-size-base: 16px;
    --border-radius: 5px;
}

.component {
    color: var(--primary-color);
    background: var(--secondary-color);
    font-size: var(--font-size-base);
    border-radius: var(--border-radius);
    
    /* 带默认值 */
    padding: var(--spacing, 10px);
}

10.2 变量作用域

/* 全局变量 */
:root {
    --global-color: blue;
}

/* 局部变量 */
.container {
    --local-color: red;
    color: var(--local-color);
}

.child {
    /* 继承父级变量 */
    color: var(--local-color);
    /* 使用全局变量 */
    background: var(--global-color);
}

11. 伪类和伪元素进阶

11.1 表单伪类

/* 输入框状态 */
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:required { border-left: 3px solid orange; }
input:optional { border-left: 3px solid blue; }

/* 范围输入 */
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
}

11.2 结构伪类

/* 第一个和最后一个 */
li:first-of-type { font-weight: bold; }
li:last-of-type { border-bottom: none; }

/* 唯一子元素 */
p:only-child { text-align: center; }
p:only-of-type { font-style: italic; }

/* 空元素 */
p:empty::before { content: "空段落"; }

12. 性能优化

12.1 CSS 优化技巧

/* 避免低效选择器 */
/* 不好的写法 */
ul li a span { color: blue; }

/* 好的写法 */
.nav-link { color: blue; }

/* 使用简写属性 */
.margin-padding {
    margin: 10px 20px; /* 代替 margin-top, margin-right 等 */
    padding: 5px 10px;
    border: 1px solid #333; /* 代替 border-width, border-style, border-color */
}

/* 避免使用通配符选择器 */
/* 不好的写法 */
* { margin: 0; padding: 0; }

/* 好的写法 */
body, h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }

12.2 关键路径优化

/* 关键 CSS 内联 */
/* 将首屏渲染必需的 CSS 内联到 HTML 中 */

/* 非关键 CSS 异步加载 */
/* <link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> */

13. 实际应用示例

13.1 响应式导航菜单

.nav-menu {
    display: flex;
    list-style: none;
    background: #333;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    transition: background 0.3s ease;
}

.nav-link:hover {
    background: #555;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
    }
    
    .nav-link {
        padding: 10px 15px;
    }
}

/* 下拉菜单 */
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

13.2 卡片布局

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-title {
    margin: 0 0 10px 0;
    font-size: 1.5em;
    color: #333;
}

.card-description {
    color: #666;
    line-height: 1.6;
}

13.3 加载动画

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.loading-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

14. 浏览器兼容性

14.1 前缀处理

.transform-prefixed {
    -webkit-transform: rotate(45deg); /* Safari, Chrome */
    -moz-transform: rotate(45deg);    /* Firefox */
    -ms-transform: rotate(45deg);     /* IE */
    -o-transform: rotate(45deg);      /* Opera */
    transform: rotate(45deg);         /* 标准语法 */
}

/* 使用 autoprefixer 自动添加前缀 */

14.2 渐进增强策略

.button {
    /* 基础样式 */
    padding: 10px 20px;
    background: #007cba;
    color: white;
    border: none;
    
    /* 增强样式 */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.button:hover {
    background: #005a87;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}