css 的简单总结及案例分享

CSS（Cascading Style Sheets）是一种用于描述HTML或XML文档外观和布局的样式表语言。它使我们能够控制网页的颜色、字体、间距和排版，提升页面的用户体验。以下是CSS的主要概念及其相应的代码示例。

1. 选择器

CSS选择器用于定位HTML元素，从而为其应用样式。

• 通用选择器 (*)：选择所有元素。

  * {
      margin: 0;
      padding: 0;
  }
  

• 类型选择器：选择特定的HTML标签。

  h1, h2, h3 {
      font-family: Arial, sans-serif;
  }
  

• 类选择器 (.)：选择带有特定类名的元素。

  .highlight {
      background-color: yellow;
  }
  

• ID选择器 (#)：选择具有特定ID的元素。

  #main-header {
      color: blue;
  }
  

• 属性选择器：选择带有特定属性的元素。

  input[type="text"] {
      border: 1px solid #ccc;
  }
  

2. 伪类和伪元素

伪类和伪元素用于选择元素的特定状态或部分。

• 伪类：如:hover（当鼠标悬停时应用样式）。

  a:hover {
      color: red;
  }
  

• 伪元素：如::before（在元素内容之前添加内容）。

  p::before {
      content: "Note: ";
      font-weight: bold;
  }
  

3. 文本样式

CSS提供了多种文本样式属性来控制文本的外观。

• 字体系列：控制文本的字体。

  body {
      font-family: "Arial", sans-serif;
  }
  

• 字体大小：定义文字大小。

  h1 {
      font-size: 24px;
  }
  

• 文本对齐：控制文本的对齐方式。

  p {
      text-align: justify;
  }
  

4. 布局

CSS布局模型提供了盒模型、定位、Flexbox、和网格（Grid）布局等方式，以便更灵活地安排网页内容。

盒模型

盒模型定义了元素的内容、填充、边框和外边距。

.box {
    width: 200px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

定位

通过定位，可以将元素放置在页面的不同位置。

• 绝对定位：相对于最近的已定位祖先元素进行定位。

  .absolute-box {
      position: absolute;
      top: 50px;
      left: 100px;
  }
  

• 固定定位：相对于视口定位，适合创建始终可见的元素。

  .fixed-box {
      position: fixed;
      bottom: 10px;
      right: 10px;
  }
  

Flexbox

Flexbox布局提供了一种将容器内元素灵活排列的方法。

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

网格布局

CSS网格布局是一种二维布局系统，适合创建复杂的网页结构。

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
}

5. 背景与边框

CSS支持设置元素的背景和边框样式，使得页面更加美观。

• 背景颜色和图片：

  .background {
      background-color: #f3f3f3;
      background-image: url("background.jpg");
      background-size: cover;
  }
  

• 边框：可以设置边框的宽度、样式和颜色。

  .bordered {
      border: 2px dashed #333;
  }
  

6. 动画和过渡

CSS还提供了动画和过渡功能，用于实现动态效果。

• 过渡：在属性变化时实现平滑的过渡效果。

  .box {
      transition: transform 0.5s;
  }
  .box:hover {
      transform: scale(1.2);
  }
  

• 动画：定义关键帧动画以实现复杂效果。

  @keyframes slideIn {
      from { transform: translateX(-100%); }
      to { transform: translateX(0); }
  }
  .animated-box {
      animation: slideIn 1s ease-in-out;
  }
  

7. 响应式设计

CSS还支持媒体查询，使网页能够适应不同的屏幕尺寸，实现响应式设计。

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

CSS 是一种强大的工具，可以将网页从简单的 HTML 结构提升到视觉丰富、交互性强的用户体验。以下是在前述总结基础上，进一步详细解释和示例的内容。

8. CSS 变量

CSS变量（或称自定义属性）允许我们定义可重用的样式值，从而简化样式的维护和调整。

• 定义和使用 CSS 变量：

  :root {
      --main-color: #3498db;
      --padding: 16px;
  }
  
  .box {
      background-color: var(--main-color);
      padding: var(--padding);
  }
  

这样，只需在一个地方修改变量的值，就可以在整个样式表中生效，适用于需要统一颜色或间距的场景。

9. 复合选择器与组合选择器

复合选择器允许我们选择多个条件组合的元素，而组合选择器则用于将不同选择器组合在一起。

• 复合选择器：可以同时应用多个选择条件，比如类和属性。

  .highlight[data-important] {
      color: red;
  }
  

• 组合选择器：利用后代（ ）、子代（>）、相邻兄弟（+）、一般兄弟（~）等选择器来定位特定的元素组合。

  /* 后代选择器 */
  .menu a {
      text-decoration: none;
  }
  
  /* 子代选择器 */
  .container > .item {
      padding: 10px;
  }
  

10. 视觉效果：滤镜、阴影和混合模式

CSS 中的滤镜、阴影和混合模式可以在不依赖图片编辑器的情况下，直接对元素应用视觉效果。

• 滤镜：如模糊、亮度和对比度调整。

  .blurred-image {
      filter: blur(5px);
  }
  

• 盒子阴影：创建元素的投影效果，增加视觉层次。

  .shadow-box {
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  }
  

• 混合模式：将元素的颜色与其父元素的背景进行混合。

  .blend-text {
      background-color: #3498db;
      mix-blend-mode: multiply;
  }
  

11. 高级动画控制：延迟和循环

在 CSS 动画中，我们可以精确控制动画的开始时间、持续时间和循环。

• 延迟与循环：通过animation-delay控制动画的延迟，通过animation-iteration-count设置动画的循环次数。

  .animated-box {
      animation: slideIn 1s ease-in-out 0.5s infinite;
  }
  

