CSS的定义和作用

CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML文档的呈现方式。它通过选择器和属性控制网页元素的布局、颜色、字体等视觉表现，实现内容与样式的分离。

CSS的基本语法结构

CSS规则由选择器和声明块组成。选择器指定要样式化的HTML元素，声明块包含一个或多个属性-值对，用大括号包裹。例如：

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

这个例子中，h1是选择器，color、font-size和text-align是属性，blue、24px和center是对应的值。每个声明以分号结束。

CSS的核心作用

分离内容与表现

HTML负责文档结构，CSS控制视觉呈现。这种分离使代码更易维护，例如修改网站配色方案只需调整CSS文件：

<!-- HTML -->
<article class="post">
  <h2>文章标题</h2>
  <p>正文内容...</p>
</article>

<!-- CSS -->
<style>
.post {
  width: 80%;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}
.post h2 {
  color: #333;
  border-bottom: 1px solid #eee;
}
</style>

实现响应式设计

通过媒体查询适配不同设备：

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

创建复杂动画效果

CSS3支持过渡和动画：

.button {
  transition: all 0.3s ease;
  background: #3498db;
}

.button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

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

.slide-element {
  animation: slideIn 0.5s forwards;
}

CSS选择器详解

基础选择器类型

1. 元素选择器：p { color: red; }
2. 类选择器：.warning { background: yellow; }
3. ID选择器：#header { height: 80px; }
4. 属性选择器：input[type="text"] { border: 1px solid #ccc; }

组合选择器

/* 后代选择器 */
article p { line-height: 1.6; }

/* 子元素选择器 */
ul > li { list-style: none; }

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

/* 通用兄弟选择器 */
h2 ~ p { color: #666; }

伪类和伪元素

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

/* 用户交互 */
button:active { transform: translateY(1px); }
input:focus { outline: 2px solid orange; }

/* 结构伪类 */
li:nth-child(odd) { background: #f9f9f9; }
tr:nth-of-type(2n+1) { background: #eee; }

/* 伪元素 */
p::first-letter { font-size: 200%; }
blockquote::before { content: '"'; }

CSS盒模型解析

每个HTML元素都被视为一个矩形盒子，包含：

.box {
  width: 300px;         /* 内容宽度 */
  padding: 20px;        /* 内边距 */
  border: 5px solid #000; /* 边框 */
  margin: 30px;         /* 外边距 */
  box-sizing: border-box; /* 切换盒模型计算方式 */
}

标准盒模型 vs 替代盒模型

• 标准模型：width仅指内容宽度
• border-box模型：width包含内容、内边距和边框

/* 传统盒模型计算 */
.standard-box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* 实际占用宽度：200 + 40 + 10 = 250px */
}

/* border-box模型 */
.border-box-example {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* 实际宽度保持200px */
}

布局系统演进

传统布局方式

/* 浮动布局 */
.float-left {
  float: left;
  width: 50%;
}
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* 定位布局 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexbox弹性布局

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1 0 200px;
  margin: 10px;
}

Grid网格布局

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

CSS预处理器优势

Sass功能示例

// 变量
$primary-color: #3498db;
$spacing-unit: 8px;

// 嵌套
.nav {
  ul {
    margin: 0;
    li {
      padding: $spacing-unit;
      a {
        color: $primary-color;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

// Mixin
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
  -webkit-box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow(0, 2px, 4px, rgba(0,0,0,.1));
}

CSS性能优化实践

选择器效率

/* 低效选择器 */
div.container ul.nav li a {}

/* 高效选择器 */
.nav-link {}

渲染性能优化

/* 触发GPU加速 */
.animate {
  transform: translateZ(0);
  will-change: transform;
}

/* 减少重排 */
.fixed-size {
  width: 100px;
  height: 100px;
}

/* 避免昂贵属性 */
.no-box-shadow {
  /* box-shadow会触发重绘 */
}

CSS自定义属性

:root {
  --main-bg-color: #f8f9fa;
  --primary-color: #4285f4;
  --spacing: 16px;
}

.component {
  background: var(--main-bg-color);
  padding: var(--spacing);
  color: var(--primary-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: #202124;
    --primary-color: #8ab4f8;
  }
}

CSS与JavaScript交互

类名切换控制样式

// 添加/移除类
element.classList.add('active');
element.classList.toggle('hidden');

// 样式直接操作
element.style.setProperty('--x-position', '100px');

CSS-in-JS示例

// styled-components示例
const Button = styled.button`
  background: ${props => props.primary ? '#4CAF50' : '#f1f1f1'};
  padding: 10px 24px;
  font-size: 16px;
  border-radius: 4px;
  transition: all 0.3s;

  &:hover {
    opacity: 0.9;
  }
`;

现代CSS新特性

容器查询

.component {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .component {
    display: flex;
  }
}

级联层

@layer base, theme, utilities;

@layer base {
  h1 { font-size: 2rem; }
}

@layer theme {
  h1 { color: blue; }
}

@layer utilities {
  .text-center { text-align: center; }
}

颜色函数

.element {
  color: oklch(70% 0.15 250);
  background: color-mix(in srgb, #34c9eb 30%, white);
}