您的位置：首页 > Web前端 > CSS

css文本样式

2016-03-10 09:09 471 查看

1.css文本样式

字体颜色，文本间距，对齐方式

1.字体颜色

color

<!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>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>这是一个文本！</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
div
{
color:#F00;
}




2.字体间距

letter-spacing

<!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>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>这是一个文本！</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
div
{
color:#F00;
letter-spacing:30px;
}




3.行间距

line-height

<!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>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>这是一个文本！</div>
<div>这也是一个文本！</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
div
{
color:#F00;
letter-spacing:30px;
line-height:30px;
}




4.文本对齐方式

text-align:left/right/center/justify

justify表示两端对齐

<!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>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>这是一个文本！</div>
<div>这也是一个文本！</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
div
{
color:#F00;
letter-spacing:30px;
line-height:30px;
text-align:center;
}




5.修饰文本

text-decoration

包括下划线、上划线、删除线等

text-decoration:underline/line-through/overline

<!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>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div id="a">这是一个文本！</div>
<div id="b">这也是一个文本！</div>
<div id="c">好的！</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
div
{
color:#F00;
letter-spacing:30px;
line-height:30px;
text-align:center;
}
#a
{
text-decoration:underline;
}
#b
{
text-decoration:line-through;
}
#c
{
text-decoration:overline;
}




6.转换大小写

text-transform:capitalize/uppercase/lowercase

其中capitalize表示第一个字母大写

<!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>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div>i love java!</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
div
{
color:#F00;
letter-spacing:30px;
line-height:30px;
text-align:center;
text-transform:capitalize;
}




7.控制文本换行

white-space：normal/pre/nowrap

normal：正常换行

pre：按写的形式 和<pre>效果一样

nowrap：不换行


8.文本缩进


text-indent

9.字体大小

font-size

10.选择字体

font-family

font-family:1,2,3; // 可以是多个字体 但是如果你的计算机有1 就使用1字体 如果没有就看2是否存在 以此类推

文本缩进 字体大小我 选择字体就不写了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航