css基础系列教程4:文本属性

作者:divcss教程吧      点击次数:530次     发布日期:2014-12-12

CSS提供强大的针对文本控制能力,可以控制文本颜色上变化,文本的对齐,文本的缩进等一系内容。这一节课我们主要学习CSS如何控制文本

文字大小的设置font-size

通过这个属性我们可以设置文字的大小,可能取的值%,具体的像素也可以是EM

示例

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

    <title>www.divcss8.com文字大小font-size</title>

    <style type="text/css">

     h1 {font-size:14px; }

    </style>

</head>

<body>

<h1>十六进制示例</h1>     

</body>

</html>

控制文字字体属性:font-family

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

    <title>www.divcss8.com字体属性font-family</title>

    <style type="text/css">

     h1 {font-family:"黑体","宋体"; }

    </style>

</head>

<body>

<h1>设置字体</h1>     

</body>

</html>

PS:对H1文字应用字体,如果用户电脑上安装的有黑体,就是显示黑体,如果没有就显示宋体。

字体粗细font-weight

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

    <title>www.divcss8.com字体粗细 font-weight</title>

    <style type="text/css">

     h1 {font-family:"黑体","宋体"; font-weight:normal;}

    </style>

</head>

<body>

<h1>设置字体</h1>     

</body>

</html>

Ps:通过这个属性我们可以为一些想重点呈现的文字实现加粗,当然就像我们这个例子h1在浏览器中默认显示的是加粗的,我们可以通过上边的文字设置其为不加粗,当然也可以取值 100-900,越来越粗,也可以是bold等于900

字体颜色设置 color:颜色值;

文本修饰属性text-decoration

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

    <title>www.divcss8.com文本修饰text-decoration</title>

    <style type="text/css">

     h1 a{font-family:"黑体","宋体"; font-weight:bold;text-decoration:none;}

      h1 a:hover{text-decoration:underline;}

    </style>

</head>

<body>

<h1><a href="#">设置字体</a></h1>          

</body>

</html>

PS:我们通过这个属性经常性设置链接是否带下划线,当取值为NONE时表示不要下划线。鼠标悬停时可以加上下划线,取值overline是上划线,取值line-through为删除线

文本缩进text-indent

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

    <title>divcss8文本缩进</title>

    <style type="text/css">

    p{width:200px;text-indent:2em;}

    </style>

</head>

<body>

<p>divcss8网站是专注于提供CSS教程,分享一些CSS精彩的实例,并且自己写一些供初学者学习的文章,同时也提供一个CSS学习免费答疑的地方t</p>

</body>

</html>

PS:该属性经常用于在段落中为文字进行首行缩进,以及以图换字的时候也可以取负值。

行高属性: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>

    <title>divcss8行高属性lin-height</title>

    <style type="text/css">

    p{width:200px;text-indent:2em;line-height:22px;}

    </style>

</head>

<body>

<p>divcss8网站是专注于提供CSS教程,分享一些CSS精彩的实例,并且自己写一些供初学者学习的文章,同时也提供一个CSS学习免费答疑的地方t</p>

</body>

</html>

PS通过该属性可以设置段落的行与行高度,而且如果只有一行时,我们还可以让内容垂直居中。一般设置方法为 height:22px;line-height:22px;

字间距属性: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>

    <title>divcss8字距letter-spacing</title>

    <style type="text/css">

    p{width:200px;text-indent:2em;line-height:22px;}

    p span{letter-spacing:4px;}

    </style>

</head>

<body>

<p><span>divcss8.com</span>网站是专注于提供CSS教程,分享一些CSS精彩的实例,并且自己写一些供初学者学习的文章,同时也提供一个CSS学习免费答疑的地方t</p>

</body>

</html>

分享DIVCSS8