CSS4学习不仅涵盖了CSS的新特性，如新的选择器、属性和单位，还涉及如何在实际项目中应用这些新特性。本文将指导你掌握CSS4的基础知识，理解其新增的功能，并通过实践和文档查阅来提升技能。

什么是CSS4

CSS4，即层叠样式表4级，是CSS的一种新版本，它在CSS3的基础上，增加了新的特性，功能更加丰富。CSS4引入了一些新的选择器、新的单位、新的属性，以及增强了一些现有属性的功能。其目标是使网页设计更加灵活，更易实现复杂布局和高级动画效果。

CSS4与CSS3的区别

CSS4与CSS3相比，主要的区别在于新增的功能和特性：

1. 新选择器：CSS4引入了一些新的选择器，如子资源选择器（:has()）、阴影选择器（:nth-child()的变体）等。
2. 新属性：CSS4添加了一些新的属性，例如color-gamut、image-set等。
3. 增强现有属性：一些现有属性的功能得到了增强，如animation属性可以通过新的@keyframes规则进行更精细的控制。

如何学习CSS4

学习CSS4主要有以下几个步骤：

1. 掌握基础知识：首先应该熟悉HTML和CSS的基本概念和语法。可以通过在线课程、书籍等资源进行学习。
2. 理解CSS4新增特性：了解CSS4新增的功能，如新的选择器、属性和单位。
3. 动手实践：编写代码实践，将理论知识应用到实际项目中。
4. 查阅文档：CSS4的标准文档提供了详细说明，可以作为学习和参考的资料。
5. 参考示例：查阅线上资源，如在线教程、视频课程等，查找有关CSS4的示例和实践项目。

示例代码：

/* 基础CSS3样式 */
.example {
  color: blue;
  animation-name: example;
  animation-duration: 2s;
}

/* CSS4中的新选择器 */
.example:has(.nested) {
  background-color: red;
}

/* CSS4中的新属性 */
.example {
  color-gamut: p3;
  image-set: url(image.png) 2x;
}

基本选择器

标签选择器是通过HTML元素标签选择其样式，如<div>、<p>等。

类选择器是通过类名选择样式，格式为.classname。

ID选择器是通过ID名选择样式，格式为#idname。

代码示例：

<!-- HTML代码 -->
<div class="example-class">这是类选择器</div>
<div id="example-id">这是ID选择器</div>

<!-- CSS代码 -->
.example-class {
  color: blue;
}

#example-id {
  background-color: yellow;
}

伪类选择器与伪元素选择器

伪类选择器用于选择元素的特殊状态，如:hover、:active等。

伪元素选择器用于选择元素的特定部分，如:before、:after。

代码示例：

<!-- HTML代码 -->
<div class="example-class">这是伪类</div>

<!-- CSS代码 -->
.example-class:hover {
  color: red;
}

.example-class::before {
  content: "这是伪元素";
}

新增CSS4选择器介绍

CSS4引入了一些新的选择器，如::cue伪元素用于控制媒体元素中的字幕，:has()伪类用于选择包含指定子元素的元素。

代码示例：

<!-- HTML代码 -->
<video>
  <track kind="subtitles" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="subtitles.vtt" srclang="en" label="English">
</video>

<!-- CSS代码 -->
::cue {
  color: white;
  background-color: black;
}

div:has(.child) {
  background-color: yellow;
}

flex布局

flex布局是一种一维布局系统，可以高效地分配空间，创建灵活和响应式的设计。display: flex是使用flex布局的关键属性。

代码示例：

<!-- HTML代码 -->
<div class="flex-container">
  <div class="flex-item">项目1</div>
  <div class="flex-item">项目2</div>
  <div class="flex-item">项目3</div>
</div>

<!-- CSS代码 -->
.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item {
  background-color: lightblue;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

grid布局

grid布局是一种二维布局系统，可以创建复杂的网格布局。使用display: grid和相关属性可以定义行和列。

代码示例：

<!-- HTML代码 -->
<div class="grid-container">
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
  <div class="grid-item">项目4</div>
</div>

<!-- CSS代码 -->
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: lightgreen;
  padding: 20px;
  text-align: center;
}

渐进增强与优雅降级

渐进增强是一种开发策略，通过现代浏览器提供的新功能和特性来丰富用户体验，同时保证在旧浏览器上仍能正常使用。

优雅降级是一种相反的策略，先在现代浏览器中实现完整功能，然后通过技术手段确保旧浏览器能够兼容旧版本。

