CSS
CSS全称为 Cascading Style Sheets,译为层叠样式表。CSS有三种样式：内联样式，内嵌样式，外联样式。
内联样式
内联样式通过HTML元素的style属性来设置CSS样式，语法如下：
style="CSS属性：CSS属性值"；示例代码：
<!DOCTYPE html>
<html>
<head>
<title>内联样式</title>
<meta charset="UTF-8">
</head>
<body>
<!-- style="css属性:css属性值;" -->
<div style="color:red;">启嘉班</div>
</body>
</html>* 内联样式的缺点: 只对当前元素有效, 导致CSS代码可能出现冗余
内嵌样式表
通过HTML元素的style属性来设置CSS样式，语法如下：
<style>
选择器{
属性名:属性值；
}
</style>示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内嵌样式</title>
<style>
p{
color: chartreuse;
font-size: 50px;
}
</style>
</head>
<body>
<p>19级启嘉班</p>
</body>
</html>优点: 相对于内联样式
*通过CSS选择器定位HTML页面中一个或一类元素
缺点:相对于内联样式
* 将CSS代码嵌入到HTML页面中,只能对当前HTML页面有效
* 编码的风格不符合编码原则中的低耦合
* 导致CSS代码可能出现冗余
外联样式
通过HTML元素的<link>元素来设置CSS样式表
1.创建一个CSS文件,用来存储CSS样式内容
2.在HTML页面中通过<link>元素引入外部指定的CSS文件
<link>元素:
* 作用: 用来引入HTML页面外部的资源
属性:
* rel属性: 用来设置外部资源与当前HTML页面的关系
* href属性: 用来设置引入外部资源的路径(相对路径和绝对路径)
语法结构如下：
<link rel="stylesheet" href="CSS文件路径">示例代码：
<link rel="stylesheet" href="style.css">优点: 相对于内嵌样式表和内联样式
* 将CSS样式与HTML页面进行分离(低耦合)
* 不会出现内嵌样式表或内联样式产生的代码冗余
缺点: 可能对HTML页面的加载造成负担,导致性能下降
下一节更新CSS选择器