原课程在这里：https://www.icourse163.org/learn/BJFU-1003382003?tid=1003609002#/learn/announce
方法一：行内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="color:red;font-size:20px" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>
方法二：内嵌式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem</title>
<style>
p{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>
方法三：单独文件（.css）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>
p{
color:red;
font-size:12px;
}
扩展：
设置两个段落，然后分别取名p1，p2，然后配置不同的属性，会怎么样？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem</title>
<style>
p1{
color:red;
font-size:20px;
}
p2{
color:blue;
font-size:10px;
}
</style>
</head>
<body>
<p1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p1><br><hr>
<p2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p2>
</body>
</html>
优先级：
- 多重样式可以层叠，可以覆盖
- 样式的优先级按照“就近原则”：
- 行内样式>内嵌样式>链接样式>浏览器默认样式