index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--关联外部样式-->
<link rel="stylesheet" href="css/style.css">
<!--内部样式-->
<style>
h1{
color: yellow;
}
</style>
</head>
<body>
<!--行内样式-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
<!--就近原则,行内样式优先级最大,内部样式与外部样式看谁离元素更近谁优先级更高-->
style.css
/*外部样式*/
h1{
color: green;
}
总结:css :行内样式 内部样式 外部样式之间的优先级顺序
就近原则,行内样式优先级最大,内部样式与外部样式看谁离元素更近谁优先级更高