初学者求CSS文字段落设置

html-css017

初学者求CSS文字段落设置,第1张

把下列代码拷到记事本，后缀改为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>

<!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>

1、默认情况，它是自动换行的；

2、设置文字不换行white-space:nowrap，强行撑开；

3、如果不希望容器被撑开，那就给文字加省略号：

<style type="text/css">

.divbox{ width:150px white-space:nowrap overflow:hidden text-overflow:ellipsis}

</style>

</head>

<body>

<div class="divbox">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>

</body>