CSS入门 3.2-CSS文本相关样式

CSS文本相关样式

一、CSS字体样式属性

1.font-size 字号大小

可以使用相对长度单位，也可以使用绝对长度单位，一般情况下使用px

css长度单位

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用

---

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

2.font-family 字体

可以同时设置多个字体（也可以只设置一个），中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，知道找到合适的字体，例如

body{font-faily:"华文彩云"，"宋体"，"黑体";}

注意：①各种字体之间必须使用英文状态下的逗号隔开。
②中文字体需要加英文状态下的引号，英文字体一般不需要加引号，当时只英文字体时，英文字体名必须位于中文字体名之前
③如果字体名中包含、#、$等符号，则改字体必须加英文状态下的双引号或者是单引号 例如：
font-family：“Times New Roman”
④尽量去使用系统默认字体，保证在任何浏览器中都能正常显示

3.font-weight 字体粗细

font-weight 可用属性值

值	描述
normal	默认值，定义标准的字符
bold	定义粗体的字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900（100的整数倍）	定义由细到粗的字符。其中，400等同于normal,700等同于bold,值越大 字体越粗

4.font-variant 变体

一般用于定义小型大写字母，仅对英文字符有效

font-variant可用属性值

normal	浏览器会显示标准的字体
small-caps	浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是，所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

5.font-style 字体风格

font-style可用属性值

normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式
oblique	浏览器会显示倾斜的字体样式

6.font 综合设置字体

基本语法格式：

选择器{font:font -style font-variant font-weight font-size/line-weight  font-family;}

例如：

p{font-family:Arial,"宋体";font-size:30px;font-style:italic;
     font-weight:bold;font-variant:small-caps;linr-weight:40px;}

等价于：

p{font: italic small-caps bold 30px/40px Arial,"宋体";}

其中，不需要设置的属性值可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

二、CSS文本外观属性

1.color 文本颜色

取值有三种方式：

预定义的颜色	如 red ,blue,green等
十六进制	如：#FF0000,#FF6600等，在实际工作中，十六进制是最长用的定义颜色的方式
RGB代码	如红色可以表示为rgb(255,0,0)或rgb（100%，0%，0%）

2.letter-spacing 字间距

自愈字符之间的空表，，其属性值可以为不同单位的数值，可以为负值，默认情况下为normal

3.word-spacing 单词间距

用于定义英文字符之间的间距，对中文字符无效。
属性值可以为不同单位的数值，允许使用负值，默认为normal

4.line-height 行间距

5.text-transform 文本转换

控制英文字符的大小写，属性值如下：

nono	不转换（默认值）
capitalize	首字母大写
uppercase	全部字符转换为大写
lowercase	全部字符转换为小写

6.text-decoration 文本装饰

设置文本的上画线，下画线，删除线等装饰效果，属性值如下：

none	没有装饰（正常文本默认值）
underline	下画线
overline	上画线
line-through	删除线

（可以同时赋多个属性值）

7.text-align 水平对齐方式

相当于HTML中的align属性，属性值如下：

left	左对齐（默认值）
right	右对齐
center	居中对齐

例如设置二级标题居中显示可以为：

h2{text-align:center;}

注意：text-align属性仅适用于块级元素，对行内元素无效
如果需要设置图像设置水平对齐，可以为图像添加一个父标记如< p >或< div >,然后对父标记应用text-align属性，即可实现图像的水平对齐。

8.text-indent 首行缩进

9.white-space 空白符处理

在使用HTML中，无论源代码有多少个空格，浏览器只会显示一个字符的空白。在CSS中，使用white-space属性可以设置空白符的处理方式，其属性值如下：

normal	常规(默认值），文本的空格，空行无效，满行（到达区域边界）后自动换行
pre	预格式化，按文档的书写格式保留空格，空行原样显示
nowrap	空格空行无效，强制文本不能换行，除非遇到换行标记< br/ >.内容超出元素的边界也不换行，若超出浏览器的页面则会自动增加滚动条