前端 | （ 十一）CSS3简介及基本语法（上） | 尚硅谷前端html+css零基础教程2023最新

**前端 | (十一) CSS3 简介及基本语法 (上)****尚硅谷前端 HTML+CSS 零基础教程2023 最新**

在前端开发中，CSS 是一个至关重要的部分。它负责控制网页的外观和布局。在本篇文章中，我们将介绍 CSS3 的简介及基本语法。

**CSS3 简介**

CSS3 是 CSS 的第三个版本，它于2008 年发布。相比于 CSS2，CSS3 引入了许多新特性和改进，例如：

* **选择器**: 新增了更多的选择器，如 `:nth-child`、`:last-child` 等。
* **颜色**: 支持了 RGB、RGBA 和 HSL 颜色模式。
* **盒模型**: 引入了新的盒模型概念，包括 `box-sizing` 属性。
* **动画和过渡**: 支持了 CSS 动画和过渡效果。

**CSS3 基本语法**

CSS3 的基本语法与 CSS2 相同。以下是 CSS3 的基本结构：

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

其中，`选择器` 是用于选择 HTML 元素的关键字，`属性` 和 `值` 是用于设置元素样式的键值对。

**CSS3选择器**

CSS3 引入了许多新选择器，例如：

* **`:nth-child`**: 用于选择指定位置的子元素。
* **`:last-child`**: 用于选择最后一个子元素。
* **`:first-of-type`**: 用于选择第一个同类元素。

以下是示例代码：

cssul li:nth-child(2) {
 background-color: #ccc;
}

ul li:last-child {
 font-weight: bold;
}

div p:first-of-type {
 color: red;
}

**CSS3 颜色**

CSS3 支持了 RGB、RGBA 和 HSL 颜色模式。以下是示例代码：

cssdiv {
 background-color: rgb(255,0,0);
}

span {
 color: rgba(0,0,0,0.5);
}

h1 {
 background-color: hsl(120,100%,50%);
}

**CSS3 盒模型**

CSS3 引入了新的盒模型概念，包括 `box-sizing` 属性。以下是示例代码：

cssdiv {
 width:300px;
 height:200px;
 box-sizing: border-box;
}

span {
 width:100%;
 height:50px;
}

**总结**

本篇文章介绍了 CSS3 的简介及基本语法。CSS3 引入了许多新特性和改进，例如选择器、颜色、盒模型等。通过掌握这些知识，你可以更好地控制网页的外观和布局。

在下一篇文章中，我们将继续介绍 CSS3 的其他特性和应用。