1.style属性中写CSS
样例:
<!DOCTYPE html>
<html>
<head>
<title>CSS写法优先级测试</title>
<meta charset="utf-8"/>
</head>
<body>
<p style="color:red;font-size:30px;">CSS写法优先级测试</p>
</body>
</html>
2.在<style>标签中写CSS
样例:
<!DOCTYPE html>
<html>
<head>
<title>CSS写法优先级测试</title>
<meta charset="utf-8"/>
<style type="text/css">
p{
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<p>CSS写法优先级测试</p>
</body>
</html>
3.link标签外联样式表
创建文件如下
test.html
<!DOCTYPE html>
<html>
<head>
<title>CSS写法优先级测试</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./test.css">
</head>
<body>
<p>CSS写法优先级测试</p>
</body>
</html>
test.css
p{
color: blue;
font-size: 10px;
}
三种写法的优先级优先级
第一种>第二种>第三种
样例
<!DOCTYPE html>
<html>
<head>
<title>CSS写法优先级测试</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./test.css">
<style type="text/css">
p{
color: blue;
font-size: 50px;
}
</style>
</head>
<body>
<p style="color:red;font-size:30px;">CSS写法优先级测试</p>
</body>
</html>
test.css如上
结果