原课程在这里: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>
优先级:
- 多重样式可以层叠,可以覆盖
- 样式的优先级按照“就近原则”:
- 行内样式>内嵌样式>链接样式>浏览器默认样式