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

教程、简介：

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

一、CSS语法

1.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>

效果：

解释：
页面上的所有 p 元素都将居中对齐，并带有红色文本颜色。

2）CSS id 选择器：id 选择器使用 HTML 元素的 id 属性来选择特定元素。

1》元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
2》要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
3》代码：

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {text-align: center;color: green;
}
</style>
</head>
<body><p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p></body>
</html>

效果：

解释：
CSS 规则将应用于 id=“para1” 的 HTML 元素。
注意：id 名称不能以数字开头。

3）CSS 类选择器：类选择器选择有特定 class 属性的 HTML 元素。选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

代码：

<!DOCTYPE html>
<html>
<head>
<style>
.center {text-align: center;color: grey;
}
</style>
</head>
<body><h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> </body>
</html>

效果：

解释：
所有带有 class=“center” 的 HTML 元素将为灰色（grey）且居中对齐。
代码2：
指定只有特定的 HTML 元素会受类的影响。

<!DOCTYPE html>
<html>
<head>
<style>
p.center {text-align: center;color: red;
}
</style>
</head>
<body><h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落将是红色并居中对齐的。</p> </body>
</html>

效果：

解释：
只有具有 class=“center” 的 p 元素会居中对齐。
代码3：
HTML 元素也可以引用多个类。

<!DOCTYPE html>
<html>
<head>
<style>
p.center {text-align: center;color: red;
}p.large {font-size: 300%;
}
</style>
</head>
<body><h1 class="center">这个标题不受影响</h1>
<p class="center">本段将是红色并居中对齐。</p>
<p class="center large">本段将是红色、居中对齐，并使用大字体。</p> </body>
</html>

效果：

解释：
p 元素将根据 class=“center” 和 class=“large” 进行样式设置。
注意：类名不能以数字开头！

4）CSS 通用选择器：通用选择器（*）选择页面上的所有的 HTML 元素。

代码：

<!DOCTYPE html>
<html>
<head>
<style>
* {text-align: center;color: blue;
}
</style>
</head>
<body><h1>Hello world!</h1><p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p></body>
</html>

效果：

解释： CSS 规则会影响页面上的每个 HTML 元素。

5）CSS 分组选择器：分组选择器选取所有具有相同样式定义的 HTML 元素。

代码：
1》h1、h2 和 p 元素具有相同的样式定义：

h1 {text-align: center;color: red;
}h2 {text-align: center;color: red;
}p {text-align: center;color: red;
}

对选择器进行分组，以最大程度地缩减代码。
对选择器进行分组，请用逗号来分隔每个选择器。
2》对上述代码中的选择器进行分组：

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {text-align: center;color: red;
}
</style>
</head>
<body><h1>Hello World!</h1>
<h2>更小的标题</h2>
<p>这是一个段落。</p></body>
</html>

效果：

6）总结

所有简单的 CSS 选择器：

百度：w3school：CSS 选择器：简单选择器：链接：https://www.w3school.com.cn/css/css_selectors.asp
https://www.w3school.com.cn/css/css_selectors.asp

4.组合器选择器（根据它们之间的特定关系来选取元素）

5.伪类选择器（根据特定状态选取元素）

6.伪元素选择器（选取元素的一部分并设置其样式）

7.属性选择器（根据属性或属性值来选取元素）

三、CSS使用：添加 CSS

1.当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。

2.三种使用 CSS 的方法：有三种插入样式表的方法：

1）外部 CSS
2）内部 CSS
3）行内 CSS

3.外部 CSS

1）每张 HTML 页面必须在 head 部分的 link 元素内包含对外部样式表文件的引用。
2）外部样式在 HTML 页面 head 部分内的 link 元素中进行定义：
代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/demo/css/mystyle.css">
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>

效果：

3）外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。
“mystyle.css” 是这样的：

body {background-color: lightblue;
}h1 {color: navy;margin-left: 20px;
}

注意：请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;

4.内部 CSS

1）如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的 style 元素中进行定义。
2）实例：内部样式在 HTML 页面的 head 部分内的 style 元素中进行定义：
代码：

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: linen;
}h1 {color: maroon;margin-left: 40px;
}
</style>
</head>
<body><h1>这是一个标题</h1>
<p>这是一个段落。</p></body>
</html>

效果：

5.行内 CSS

1）行内样式（也称内联样式）可用于为单个元素应用唯一的样式。使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
2）实例：行内样式在相关元素的 “style” 属性中定义：
代码：

<!DOCTYPE html>
<html>
<body><h1 style="color:blue;text-align:center;">这是标题</h1>
<p style="color:red;">这是一个段落。</p></body>
</html>

效果：

提示：行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。

6.多个样式表

1）在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。
2）实例：
1》外部样式表为 h1 元素设定的如下样式：

h1 {color: navy;
}

2》内部样式表也为 h1 元素设置了如下样式：

h1 {color: orange;
}

3》如果内部样式是在链接到外部样式表之后定义的，则 h1 元素将是橙色：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {color: orange;
}
</style>
</head>

4》如果在链接到外部样式表之前定义了内部样式，则 h1 元素将是深蓝色：

<head>
<style>
h1 {color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

7.层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

百度：w3school：CSS使用：链接：https://www.w3school.com.cn/css/css_shiyong.asp
https://www.w3school.com.cn/css/css_shiyong.asp