【CSS】CSS3进阶

个人主页：Guiat
归属专栏：HTML CSS JavaScript

正文

1. CSS 基础概念

CSS（层叠样式表）是一种用于描述HTML或XML文档表现形式的样式表语言。它控制网页的视觉展示，包括布局、颜色、字体等。

1.1 CSS 语法结构

CSS 规则集由选择器和声明块组成：

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

例如：

h1 {
    color: blue;
    font-size: 24px;
}

1.2 CSS 引入方式

1.2.1 内联样式

直接在HTML元素中使用style属性：

<p style="color: red; font-size: 16px;">这是红色文本p>

1.2.2 内部样式表

在HTML文档的部分使用

"flex-container">

1

2

3

4.2 Grid布局

Grid是二维布局系统，同时处理行和列。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
    grid-template-rows: 100px 200px; /* 2行，高度分别为100px和200px */
    grid-gap: 10px; /* 网格间距 */
}

.grid-item {
    grid-column: span 2; /* 横跨2列 */
    grid-row: 1 / 3; /* 从第1行到第3行（不含） */
}

4.2.1 Grid布局示例

    
    
    



    
"grid-container">
        
1
        
2
        
3
        
4
        
5
        
6
    

5. 响应式设计

5.1 媒体查询

媒体查询允许根据设备特性（如屏幕宽度）应用不同的样式：

/* 基础样式 */
body {
    font-size: 16px;
}

/* 在宽度小于768px的设备上应用 */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .sidebar {
        display: none;
    }
}

/* 在宽度小于480px的设备上应用 */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    .container {
        padding: 5px;
    }
}

5.2 响应式单位

.responsive-element {
    /* 相对于视口宽度的单位 */
    width: 50vw;
    
    /* 相对于父元素字体大小的单位 */
    padding: 1.5em;
    
    /* 相对于根元素(html)字体大小的单位 */
    margin: 2rem;
    
    /* 相对于视口尺寸的单位（取较小的那个） */
    font-size: 5vmin;
}

6. CSS 变换与动画

6.1 变换(Transform)

.transform-example {
    /* 平移 */
    transform: translate(50px, 20px);
    
    /* 旋转 */
    transform: rotate(45deg);
    
    /* 缩放 */
    transform: scale(1.5, 0.8);
    
    /* 倾斜 */
    transform: skew(10deg, 20deg);
    
    /* 组合变换 (从右到左执行) */
    transform: rotate(45deg) scale(1.5) translate(50px, 20px);
}

6.2 过渡(Transition)

过渡允许属性值在指定的持续时间内平滑地变化。

.transition-example {
    width: 100px;
    height: 100px;
    background-color: blue;
    
    /* 指定过渡属性、持续时间、速度曲线和延迟 */
    transition: width 0.5s ease, 
                background-color 1s ease-in-out 0.2s;
}

.transition-example:hover {
    width: 200px;
    background-color: red;
}

6.3 动画(Animation)

使用@keyframes规则定义动画序列，然后通过animation属性应用。

/* 定义名为"slide"的动画 */
@keyframes slide {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(300px);
        opacity: 0;
    }
}

.animation-example {
    width: 100px;
    height: 100px;
    background-color: green;
    
    /* 应用动画 */
    animation-name: slide;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    
    /* 简写形式 */
    /* animation: slide 3s ease-in-out 1s infinite alternate; */
}

7. CSS 预处理器

CSS预处理器添加了编程特性（变量、嵌套、混合等），使CSS更易于维护。

7.1 Sass/SCSS示例

// 变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
$padding: 15px;

// 嵌套
.container {
    max-width: 1200px;
    padding: $padding;
    
    .header {
        background-color: $primary-color;
        color: white;
        
        h1 {
            font-size: 24px;
        }
    }
    
    .content {
        background-color: lighten($primary-color, 40%);
        
        &:hover {
            background-color: darken($primary-color, 10%);
        }
    }
}

// 混合(Mixin)
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.button {
    @include border-radius(5px);
    background-color: $secondary-color;
    padding: $padding / 2;
}

8. CSS 新特性

8.1 CSS变量(自定义属性)

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-base: 16px;
    --spacing: 20px;
}

.header {
    background-color: var(--primary-color);
    padding: var(--spacing);
    font-size: calc(var(--font-size-base) * 1.5);
}

.button {
    background-color: var(--secondary-color);
    padding: calc(var(--spacing) / 2);
    margin: var(--spacing);
}

8.2 网格与子网格

.grid-container {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
}

.nested-grid {
    grid-column: span 3;
    
    /* CSS Grid Level 2: 子网格 */
    display: grid;
    grid-template-columns: subgrid; /* 使用父网格的列定义 */
}

