在head标签中写
<style>
选择器 {样式}
给谁改 改成啥样
</style>
小例子，注意要加分号(’;’)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3 {
color: chartreuse;
font-size: 20px;
}
</style>
</head>
<body>
<h3>测试一下</h3>
</body>
</html>
效果如下：
选择器
根据不同需求把不同标签选出来。
基础选择器
标签选择器
用标签名作为选择器，把某一类标签全部选择出来
类选择器
可以单独选择一个/几个标签，谁想使用谁就在那个标签里加一个class，多个标签也能使用相同的选择器
```
.类名{
属性1: 值1;
...
}
```
举例：
```
<style>
.red {
color: chartreuse;
}
</style>
</head>
<body>
<div class="red"> ahaaha </div>
<div> ooooo </div>
</body>
```
结果：
**注意：**
小练习，请设计出如下页面：
代码如下：
<style>
.red {
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: red;
}
.green {
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
多类名
一个标签可以指定多个类名
使用场景：
上面的练习使用多类名，效果与之前相同：
<style>
.frame {
width: 100px;
height: 100px;
font-size: 30px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<div class="frame red">测试一下</div>
<div class="frame green">测试一下</div>
<div class="frame red">测试一下</div>
id选择器
#blue {
color: rgb(60, 217, 223);
}
<h3 id="blue"> 测试一下 </h3>
看起来似乎和类选择器差不多啊，那为啥要引入这个东西？id选择器只能被调用一次。
但我试了一下，是可以被多个标签调用的，那为什么还说只能调用一次呢？查资料听别人说在js时会用到，如果有多个id被使用那么只会处理第一个
通配符选择器
基础选择器总结：
字体属性
字体
如果指定了多个字体，那么会按照自左至右的顺序显示(如果没装第一个，就按照第二个字体显示，以此类推)
大小
标题标签比较特殊，需要单独指定文字大小
粗细
如果想让标题只是变大，但不变粗或者想手动更改粗细，也是可以的。
h3 {
font-weight: 100;
}
文字样式
复合属性
下图div下前四行的写法太麻烦，因此可以用简写的形式：
字体总结
文本属性
对齐文本
这个文本的位置应该是相对于所在盒子说的
h3加了center可以在屏幕中央是因为h3盒子的范围就是一行；如果是一个div，那么里面的文本的位置是相对于div的。
装饰文本
上划线、中划线、下划线、None。可以用None来将a标签的下划线去掉
文本缩进
行间距
当我们调节行间距的时候，调整的是上、下间距，因为文字的高度已经确定。
CSS引入方式
嵌入式
行内式
外部式
要善于使用浏览器调试工具
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
