4-1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加css样式</title>
<style type="text/css">
h1{color: green; font-size: 14px;}
</style>
</head>
<body>
<h1>你看见我变样了吗？</h1>
</body>
</html>
4-2
<!DOCTYPE html>
<html>
<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>
4-3
<!DOCTYPE html>
<html>
<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>
4-4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
.green{ color:green; }
.blue{ color:blue; }
.font1{ font-size:22px; }
p{font-family: "楷体"; text-decoration: underline;}
</style>
</head>
<body>
<h2 class="green">静夜思</h2>
<p class="blue font">唐：李白</p>
<p class="green font1">床前明月光</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</body>
</html>
4-5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
#blod{font-weight: bold;}
#font24{ font-size:24px; }
</style>
</head>
<body>
<p id="bold">段落1 : id="bold",设置粗体文字。</p>
<p id="font24">段落2：id="font24",设置字号为24px。</p>
<p id="font24">段落3：id="font24",设置字号为24px。</p>
<p id="bold font24">段落4：id="bold font24",同时设置粗体和字号24px。</p>
</body>
</html>
4-6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签指定式选择器</title>
<style type="text/css">
p{color: blue;}
p.special{color: red;} /*标签指定式选择器*/
p.special{color: green;}
</style>
</head>
<body>
<p>普通段落文本（蓝色）</p>
<p class="special">指定了.special类的段落文本（红色）</p>
<h3 class="special">指定了.special类的标题颜色（绿色）</h3>
</body>
</html>
4-7
<!DOCTYPE html>
<html>
<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>
4-8
<!DOCTYPE html>
<html>
<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;} /*标签、类、id组成的并集选择器*/
</style>
</head>
<body>
<h2>二级标题文本。</h2>
<h3>三级标题文本，加下画线。</h3>
<p class="special">段落文本1,加下画线。</p>
<p>段落文本2，普通文本。</p>
<p id="e">段落文本3,加下画线。</p>
</body>
</html>
4-9
<!DOCTYPE html>
<html>
<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>
4-10
<!DOCTYPE html>
<html>
<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>
4-11
<!DOCTYPE html>
<html>
<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>
4-12
<!DOCTYPE html>
<html>
<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>
4-13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器的叠加</title>
<style type="text/css">
.inner{ text-decoration: line-through; }
/*类选择器定义删除线，权重为10*/
div div div div div div div div div div div { text-decoration: overline; }
/*后代选择器定义下画线，权重为11个1的叠加*/
</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>
