CSS学习笔记
【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>效果展示
