码迷,mamicode.com
首页 > Web开发 > 详细

「CSS」文本编排相关的CSS属性设置

时间:2018-10-10 21:49:52      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:ext   字体颜色   相关   文本   文本样式   包含   划线   居中   ima   

1、font-family:设置字体族。

格式为font-family:字体1,字体2,……,通用字体族|inherit。 

通用字体族,是指一类相似的字体。W3C的CSS规则规定,要指定一个通用字体族,避免客户端没有安装指定字体时能使用本机上的通用字体族中的字体。该属性及其值的涵义如下图

技术分享图片

 

2、font-size:设置文本的大小。该属性及其值的涵义如下图

技术分享图片

 

3、font-weight:设置文本加粗。该属性及其值的涵义如下图

技术分享图片

 

4、font-style:可设置字体是正常还是斜体。该属性及其值的涵义如下图

技术分享图片

 

5、line-height:设置文本的行高,它是指上下文本行的基线之间的垂直距离。其属性及其值的涵义如下图

技术分享图片

 

6、字体属性font:是字体设置的简写形式,其格式及解释如下:

技术分享图片

 

其中,用[]括住的属性是可选的,而font-size和font-family是必须要写的两个属性,其他属性若不写,则网页将使用它们对应的默认值。另外,font-size/line-height必须用/组成一个,不能分开写。例如:

技术分享图片

这段CSS设置了字号为12像素,2倍行距,字体族为arial 和arial black。

7、字体颜色color属性:

技术分享图片

 

8、text-align属性:设置文本的水平对齐方式。其值有三,分别是左对齐left(默认)、居中对齐center、右对齐right。

9、首行缩进属性text-indent:其属性值及涵义见下图。

技术分享图片

 

10、文本修饰属性text-decoration:用来设置文本是否带有下划线或删划线等,其值及涵义如下图:

技术分享图片

 

11、字符间距属性letter-spacing:设置字符与字符之间的间隔,正值是拉宽字符间距,负值是缩小字符间距。其值及涵义如下图:

技术分享图片

 

12、字间距属性word-spacing:设置单词与单词之间的间隔。该属性对包含两个词以上的英文有作用,对汉字是没有作用的。

技术分享图片

 

例如,定义一种文本样式,其字体族为“黑体,宋体,新宋体”,字体粗细为500,斜体,大小16像素,行距26像素,红色,带下划线,则代码应写成下图所示:

技术分享图片

「CSS」文本编排相关的CSS属性设置

标签:ext   字体颜色   相关   文本   文本样式   包含   划线   居中   ima   

原文地址:https://www.cnblogs.com/wrxblog/p/9768697.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!