<!-- edu_9_2_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置字体大小、样式及字体名称</title>
<style type="text/css">
h3{text-align:center;color:#3300FF;}
hr{color:#660066;}
#p1{font-size:20px;font-style:normal;font-family:宋体;}
#p2{font-size:200%;font-style:italic;font-family:楷体,隶书;}
#p3{font-size:x-small;font-style:oblique;font-family:宋体,楷体;}
#p4{font-size:xx-large;font-style:oblique;font-family:黑体,隶书,楷体}
</style>
</head>
<body>
<h3>设置字体大小、样式及字体名称</h3>
<hr>
<p id="p1">字号大小 20px、字体正常、宋体</p>
<p id="p2">字号大小 200%、字体斜体、隶书</p>
<p id="p3">字号大小 x-small、字体斜体、宋体</p>
<p id="p4">字号大小 xx-large、字体歪斜体、黑体</p>
</body>
</html>
<!-- edu_9_3_1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置字符间距、行高及首行缩进</title>
<style type="text/css">
h3{text-align:center;color:#3300FF;}
hr{color:#660066;}
#p1{letter-spacing:2px;line-height:1em;text-indent:2em;}
#p2{letter-spacing:4px;line-height:1.5em;text-indent:2em;}
#p3{letter-spacing:6px;line-height:2em;text-indent:3em;}
word-spacing:10px;
</style>
</head>
<body>
<h3>设置字符间距、行高及首行缩进</h3>
<hr>
<p>id="p1">字符间距 2px、行高 1em、首行缩进 2em</p>昨天上午，南京国际博览中心金陵会议中心内欢声笑语，春意盎然，省委、省政府在这里举行春节团拜会。省领导罗志军、李学勇、张连珍等与各界人士1000多人欢聚一堂，共迎传统新春佳节，向全省人民致以节日问候和美好祝福。</p>
<p>id="p2">字符间距 4px、行高 1.5em、首行缩进 3em</p>昨天上午，南京国际博览中心金陵会议中心内欢声笑语，春意盎然，省委、省政府在这里举行春节团拜会。省领导罗志军、李学勇、张连珍等与各界人士1000多人欢聚一堂，共迎传统新春佳节，向全省人民致以节日问候和美好祝福。</p>
<p>id="p3">字符间距 6px、行高 2em、首行缩进 3em</p>昨天上午，南京国际博览中心金陵会议中心内欢声笑语，春意盎然，省委、省政府在这里举行春节团拜会。省领导罗志军、李学勇、张连珍等与各界人士1000多人欢聚一堂，共迎传统新春佳节，向全省人民致以节日问候和美好祝福。</p>
<p>Chinese leader Xi Jinping has urged the Communist Party of China (CPC) to be more tolerant of criticism and receptive to the views of non–communists.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置字体变体、粗细等</title>
<style type="text/css">
hr {
color: #660066;
}
p1 {
font-variant: normal;
font-weight: lighter;
}
p2 {
font-variant: small-caps;
font-weight: bold;
}
p3 {
font-weight: 600;
font: italic 28px/40px 幼圆;
}
p4 {
font: italic bolder small-caps 24px/1.5em 黑体;
}
h3 {
text-align: center;
color: #3300FF;
}
</style>
</head>
<body>
<p>设置字体、粗细等</p>
<h3>设置字体变体、粗细等</h3>
<hr>
<p>此段文字正常显示Welcome to you！</p>
<p id="p1">此段文字Welcome to you!正常、较细字体。</p>
<p id="p2">设置小型大写字母、字体标准粗体。</p>
<p id="p3">设置字体粗细度为600、斜体、大小28px、行高40px、字体幼圆</p>
<p id="p4">设置字体风格斜体、特粗、小型大写字母HTML、字号24px/行高1.5em、字体黑体</p>
</body>
</html>
<!-- edu_9_3_2.html -->
<!doctype html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置文字装饰及大小写转换</title>
<style type ="text/css">
h3{text-align:center;color:#3300FF;}
hr{color:#660666;}
#p1{text-decoration:underline;text-transform:capitalize;}
#p2{text-decoration:line-through;text-transform:lowercase;}
#p3{text-decoration:overline;text-transform:uppercase;}
</style>
</head>
<body>
<h3>设置文字装饰及大小写转换</h3>
<hr>
<p id="p1">[文字下画线、首字母大写capitalize]Chinese leader Xi Jinping has urged the Communist Party of China (CPC) to be more tolerant of criticism and receptive to the views of non - communists.</p>
<p id="p2">[文字删除线、字母小写 lowercase]Chinese leader Xi Jinping has urged the Communist Party of China (CPC) to be more tolerant of criticism and receptive to the views of non - communists.</p>
<p id="p3">[文字上画线、字母大写uppercase]Chinese leader Xi Jinping has urged the Communist Party of China (CPC) to be more tolerant of criticism and receptive to the views of non - communists.</p>
</body>
</html>
<!-- edu_9_3_3.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置水平与垂直对齐方式</title>
<style type="text/css">
h3 { text-align: center; color: #3300FF; }
hr { color: #660066; }
#div1 { margin: 10px; width: 700px; height: 60px; background: #CCFFCC;
text-indent: 2em; text-align: left; }
#div2 { margin: 10px; width: 700px; height: 60px; background: #FFFFCC;
text-indent: 2em; text-align: center; }
#div3 { margin: 10px; width: 700px; height: 60px; background: #99FF99;
text-indent: 2em; text-align: right; }
img { width: 50px; height: 50px; }
#img1 { vertical-align: text-top; }
#img2 { vertical-align: middle; }
#img3 { vertical-align: text-bottom; }
</style>
</head>
<body>
<h3>设置水平与垂直对齐方式</h3>
<hr>
<div id="div1">
<p>[文字水平居左，图像居顶部]这是一幅<img id="img1" src="eg_cute.gif">位于段落中的图像。</p>
</div>
<div id="div2">
<p>[文字水平居中，图像居中部]这是一幅<img id="img2" src="eg_cute.gif">位于段落中的图像。</p>
</div>
<div id="div3">
<p>[文字水平居右，图像居底部]这是一幅<img id="img3" src="eg_cute.gif">位于段落中的图像。</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置页面文字颜色及背景图像</title>
<style type="text/css">
h3 {
color: #0000FF; /* 修正OCR错误：#000ff→#0000FF */
background-color: #9999FF;
text-align: center;
padding: 10px;
}
#p1 {
text-indent: 2em;
background-image: url("Header.jpg"); /* 修正多余括号 */
}
#p2 {
text-indent: 2em;
background-image: url("header.jpg"); /* 修正混乱语法 */
}
</style>
</head>
<body>
<h3>设置页面文字颜色及背景图像</h3>
<p id="p1">昨天上午，南京国际博览中心金陵会议中心内欢声笑语，春意盎然，省委、省政府在这里举行春节团拜会。省领导罗志军、李学勇、张连珍等与各界人士1000多人欢聚一堂，共迎传统新春佳节，向全省人民致以节日问候和美好祝福。</p>
<p id="p2">昨天上午，南京国际博览中心金陵会议中心内欢声笑语，春意盎然，省委、省政府在这里举行春节团拜会。省领导罗志军、李学勇、张连珍等与各界人士1000多人欢聚一堂，共迎传统新春佳节，向全省人民致以节日问候和美好祝福。</p>
</body>
</html>
<!-- edu_9_6_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置边框属性</title>
<style type="text/css">
#p1{background:#99FFCC;border:15px groove #33FF66;}
#p2{border-style:dashed solid;}
#p3{border-style:solid;border-width:8px 10px;}
h4{text-align:center;}
</style>
</head>
<body>
<h4>设置边框</h4>
<p id="p1">使用CSS+DIV进行页面布局是一种全新的体验，完全有别于传统的表格排版习惯。</p>
<p id="p2">使用CSS+DIV进行页面布局是一种全新的体验，完全有别于传统的表格排版习惯。</p>
<p id="p3">使用CSS+DIV进行页面布局是一种全新的体验，完全有别于传统的表格排版习惯。</p>
</body>
</html>
<!-- edu_9_6_3.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置填充属性</title>
<style type="text/css">
#p1 {
background: #99FFCC;
padding: 15px 20px 15px;
}
#p2 {
background: #99FF99;
border-style: dashed;
padding-top: 20px;
padding-bottom: 20px;
}
#p3 {
background: #99CCCC;
border-style: solid;
padding-left: 50px;
padding-right: 20px;
}
h4 {
text-align: center;
padding: 10px;
background: #99CC99;
}
</style>
</head>
<body>
<h4>设置填充属性</h4>
<p id="p1">使用 CSS + DIV 进行页面布局是一种全新的体验，完全有别于传统的表格排版习惯。</p>
<p id="p2">使用 CSS + DIV 进行页面布局是一种全新的体验，完全有别于传统的表格排版习惯。</p>
<p id="p3">使用 CSS + DIV 进行页面布局是一种全新的体验，完全有别于传统的表格排版习惯。</p>
</body>
</html>