8.3 CSS Shapes

.circle-text {
    width: 300px;
    height: 300px;
    shape-outside: circle(50%);
    float: left;
    /* 文本将围绕圆形流动 */
}

.custom-shape {
    width: 300px;
    height: 200px;
    shape-outside: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
    float: right;
    /* 文本将围绕多边形流动 */
}

9. CSS 滤镜和混合模式

9.1 CSS 滤镜 (Filter)

滤镜可以对元素应用视觉效果，如模糊、亮度调整等。

.filter-examples img {
    width: 200px;
    margin: 10px;
}

.blur {
    filter: blur(5px);
}

.brightness {
    filter: brightness(150%);
}

.contrast {
    filter: contrast(200%);
}

.grayscale {
    filter: grayscale(100%);
}

.sepia {
    filter: sepia(80%);
}

.hue-rotate {
    filter: hue-rotate(180deg);
}

.invert {
    filter: invert(100%);
}

.combined {
    filter: contrast(150%) brightness(120%) sepia(30%);
}

9.2 混合模式 (Blend Modes)

混合模式决定了元素如何与其背景或重叠元素混合。

.blend-container {
    background-image: url('background.jpg');
    padding: 20px;
}

.multiply {
    background-color: rgba(255, 0, 0, 0.5);
    mix-blend-mode: multiply;
}

.screen {
    background-color: rgba(0, 255, 0, 0.5);
    mix-blend-mode: screen;
}

.overlay {
    background-color: rgba(0, 0, 255, 0.5);
    mix-blend-mode: overlay;
}

/* 背景混合 */
.background-blend {
    width: 300px;
    height: 300px;
    background-image: url('pattern.png'), url('photo.jpg');
    background-blend-mode: overlay;
}

10. CSS 形状与裁剪

10.1 形状路径 (shape-outside)

shape-outside属性定义了一个形状，文本将环绕这个形状流动。

.circle-float {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #3498db;
    float: left;
    shape-outside: circle(50%);
    margin-right: 20px;
}

.ellipse-float {
    width: 300px;
    height: 200px;
    background: #e74c3c;
    border-radius: 50%;
    float: right;
    shape-outside: ellipse(40% 50%);
    margin-left: 20px;
}

.polygon-float {
    width: 200px;
    height: 200px;
    background: #2ecc71;
    float: left;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%);
    shape-outside: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%);
    margin-right: 20px;
}

10.2 裁剪路径 (clip-path)

clip-path属性用于裁剪元素，只显示通过裁剪路径定义的部分。

.clip-circle {
    clip-path: circle(40%);
}

.clip-ellipse {
    clip-path: ellipse(30% 50% at 50% 50%);
}

.clip-polygon {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    /* 创建一个菱形 */
}

.clip-path-animation {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #3498db, #9b59b6);
    animation: morph 3s infinite alternate;
}

@keyframes morph {
    0% {
        clip-path: circle(40%);
    }
    50% {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

11. CSS 性能优化

11.1 选择器性能

选择器从右到左解析，最右边的选择器被称为"关键选择器"（key selector）。

/* 低效选择器 - 浏览器必须检查所有div元素 */
div * {
    color: red;
}

/* 低效选择器 - 浏览器必须检查所有a元素 */
#header .nav li a {
    color: blue;
}

/* 高效选择器 - 直接通过类找到元素 */
.nav-link {
    color: blue;
}

11.1.1 选择器性能优化建议

1. 避免使用通用选择器（*）
2. 减少选择器的深度
3. 使用类选择器代替复杂的后代选择器
4. 避免过度使用子选择器（>）和相邻选择器（+）

11.2 重排与重绘优化

/* 触发重排的属性变化 */
.reflow-example {
    /* 使用transform代替下面的属性 */
    /* left: 100px; */
    /* top: 50px; */
    /* width: 200px; */
    /* height: 300px; */
    
    /* 使用transform避免重排 */
    transform: translate(100px, 50px);
}

/* 只触发重绘的属性变化 */
.repaint-example {
    /* 这些只触发重绘，性能更好 */
    color: red;
    background-color: blue;
    visibility: hidden;
}

/* 使用will-change提示浏览器 */
.optimized-animation {
    will-change: transform, opacity;
    transition: transform 0.3s, opacity 0.3s;
}

12. CSS 架构与组织

12.1 BEM命名规范

BEM代表块（Block）、元素（Element）和修饰符（Modifier），是一种CSS命名约定。

/* 块 */
.card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
}

/* 元素（使用__连接块和元素） */
.card__title {
    font-size: 18px;
    margin-bottom: 8px;
}

