前端 | （四）CSS基础及CSS选择器 | 尚硅谷前端html+css零基础教程2023最新

**尚硅谷前端HTML+CSS零基础教程2023最新**

**第四章：CSS基础及CSS选择器**

在本章中，我们将学习CSS的基本概念、CSS选择器的使用以及如何应用CSS样式。

###4.1 CSS基本概念CSS（Cascading Style Sheets）是用于描述网页外观和布局的样式语言。它允许您控制网页中的元素，例如颜色、字体、大小等。

**CSS的组成部分**

* **选择器**:用来选取HTML元素。
* **属性**:定义了元素的样式。
* **值**:属性的具体值。

###4.2 CSS选择器CSS选择器是用于选取HTML元素的关键字。它可以根据元素的ID、类名、标签名等进行匹配。

####1. ID选择器（#）

ID选择器使用`#`符号来表示，后面跟着元素的ID值。

css/*选取id为"header"的元素 */
#header {
 background-color: #f0f0f0;
}

####2. 类选择器（.）

类选择器使用`.`符号来表示，后面跟着元素的类名。

css/*选取class为"container"的元素 */
.container {
 width:100%;
 height:500px;
 background-color: #f0f0f0;
}

####3. 标签选择器（tag）

标签选择器使用HTML标签名来表示。

css/*选取所有h1元素 */
h1 {
 color: #333;
 font-size:24px;
}

####4. 通配符选择器（*）

通配符选择器使用`*`符号来表示，匹配所有HTML元素。

css/* 匹配所有元素 */
* {
 box-sizing: border-box;
}

###4.3 CSS属性和值CSS属性定义了元素的样式，而值则是属性的具体值。下面是一些常用的CSS属性：

####1. 颜色（color）

css/* 设置元素的背景颜色 */
background-color: #f0f0f0;

####2. 字体大小（font-size）

css/* 设置元素的字体大小 */
font-size:16px;

####3. 文本颜色（color）

css/* 设置元素的文本颜色 */
color: #333;

####4. 背景图像（background-image）

css/* 设置元素的背景图像 */
background-image: url(' />

###4.4 CSS样式应用CSS样式可以通过多种方式应用到HTML元素上。

####1. 内联样式内联样式使用`style`属性来定义样式。

html<!-- 使用内联样式 -->
<div style="background-color: #f0f0f0;">Hello World!</div>

####2. 外部样式表（CSS文件）

外部样式表使用``标签来引入CSS文件。

html

####3. 内嵌样式内嵌样式使用`