一 样式分类
行内样式，内部样式，外部样式。
二 优先级
采用就近原则。
行内样式最近，它的优先级最高。
内部样式或外部样式，看谁离标签近，谁的优先级就高。
三 外部样式导入方式
1 使用 @import url("resource/css/style.css"); 语法导入外部样式
2 使用 <link rel="stylesheet" href="resource/css/style.css"> 导入外部样式
四 实战
1 HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2 {
color: green;
}
</style>
<link rel="stylesheet" href="resource/css/style.css">
<style>
h3 {
color: green;
}
</style>
</head>
<body>
<h1 style="color: red">我是标题一，采用行内样式，因为我的优先级最高</h1>
<h2>我是标题二，因为外部样式离我近，所以我显示为蓝色</h2>
<h3>我是标题三，因为内部样式离我近，所有我显示为绿色</h3>
</body>
</html>2 CSS代码
h3 {
color: blue;
}
h2 {
color: blue;
}五 效果
六 基本选择器
1 标签选择器
标签 {
样式:值;
}
2 类选择器
.class名 {
样式:值;
}
3 id选择器
#id名 {
样式:值;
}
七 实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
h1 {
color: red;
}
h3 {
color: yellow;
}
.cakin {
color: green;
}
#cakin1 {
color: blue;
}
#cakin2 {
color: coral;
}
</style>
</head>
<body>
<h1>我用的是标签选择器，我显示红色</h1>
<h2 class="cakin">我用的是类选择器，我显示绿色</h2>
<h3 id="cakin1">我用的是id选择器，我显示蓝色</h3>
<!--优先级别：id选择器>类选择器>标签选择器-->
<h3 id="cakin2" class="cakin">因为id选择器的优先级高于类选择器，所以我用的是id选择器，我显示桔色</h3>
<h3 class="cakin">因为类选择器优先级高于标签选择器，所以我用的是类选择器，我显示绿色</h3>
</body>
</html>八 效果
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
