✨CSS：
介绍：
CSS是层叠样式表（Cascading Style Sheets）的简称，有时我们也会称为CSS样式表或级联样式表。
作用：
CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可美化HTML，让HTML更漂亮，让页面布局更简单
规则：
主要由两个部分构成：选择器以及一条或多条声明
✨标题选择器
语法：
标签: {
属性名1: 属性值1;
属性名2: 属性值2;
}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset:"utf-8">
<title>css</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<p><font color="red">up大数据1班</font></p >
<p><font color="red">你好</font></p >
<span>网页设计</span><br />
<span>现在学css样式</span>
</body>
</html>
✨类选择器
语法
类名{
属性名1:属性值1;
属性名2:属性值2;
}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
span {
color: red;
}
.textColor {
color: red;
}
</style>
</head>
<body>
<p><font color="red">up大数据1班</font></p >
<span>网页设计</span><br />
<p class="textColor">你好</p >
<div class="textColor">今天周五</div>
<div class="textColor">真好！</div>
</body>
</html>
！！！注意：
- 类选择器使用“.”(英文点号)进行标识，后面紧跟类名(自定义或我们自己命名的)。
- 可以理解为给这个标签起了一个名字来表示。
- 类名和标识符可以使用中横线来选择命名。
- 不要使用纯数字、中文等符号，尽量使用英文字母来表示。
- 命名要有意义，尽量使用别人一眼就知道这个类名的目的。
✨多类选择器
<div class:"red font 20">亚瑟</div>
- 在标签
class属性中写多个类名 - 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
.bg_color {
width: 200px;
height: 200px;
}
.div1 {
background-color: red;
}
.div2 {
background-color: darkgreen;
}
.pl {
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="bg_color div1">div1标签</div>
<div class="bg_color div2">div2标签</div>
<p class="bg_color pl">p标签</p >
</body>
</html>
id选择器
语法：
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
# id的属性值{
属性名1:属性值1;
属性名2:属性值2;
}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
<head>
<style>
#text1 {
color: red;
}
#text2 {
color: blueviolet;
}
#text3 {
color: cyan;
}
</style>
</head>
<body>
<span id="text1">span标签</span>
<p id="text2">p标签</p >
<div id="text3">div标签</div>
</body>
</html>
✨通配符选择器
语法：
*{
属性名1:属性值1;
属性名2:属性值2;
}
- 通配符选择器不要滥用，自动给所有的元素使用样式。
- 特殊情况才使用，使用场景（ 是清除所有元素标签的内外边距）
示例：
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
✨选择器的总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p {color: red;} |
| 类选择器 | 可以选出1个或多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
| id选择器 | 一次只能选择1个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * {color: red;} |
