CSS入门篇（第二篇，字体与文本）

前言

前面我们说过了CSS如何使用引入以及优先级。本篇的内容主要讲述字体样式和文本样式。后续还会有JS 的篇章。
CSS样式无法展示请自行测试。

1.字体样式

1.1 字体属性

属性	描述
font-family	字体
fint-size	字体大小
color	字体颜色
font-weight	字体粗细
font-style	字体样式
(用于英文)font-variant	字体变形

1.1.1 font-family属性（字体）

语法：

p{font-family:"宋体","黑体"，serif;}

译：标签，最先使用宋体，如果没有宋体再使用黑体。宋体，黑体都没有的情况下使用serif 字体集。
font-family属性值可以是字体名（如“宋体”，“Arial”等），也可以是字体集合。（如：“serif”，“sans serif”等）

1.1.2 font-size属性（字体大小）

语法：

font-size:绝对单位|相对单位

绝对单位：

属性值	说明
in	英寸（1英寸=2.54厘米）
cm	厘米
mm	毫米
pt	磅，印刷的点数（72磅=1英寸）
pc	Pica （1pc=12pt）

相对单位（不推荐）

属性值	说明
xx-small	9px
x-small	11px
small	13px
medium	16px
large	19px
x-large	23px
xx-large	28px
larger	相对父元素文字大小变大
smaller	相对父元素文字大小变小
%	相对父元素文字大小变化
em	相对父元素文字大小倍数

1.1.3 color属性（字体颜色）

语法：

color:十六进制|RGB|颜色名

值	写法	值
十六进制	#fff或者#ffffff	f的取值范文（0-9加a-f）
rgb	rgb(255,255,255);或者rgb(100%,100%,100%);	数值0-255，百分比0%-100%
颜色名	red;	直接用英文颜色名

1.1.4 font-weight属性（字体粗细）

语法：

font-weighi:normal;

属性值	说明
normal	默认值（400）
bold	加粗（常用）（700）
bolder	更粗
lighter	更细
100~900	数值

1.1.5 font-style属性（字体样式）

语法：

font-style:normal;

属性值	说明
normal	默认
italic	斜体（常用）
oblique	倾斜

1.1.6 font-variant的属性（字体变形）

语法：

font-variant:normal;

属性值	说明
normal	默认
small-caps	小型大写字母

1.1.7 font属性（简写）

语法：

font:50px "宋体";
font:font-style font-variant font-weight  font-size/line-height font-family；
        样式         变形         加粗        大小      行高          字体   

注：
1.同时设置font-size和font-family，属性才起作用。值得中间用空格隔开。
2.五个值中前三个没有位置循序，后两个必须字体大小再前。
3.如果要设置行高，写在字体大小后边用“/”隔开。
4.字体可以写入多个用“,”隔开。

2.文本样式

2.1文本样式属性

属性	描述
text-align	文本对齐方式
line-height	行高
vertical-align	元素内部的垂直方式
text-indent	首行缩进
word-spacing	设置元素内单词之间间距
letter-spacing	设置元素内字母之间间距
text-transform	设置元素内文本的大小写
text-decoration	设置元素内文本的装饰

2.1.1 text-align属性（文本对齐方式）

语法

text-align:left;

注：只对块级元素有效，属性能继承。
想要把行内样式居中显示。再外部添加div（块级元素）设置text-align属性。
如：

<div style="text-align:center;">
<img src="\" />
</div>

如：

<div style="text-align:center;">
<p style="width:20%">asdasdsadsadsadsadsadasdsasdasdsadsadsadsadsadasdsadasdsadasdasdsadsadsadsadsadasdsadasdsadasdasdsadsadsadsadsadasdsadasdsadasdasdsadsadsadsadsadasdsadasdsadadasdsadasd</p>
</div>

译：
一个效果为文本对齐方式的div下有一个效果为宽度是父元素20%的p标签。

解析：本代码在不同浏览器下效果有所不同，如IE6中效果是，div下的p标签居中显示并且文字居中。火狐和谷歌择是只有文字居中，p标签没有变化。

属性值	说明
leftl	左对齐
right	右对齐
center	居中
justify	左右对齐

2.1.2 line-height属性（行高）

语法

line-height:长度值|百分比;

注：行高小于文字大小，会出现重叠的现象。属性能继承，不继承百分比值，继承的是算后值。

2.1.3 vertical-align属性（元素内部的垂直方式）

语法

vertical-align:top;

注：只对行内样式生效。可用于单元格中使用！

属性值	说明
top	元素顶部对齐
text-top	文本顶线对齐
middle	文本中线对齐
baseline	基线 （默认）
text-bottom	为本底线对齐
bottom	元素底部对齐
sub	上标（浏览器决定）
super	下标（浏览器决定）
长度	px
百分比	%

单行文本居中：把line-height的高度和height高度设置一样就行。

2.1.4 word-spacing（单词）和letter-spacing（字母）属性

语法

 word-spacing:2em;
 letter-spacing:15px;

word-spacing 对单词的判断取决空格。
letter-spacing则是每个字符。
值可以用px 百分比和 em

2.1.5 text-transform属性（设置元素文本的大小写）

属性值	说明
capitalize	首字母大写
uppercase	字母大写
lowercase	字母小写
none	没有设置效果

2.1.6 text-decoration属性（设置元素内文本的装饰）

属性值	说明
underline	下划线
overline	上划线
line-through	贯穿线
blink	闪烁效果（有兼容性问题）
none	没有效果

注：可设置多个值，不可继承。

---

5.总结

本篇我们讲述过CSS的字体和文本的样式以及修改。
如本文章描述有误请尽快联系博主！感谢您的阅读与帮助！