李欲晴20227821043
</html>
</body>
<h1>你看见我变样了吗？</h1>
<body>
</head>
</style>
h1{color:green;font-size:14px;}
<style type="text/css">
<title>添加CSS样式</title>
<meta charset="UTF-8">
<head>
<html lang="en">
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内嵌式引入CSS样式表</title>
<style type="text/css">
h2{text-align: center;}
p{
font-size: 16px;
font-family: "楷体";
color: purple;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>内嵌式CSS样式</h2>
<p>使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中，title标签之后</p>
</body>
</html>
h2{text-align: center;}
p{
font-size: 16px
font-family:"楷体";
color: purple;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.green{color:green}
.blue{color:blue}
.font1{font1-size:22px}
p{font-family:"楷体"；text-decoration:underline}
</style>
</head>
<body>
<h2 class="green">静夜思</h2>
<p class="blue font1">李白</p>
<p class="green font1">床前明月光</p>
<P>疑是地上霜</P>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#bold{font-weight: bold;}
#font24{font-size: 24px}
</style>
</head>
<body>
<p id="bold">段落一：id=“bold”，设置粗体文字</p>
<p id="font24">字号为24</p>
<p id="font24">字号为24</p>
<p id="bold font24">同时设置粗体和字号24px</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签指定式选择器</title>
<style type="text/css">
p{color: blue;}
p.special{color: red}
.special{color: green}
</style>
</head>
<body>
<p>普通文本（蓝色）</p>
<p class="special">指定了.special类的段落文本（红色）</p>
<h3 class="special">指定了.special类的标题文本（绿色）</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p strong{color: orange}
strong{color: blue}
</style>
</head>
<body>
<p>段落标签内部<strong>嵌套了strong标签，使用strong定义的文本（橙色）</strong></p>
<strong>strong文本（蓝色）</strong>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style type="text/css">
h2,h3,p{color: purple;font-size: 14px}
h3,.special,#e{text-decoration: underline;}
</style>
</head>
<body>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p class="special">段落一</p>
<p>段落二</p>
<p id="e">段落三</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@font-face规则</title>
<style type="text/css">
@font-face{
font-family:"正方舒体";
src:url(font/FZSTK.TTF);
}
p{
font-family:"正方舒体";
font-size: 32px
color:#3366cc;
}
</style>
</head>
<body>
<p>桃之夭夭，灼灼其华。</p>
<p>之子于归，宜其室家。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影效果</title>
<style type="text/css">
.one{
font-size:60px;
text-shadow: 10px 5px 10px #6600FF;
}
.two{
font-size:60px;
text-shadow: -10px -5px -10px #6600FF;
}
</style>
</head>
<body>
<p class="one">一杯敬产品</p>
<p class="two">一杯敬推广</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-overflow属性</title>
<style type="text/css">
.one{
width: 300px;
height: 50px;
border: 1px solid blue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.two{
width:300px;
height: 50px;
border: 1px solid blue;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<p class="one">楚辞又称“楚词”，是战国时代的伟大诗人屈原创造的一种诗体。</p>
<p class="two">作品运用楚地的文学样式、方言声韵、叙写楚地的山川人物、历史风韵，具有浓厚的地方特色</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS层叠性</title>
<style type="text/css">
p{
font-size: 16px;
font-family:"微软雅黑";
}
.special{
font-size: 20px;
}
#one{
color: red;
}
</style>
</head>
<body>
<p class="special" id="one">字小刺头深草里</p>
<p>而今渐觉出蓬高</p>
<p>时人不识凌云木</p>
<p>直待凌云始道高</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器的叠加</title>
<style type="text/css">
.inner{
text-decoration: line-through;
}
div div div div div div div div div div div div div{text-decoration: overline;}
</style>
</head>
<body>
<div><div><div><div><div><div><div><div><div><div><div class="inner">文本样式</div></div></div></div></div></div></div></div></div></div></div>
</body>
</html>
