CSS概述
1.1、概述
- CSS（层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS
不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 - CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
- CSS 定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css
文件中，我们只需要编辑一个简单的 CSS 文档然后引用该文档就可以改变所有页面的布局和外观。
1.2、语法
- CSS 规则由两个主要的部分构成：选择器以及一条或多条声明
比如说，我们要让p标签内的文本都是红色，字体居中，我们就可以这么来写
p {color: red;text-align: center;}
为了让CSS可读性更强，你可以每行只描述一个属性
p {
color: red;
text-align: center;
}
1.3、注释
注释是用来解释你的代码并且可以随意编辑它，但是浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束，如下：
/* 这是一个注释 */
p {
/* 这是一个注释 */
color: red;
text-align: center;
}
1.4、如何创建并引用
1.4.1、外部样式表（外联式）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部样式表-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>外部样式</p>
</body>
</html>
css
p {
color: red;
text-align: center;
}
1.4.2、内部样式表（内联式）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入内部样式表-->
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>外部样式</p>
</body>
</html>
1.4.3、内联样式（行内式）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--引入内联样式-->
<p style="color: red;text-align: center">外部样式</p>
</body>
</html>
1.5、三种引入优先级
- 三种引入方式内容属性不冲突：三种方式会同时起作用。
- 三种引入方式内容属性会冲突：
- 内联式和外联式冲突，内联式位于外联式上方。— 由外联式决定
- 内联式和外联式冲突，外联式位于内联式上方。— 由内联式决定 三种方式并存且冲突。 — 由行内式决定
注意：当属性值内存在**“!important ”**关键字的时候，优先使用该类方式导入属性值。
格式：key: value !important;
举例：color: red !important;
CSS选择器
2.1、id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的id的名称，必须唯一且不能重复。
需求描述 ： 为id为part1的段落添加红色字体样式
<p id="part1">段落1</p>
<p id="part2">段落2</p>
#part1 {
color: red;
}
2.2、class选择器
class 选择器可以为标有特定 class 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的class的名称，可以不唯一且可以重复。
需求描述 ： 为class为green的段落添加绿色字体样式，为class为bold的段落添加加粗字体样式
<p class="green">段落1</p>
<p class="bold">段落2</p>
<p class="green bold">段落3</p>
.green {
color: green;
}
.bold {
font-weight: bold;
}
2.3、标签选择器
除了使用id选择器和class选择器，我们也可以直接使用标签选择器。
需求描述 ： 为所有段落标签添加黄色字体样式，为所有超链接标签添加红色字体样式
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<a href="https://www.baidu.com/">打开百度，你就知道！</a>
p {
color: yellow;
}
a {
color: red;
}
2.4、子代选择器
子代选择器可以选择当前元素的所有儿子元素。定义的时候用 > 隔开。
需求描述 ： 为div标签下所有h1儿子节点设置为红色文本样式
<div>
<h1>儿子标题</h1>
<span><h1>孙子标题</h1>
最低0.47元/天 解锁文章
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