示例代码：

<!-- HTML代码 -->
<div class="container">
  <div class="content">内容</div>
</div>

<!-- CSS代码 -->
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content {
  /* 现代浏览器添加阴影效果 */
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

/* 不使用flex布局的兼容样式 */
.container.no-flex {
  text-align: center;
  padding: 20px;
}

基本动画

基本动画使用animation属性来定义动画。animation-name用于指定@keyframes定义的关键帧名称，animation-duration用于指定动画的持续时间。

代码示例：

<!-- HTML代码 -->
<div class="animated-div">动画示例</div>

<!-- CSS代码 -->
@keyframes example {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.animated-div {
  animation-name: example;
  animation-duration: 2s;
}

关键帧动画

关键帧动画通过@keyframes规则定义每个关键帧的样式，可以实现复杂的动画效果。

代码示例：

<!-- HTML代码 -->
<div class="animated-div">动画示例</div>

<!-- CSS代码 -->
@keyframes example {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(200px); }
}

.animated-div {
  animation-name: example;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

过渡与动画区别

过渡(transition)用于定义元素从一种状态平滑过渡到另一种状态的方式。动画(animation)则定义了元素在一段时间内从一种样式状态转换到另一种样式状态的动画效果。

代码示例：

<!-- HTML代码 -->
<div class="transition-div">过渡示例</div>
<div class="animation-div">动画示例</div>

<!-- CSS代码 -->
.transition-div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: all 2s;
}

.transition-div:hover {
  background-color: lightgreen;
  width: 200px;
  height: 200px;
}

@keyframes example {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.animation-div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

单位与函数

在CSS4中，单位如vw（视口宽度的百分比）、vh（视口高度的百分比）和函数如calc()（计算值）得到了新的应用。

代码示例：

<!-- HTML代码 -->
<div class="example-div">示例</div>

<!-- CSS代码 -->
.example-div {
  width: calc(50vw - 20px);
  height: calc(50vh - 20px);
  margin: 10px auto;
  background-color: lightblue;
}

响应式设计

响应式设计通过媒体查询（@media）实现自适应布局。可以根据屏幕宽度、高度等条件调整样式。

代码示例：

<!-- HTML代码 -->
<div class="responsive-div">响应式设计示例</div>

<!-- CSS代码 -->
.responsive-div {
  width: 100%;
  background-color: lightblue;
}

@media (min-width: 768px) {
  .responsive-div {
    width: 50%;
    background-color: lightgreen;
  }
}

@media (min-width: 1024px) {
  .responsive-div {
    width: 33.33333333%;
    background-color: lightcoral;
  }
}

CSS变量

CSS变量（自定义属性）允许在样式表中定义自定义值，可以在整个样式表中重复使用。

代码示例：

<!-- HTML代码 -->
<div class="variable-example">变量示例</div>

<!-- CSS代码 -->
:root {
  --primary-color: lightblue;
  --text-color: lightgreen;
}

.variable-example {
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 20px;
}

实战项目选择

选择一个具有挑战性的项目，例如创建一个博客页面、个人网站，或者简单的电商页面。这里以创建一个自适应的博客页面为例。

项目搭建流程

1. 定义结构：使用HTML创建页面的基本结构。
2. 布局设计：使用CSS4的布局特性，如flex和grid布局，设计页面布局。
3. 样式美化：使用CSS4的新特性，如变量和动画，美化页面。
4. 响应式设计：使用媒体查询实现自适应布局。
5. 测试优化：在不同设备和浏览器上测试页面效果，优化样式。

代码示例：

<!-- HTML代码 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
博客页标题
<div class="header">
  <h1>博客标题</h1>
  <nav>
    <ul>
      <li><a href="#about">关于</a></li>
      <li><a href="#posts">文章</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </nav>
</div>
<div class="content">
  <div class="post">
    <h2>文章标题</h2>
    <p>文章内容</p>
  </div>
</div>
<div class="footer">
  <p>版权所有 © 2023</p>
</div>
</body>
</html>

<!-- CSS代码 -->
/* 基础样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.header, .footer {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: white;
}

/* 布局设计 */
.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

.post {
  background-color: lightblue;
  padding: 20px;
  border-radius: 5px;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .content {
    grid-template-columns: 1fr;
  }
}

/* 动画效果 */
.post:hover {
  transform: scale(1.05);
}