|
CSS提供强大的针对文本控制能力，可以控制文本颜色上变化，文本的对齐，文本的缩进等一系内容。这一节课我们主要学习CSS如何控制文本 文字大小的设置font-size通过这个属性我们可以设置文字的大小，可能取的值%，具体的像素也可以是EM 示例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title>www.文字大小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./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title>www.字体属性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./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title>www.字体粗细 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./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title>www.文本修饰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./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./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./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./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./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./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></span>网站是专注于提供CSS教程，分享一些CSS精彩的实例，并且自己写一些供初学者学习的文章，同时也提供一个CSS学习免费答疑的地方t</p> </body> </html> |
|
|