• 分段动画：通过定义多个关键帧，可以在同一个动画中实现复杂的分段效果。

  @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
  }
  

12. 使用 CSS 预处理器：Sass 和 Less

CSS 预处理器如 Sass 和 Less 提供了更丰富的功能，比如嵌套、混合和继承，适用于大规模样式开发。

• 嵌套：可以在元素选择器内直接定义其子元素的样式，便于层次结构的组织。

  .card {
      background-color: #fff;
      .card-title {
          font-size: 20px;
      }
  }
  

• 混合（Mixin）：定义可复用的样式模块。

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

13. 响应式设计与栅格系统

响应式设计是为了让页面能够在不同设备上有良好的展示效果。栅格系统则提供了均匀划分的布局方式，使得页面内容能更好地排列。

• 栅格系统：常见的 CSS 框架（如 Bootstrap）使用12列栅格系统。

  <div class="row">
      <div class="col-6">左边</div>
      <div class="col-6">右边</div>
  </div>
  

• 响应式媒体查询：结合媒体查询和栅格系统，可以根据设备大小调整布局。

  @media (max-width: 768px) {
      .sidebar {
          display: none;
      }
      .main-content {
          width: 100%;
      }
  }
  

14. 可访问性优化

CSS 中还可以针对可访问性进行优化，以确保网页能更好地被所有用户使用。

• 隐藏内容但仍让屏幕阅读器读取：

  .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
  }
  

• 高对比度模式：为有视觉障碍的用户提供高对比度样式。

  @media (prefers-contrast: high) {
      .button {
          background-color: #000;
          color: #fff;
      }
  }
  

15. 未来的 CSS 功能

CSS 一直在进化，其中一些新特性正在推广中，如 CSS Houdini、CSS 自定义媒体查询属性、容器查询等，提供了更为细致的控制和创新的功能。

• CSS Houdini：允许开发者创建自定义 CSS 属性和布局方式，增强 CSS 的表现力和性能。
• 容器查询：可以在元素的容器大小改变时触发样式变化，而不是整个视口。

  @container (min-width: 300px) {
      .box {
          background-color: lightblue;
      }
  }
  

继续深入了解CSS的高级应用和优化技巧，以下是一些常用但更为细致的功能：

16. 样式优先级与特异性

CSS中的样式优先级决定了当多个样式同时作用于同一元素时，哪个样式会被应用。CSS中的特异性规则决定了选择器的优先级。

• 基础优先级：直接内联样式(style属性)优先级最高，其次是ID选择器，然后是类、属性选择器，最后是类型选择器。

  #header { color: red; } /* 优先级：100 */
  .title { color: blue; } /* 优先级：10 */
  p { color: green; } /* 优先级：1 */
  

• 重要性标记：可以使用!important强制覆盖所有优先级。

  p {
      color: black !important;
  }
  

17. 渐变背景

渐变背景可以让颜色在一个区域内平滑过渡，分为线性渐变和径向渐变。

• 线性渐变：在给定角度内的渐变。

  .gradient-bg {
      background: linear-gradient(45deg, #ff6f91, #ff9671);
  }
  

• 径向渐变：从中心向外的圆形渐变。

  .radial-bg {
      background: radial-gradient(circle, #ff6f91, #ff9671);
  }
  

18. CSS计数器

CSS计数器是一种用于创建自动编号的机制，通常用于生成有序列表、章节编号等内容。

body {
    counter-reset: section; /* 初始化计数器 */
}

h2::before {
    counter-increment: section; /* 递增计数器 */
    content: "Section " counter(section) ": "; /* 显示计数 */
}

19. CSS 的变量嵌套与作用域

CSS变量不仅支持全局定义，还可以在特定元素的局部范围内定义。这样可以根据不同的样式上下文来定义局部变量，使样式更具灵活性。

:root {
    --primary-color: #3498db;
}

.container {
    --primary-color: #2ecc71; /* 局部变量覆盖 */
}

.button {
    background-color: var(--primary-color);
}

20. 复杂动画的控制

对于需要多个关键帧或多步骤的动画效果，可以组合使用多种动画，并精细化控制每个关键帧的效果。

• 多重动画：将多个动画应用到同一元素上。

  .multi-animated {
      animation: bounce 1s infinite, rotate 2s infinite;
  }
  
  @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
  }
  
  @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
  }
  

21. CSS 中的选择器技巧

CSS 选择器不断扩展，使得我们可以更灵活地选择 DOM 元素。

• :nth-child()和:nth-of-type()：选择特定位置的元素。

  /* 选择每三个元素 */
  .item:nth-child(3n) {
      color: red;
  }
  

• :not()：排除某些选择器，使其不受样式影响。

  .container div:not(.active) {
      opacity: 0.5;
  }
  

22. 使用SVG和Clip-Path实现自定义图形

CSS与SVG结合，能实现更多复杂的图形布局和交互效果。

• SVG图形：可以在CSS中嵌入SVG代码作为背景或内容。

  .svg-bg {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E...%3C/svg%3E");
  }
  

• clip-path：裁剪元素显示形状。

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

23. CSS Houdini

CSS Houdini 是一项创新功能，允许开发者通过 JavaScript 自定义 CSS 属性和布局，增强 CSS 表现力。

• Paint API：开发者可以使用 JavaScript 为元素创建自定义的背景、边框等。

  .custom-bg {
      background-image: paint(customPainter);
  }
  

虽然 Houdini 仍在发展中，但它使开发者能以前所未有的方式控制样式和布局。

24. CSS Grid中的自动布局

CSS Grid 的 repeat() 和 minmax() 函数简化了网格布局的创建，使网格能够根据内容自动调整大小。

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

CSS Grid 的自动化布局非常适合创建响应式和流动性强的网格系统。