.card__image {
    width: 100%;
    height: auto;
}

.card__content {
    color: #333;
}

/* 修饰符（使用--连接元素和修饰符） */
.card--featured {
    border-color: gold;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card__title--large {
    font-size: 24px;
}

12.2 SMACSS架构

SMACSS（可扩展和模块化CSS架构）将CSS分为5类：

/* 1. 基础规则 */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
}

/* 2. 布局规则 (前缀l- 或 layout-) */
.l-header {
    height: 80px;
}
.l-sidebar {
    width: 25%;
    float: left;
}
.l-main {
    width: 75%;
    float: right;
}

/* 3. 模块规则 */
.nav {
    list-style: none;
}
.nav-item {
    display: inline-block;
}

/* 4. 状态规则 (前缀is- 或 has-) */
.is-active {
    font-weight: bold;
    color: #333;
}
.is-hidden {
    display: none;
}

/* 5. 主题规则 (前缀theme-) */
.theme-dark {
    background: #333;
    color: white;
}
.theme-light {
    background: white;
    color: #333;
}

13. 现代CSS框架比较

13.1 功能对比表

特性	Bootstrap 5	Tailwind CSS	Bulma	Material UI
类型	组件库	原子CSS	组件库	组件库
文件大小	~150KB	~10KB (生产优化后)	~200KB	~100KB
定制化	中等	高	中等	中等
学习曲线	低	中高	低	中等
JS依赖	可选	不需要	不需要	需要React
响应式	内置	内置	内置	内置
流行度	非常高	高	中等	高

13.2 示例代码比较

13.2.1 Bootstrap 5

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <img src="image.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card titleh5>
          <p class="card-text">Some quick example text.p>
          <a href="#" class="btn btn-primary">Go somewherea>
        div>
      div>
    div>
  div>
div>

13.2.2 Tailwind CSS

<div class="container mx-auto px-4">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full md:w-1/2 px-4">
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <img class="w-full" src="image.jpg" alt="...">
        <div class="p-4">
          <h5 class="text-xl font-semibold mb-2">Card titleh5>
          <p class="text-gray-700 mb-4">Some quick example text.p>
          <a href="#" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Go somewhere
          a>
        div>
      div>
    div>
  div>
div>

14. CSS 变量的高级应用

14.1 主题切换

使用CSS变量可以轻松实现主题切换：

/* 定义默认（浅色）主题变量 */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --primary-color: #4299e1;
    --secondary-color: #ed8936;
    --border-color: #e2e8f0;
}

/* 定义深色主题变量 */
.dark-theme {
    --bg-color: #1a202c;
    --text-color: #f7fafc;
    --primary-color: #90cdf4;
    --secondary-color: #fbd38d;
    --border-color: #2d3748;
}

/* 使用变量 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

.button {
    background-color: var(--primary-color);
    border: 1px solid var(--border-color);
}

/* JavaScript切换主题 */
// document.getElementById('themeToggle').addEventListener('click', function() {
//   document.body.classList.toggle('dark-theme');
// });

14.2 响应式变量

可以在媒体查询中修改CSS变量值：

:root {
    --h1-font-size: 2.5rem;
    --paragraph-margin: 1.5rem;
    --container-width: 1200px;
}

@media (max-width: 768px) {
    :root {
        --h1-font-size: 2rem;
        --paragraph-margin: 1rem;
        --container-width: 100%;
    }
}

@media (max-width: 480px) {
    :root {
        --h1-font-size: 1.5rem;
        --paragraph-margin: 0.75rem;
    }
}

h1 {
    font-size: var(--h1-font-size);
}

p {
    margin-bottom: var(--paragraph-margin);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
}

15. CSS Grid高级布局技巧

15.1 区域命名与布局

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header header"
        "sidebar main main main"
        "footer footer footer footer";
    min-height: 100vh;
    gap: 10px;
}

.header {
    grid-area: header;
    background-color: #3498db;
    padding: 1rem;
}

.sidebar {
    grid-area: sidebar;
    background-color: #2ecc71;
}

.main-content {
    grid-area: main;
    background-color: #ecf0f1;
}

.footer {
    grid-area: footer;
    background-color: #34495e;
    padding: 1rem;
}

/* 响应式布局修改 */
@media (max-width: 768px) {
    .dashboard {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

15.2 auto-fill 与 auto-fit

.gallery {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* 或者使用 auto-fit */
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
}

/* 
auto-fill: 尽可能多地创建网格轨道，即使有空轨道
auto-fit: 扩展现有项目以填充可用空间
*/

.gallery-item {
    height: 200px;
    background-color: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

结语
感谢您的阅读！期待您的一键三连！欢迎指正！