【1】CSS样式规则
【2】CSS样式表引入方式
1、行内式
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,intial-scale=1.0"/><title>行内式</figure></title>
</head>
<body><h2 style="font-size: 20px; color: red;">古之学者必有师。师者，所以传道授业解惑也。</h2>
</body>
</html> 效果展示
2、内嵌式
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,intial-scale=1.0"/><title>内嵌式</title><style type="text/css">h2{text-align: center;}p{font-size: 16px;color: red;text-decoration: underline;}</style>
</head>
<body><h2>《劝学》片段</h2><p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴，不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
</body>
</html>效果展示
3、链入式
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>链入式</title><link href="css/第三次实践.css" rel="stylesheet" type="text/css"/></head>
<body><h2>《劝学》片段</h2><p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴，不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
</body>
</html>CSS
h2{text-align:center;}p{font-size: 16px;color:blue;text-decoration:underline;
} 效果展示
4、导入式
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>链入式</title><style type="text/css">@import url(css/第三次实践.css);h2{color: red;}</style></head>
<body><h2>《劝学》片段</h2><p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴，不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
</body>
</html>CSS
h2{text-align:center;}p{font-size: 16px;color:darkgreen;text-decoration:underline;
}效果展示
【3】CSS基础选择器
1、标签选择器和类选择器
注意：类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>标签选择器和类选择器</title><style type="text/css">/*标签选择器*/p{text-decoration: underline;font-family: "微软雅黑";}/*类选择器*/.red{color: red;}.green{color: greenyellow;}.font22{font-size: 22px;}</style></head>
<body><h2 class="red">二级标题文本</h2><p class="green font22">段落一文本内容</p><p class="red font22">段落二文本内容</p><p>段落三文本内容</p>
</body>
</html>效果展示
2、id选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>id选择器</title><style type="text/css">#bold{font-weight: bold;}#font24{font-size:24px; }</style></head>
<body><p id="bold">段落一设置粗体文字</p><p id="font24">段落二设置字号为24px。</p><p id="font24">段落三设置字号为24px。</p><p id="bold font24">段落四设置粗体文字，设置字号为24px。</p>
</body>
</html>效果展示
4、通配符选择器和交集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>通配选择器和交集选择器</title><style type="text/css">*{text-decoration: underline;} /*通配选择器*/p{color: red;}/*标签选择器*/.special{color: blue;}/*类选择器*/p.special{color: green;}/*交集选择器*/</style></head>
<body><p>段落一，标签选择器的作用对象(红色)</p><p class="special">段落二为绿色，交集选择器的作用对象</p><h2 class="special">标题为蓝色，交集选择器不影响选择器的单独使用。</h2><p>所有内容都有下划线，因为通配选择器的作用范围是所有标签</p>
</body>
</html>效果展示
5、并集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>并集选择器</title><style type="text/css">h2,h3,p{color: red;font-size: 14px;}/*由不同的选择器组成的并集选择器*/h3,.special,#one{text-decoration: underline;}/*由标签选择器、类选择器、id选择器组成的并集选择器*/</style></head>
<body> <h2>二级标题，红色，14px大小</h2><h3>三级标题，红色，大小14px，有下划线</h3><p class="special">段落一含类special,有下划线,红色，大小14px</p><p>段落二，红色，大小14px</p><p id="one"> 红色，14px，有下划线</p>
</body>
</html>效果展示
6、后代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>后代选择器</title><style type="text/css">p strong{color: blueviolet;}p strong em {color: blue;}strong{color: hotpink;}</style></head>
<body> <p>天下难事，<strong>必作于易。</strong></p><p>天下难事，<strong>必作于易。天下兴亡，<em>匹夫有责。</em></strong></p><strong>天下大事，必作于细</strong>
</body>
</html>效果展示
