html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=utf-8"
/>
<title>CSS代码文字段落设置</title>
<style
type="text/css">
.one
{
font-size:10pt
color:red
font-weight:bold}
.two
{
font-size:18pt
color:green
text-decoration:underline}
.three
{font-size:18pt
color:blue
text-decoration:overline}
</style>
</head>
<body>
<p
class="one">网站字号建议使用"px"为单位
，大小一般为："12px~14px"，太大会出现剧齿，比较难看
备注：pt与px的关系
（pt=px乘以3/4
）</p>
<p
class="two">网站字号建议使用"px"为单位
，大小一般为："12px~14px"，太大会出现剧齿，比较难看
备注：pt与px的关系
（pt=px乘以3/4
）</p>
<p
class="three">网站字号建议使用"px"为单位
，大小一般为："12px~14px"，太大会出现剧齿，比较难看
备注：pt与px的关系
（pt=px乘以3/4
）</p>
</body>
</html>
把下列代码拷到记事本，后缀改为html<style>
.style1 { font-size:10ptcolor:#FF0000font-weight:bold}
.style2 { font-size:18ptcolor:#00FF00text-decoration:underline}
.style3 {font-size:18pttext-decoration:overlinecolor:#0000FF}
</style>
<body>
<p class="style1">CSS分类使用</p>
<p class-"style2">CSS分类使用</p>
<p class-"style3">CSS分类使用</p>
</body>
首先，你要明确css的可视化盒子模型——里面任何元素的显示都是盒子。元素分为块元素和内联元素。块元素的显示是这样的：沿页面垂直向下排列，每个盒子都尽可能的宽，除非限制盒子宽度，否则这个块元素的内容将充满这个页面。标签<p>是块元素，所以段落是以每个p为块，沿页面排列的。其次，段落与段落之间的距离就是两个盒子之间的距离。调整盒子之间的距离要调整盒子的margin属性。
最后，margin属性在设置上下距离也就是垂直距离的时候，一定要注意重叠问题。就是两个盒子的垂直距离取上边盒子的margin-bottom和下边盒子的margin-top中的最大值！。而水平排列的盒子的水平距离的话，是左边盒子margin-right和右边盒子的margin-left之和！。切记。
望采纳!
