W3school：CSS基础：教程、简介、语法、选择器、使用（在HTML中引入）

薇眠winter

已于 2022-11-08 15:05:31 修改

阅读量1.6k

点赞数

分类专栏： CSS 文章标签：前端 uni-app css html css3

于 2022-08-03 11:10:14 首次发布

本文链接：https://blog.csdn.net/weixin_58725427/article/details/126126954

版权

本文介绍了W3school的CSS基础教程，包括CSS语法、选择器的五类（元素、ID、类、通用和分组选择器）以及如何在HTML中引入CSS，详细阐述了CSS规则集、声明块、选择器的使用和CSS的三种添加方式（外部、内部和行内）。

摘要由CSDN通过智能技术生成

W3school：CSS基础：教程、简介、语法、选择器、使用（在HTML中引入）

教程、简介：

链接：https://www.w3school.com.cn/css/index.asp

一、CSS语法

1.CSS 规则集（rule-set）由选择器和声明块组成：

CSS 规则集（rule-set）由选择器和声明块组成

1)选择器指向您需要设置样式的 HTML 元素。
2)声明块包含一条或多条用分号分隔的声明。
3)每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
4)多条 CSS 声明用分号分隔，声明块用花括号括起来。

2.实例：代码

<!DOCTYPE html>
<html>
<head>
<style>
p {
     
  color: pink;
  text-align: center;
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>这些段落是通过 CSS 设置样式的。</p>

</body>
</html>

效果：

解释：
1）在此例中，所有 p 元素都将居中对齐，并带有粉色（pink）文本颜色；
2）p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：p ）；
3）color 是属性，pink 是属性值；
4）text-align 是属性，center 是属性值。
百度：w3school：CSS 语法：链接：https://www.w3school.com.cn/css/css_syntax.asp
https://www.w3school.com.cn/css/css_syntax.asp

二、CSS 选择器

1.CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

2.CSS 选择器分为五类：

1）简单选择器（根据名称、id、类来选取元素）
2）组合器选择器（根据它们之间的特定关系来选取元素）
3）伪类选择器（根据特定状态选取元素）
4）伪元素选择器（选取元素的一部分并设置其样式）
5）属性选择器（根据属性或属性值来选取元素）

3.简单选择器（根据名称、id、类来选取元素）示例：

1）CSS 元素选择器：元素选择器根据元素名称来选择 HTML 元素。

代码：

<!DOCTYPE html>
<html>
<head>
<style>
p {
     
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>

</body>
</html>