CSS代码文字段落设置

html-css029

CSS代码文字段落设置,第1张

<!DOCTYPE

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之和！。切记。

望采纳!