CSS文本属性

一、任务目标

掌握CSS文本属性的使用

二、任务背景

通过CSS文本属性可以给文本设置颜色、字号、行间距、对齐、段落缩进等样式，将页面的正文与标题区分开，同时能够丰富整个页面布局。

三、任务内容

1、color属性

用于设置文本的颜色，可设置的值有：

• 颜色名，如【red】

• 十六进制值，如【#FFFFFF】

• RGB值，如【rgb(255, 0, 0)】

• rgba值，如【rgba(255, 0, 0, 0.9)】

2、font-size属性

用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为rem、em等

字体大小未设置时默认字体大小为16px

3、font-weight属性

• 用于设置文本的粗细，可设置的值有：

属性值	说明
normal	标准字符（默认）
bold	粗体字符
bolder	更粗的字符
lighter	更细的字符
100、200、300、400、500、 600、700、800、900	400相当于normal 700相当于bold 数值越大字体越粗

4、font-family属性

用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。如果浏览器不支持第一个字体，则会尝试下一个，以此类推

font-family："Times New Roman", "Georgia", "Serif";

5、text-align属性

用于设置文本的水平对齐方式，可设置的值有：

• center（居中对齐）

• left（左对齐）

• right（右对齐）

文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐

6 line-height属性

用于设置行间距，可设置的值如下

• 数字：行间距为当前字体大小乘此数字

• 固定值：设置固定的行间距，如20px

• 百分比：行间距为当前字体大小乘百分比

7、text-indent属性

用于指定首行缩进值，可设置的值如下

• 固定值：设置固定首行缩进，如20px

• 百分比：首行缩进值为父元素宽度乘此百分比

8、letter-spacing属性

用于设置字间距，设置固定值为字间距，如10px

9、word-spacing属性

用于指定文本中单词之间的间距，设置固定值为单词间距，如10px

10、text-decoration

用于设置文本的装饰线，是下表属性的简写

属性	属性值		描述
text-decoration-line	none	无线条	设置要使用哪种文本装饰的类型 （下划线、上划线、删除线）。
	underline	下划线
	overline	上划线
	line-through	删除线
text-decoration-color	颜色名、十六进制颜色、rgb等		设置装饰线颜色
text-decoration-style	solid	实线	设置装饰线的样式
	double	双实线
	dotted	点划线
	dashed	虚线
	wavy	波浪线

• 例：

text-decoration: underline wavy red;  /* 表示为红色波浪形下划线 */

11、text-transform

用于设置文本大小写字母，常用属性如下

• uppercase：全部文本均为大写字母

• lowercase：全部文本均为小写字母

• capitalize：文本的每个单词首字母为大写字母

12、writing-mode

设置文本在水平或垂直方向的排布方式

• horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向

 

• sideways-lr：文本流在垂直方向，从下至上、从左至右排列（该属性值不兼容webkit内核浏览器）

 

• sideways-rl：文本流在垂直方向，从上至下、从右至左排列（该属性值不兼容webkit内核浏览器）

 

• vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向

 

• vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致

 

13、white-space

用于设置文本的空白符处理方式，属性值如下

属性值	描述
normal	合并空格，换行符转化为一个空格，允许自动换行
nowrap	合并空格，换行符转化为一个空格，不允许自动换行
pre	保留空格，保留换行符，不允许自动换行
pre-line	合并空格，保留换行符，允许自动换行
pre-wrap	保留空格，保留换行符，允许自动换行
break-spaces	保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间