CSS3文本格式化技巧-优快云博客

CSS3的文本格式化

选择字体系列
指定替代字体
创建斜体
应用粗体格式
设置字体大小
设置行高
同时设置所有字体值
设置颜色
修改文本背景
控制间距
增加缩进
设置空白属性
对齐文本
修改文本的大小写
使用小型大写字母
装饰文本

选择字体系列

设置字体方法

    body{font-family:"微软雅黑";}
    h1,h2{font-family:"宋体";}

如果字体名称包含非ASCII字符就必须声明样式表的编码，即在样式表的第一行添加charset “utf-8”;

指定替代字体

（1）输入font-family:name,这里的name是首选字体名称
（2）输入，name2,这里的name是第二字体的名称。用一个都好和空格分隔每一个字体。
（3）根据需要重复步骤（2），最后一个表是类属的标准字体（serif,sans-serif,cursive,fantasy或monospace,他们代表首选字体最为接近的风格）结束字体列表。
注释1：表示类属的标准字体指的是serif,sans-serif等字体，他们表示的不是单个字体，而是一类字体例如，serif表示有衬线字体（在字的笔画开始，结束的地方有额外的装饰，且笔画的粗细有差异），sans-serif表示无衬线字体（字体的笔画无额外装饰，粗细差不多）
注释2：cursive,fantasy,monospace分别表示手写字体，装饰字体，等宽字体。

Mac OS和windows上默认都有的字体是有限的，他们都包含了更多（却不相同的的）可用于字体栈的系统字体，在网上搜索”font-stacks“(字体栈)，就可以看到很多font-family的声明，可以讲这些声明复制到你的样式表里，从而为不同的访问者提供相似的字体。

创建斜体

浏览器通常让HTML元素（如cite,em和i）默认以斜体显示。
1，创建斜体

p{font-style:italic;}

2，取消斜体

p{font-style:normal;}

font-style属性是继承的

应用粗体格式

浏览器会自动为标题（如h1,h2）添加粗体格式

1，应用粗体格式

p{font-weight:bold}

或者输入bolder(更粗)或lighter(更细)以设置相对当前粗细的值。
或者输入100~900之间的100的倍数，其中400代表正常粗细，700代表粗体。

2，取消粗体格式

p{font-weight:normal;}
任何自动添加了粗体格式
的元素（strong,h1~h6和b）以及继承了父元素粗体格式的元素，如需要去掉，即可取消粗体格式。

font-weight属性是继承的

设置字体大小

为网页里文本设置字体大小有两种方法：直接指定使用的字号，或指定相对于父元素文本的大小。
1，指定字体大小
（1）输入font-size:
（2）在冒号（：）后输入准确的字号，如13px.
或者使用关键词指定字体大小，即使用xx-small,x-small,small,medium,large,x-large或者xx-large.

如果以像素为单位设置字体大小，使用IE的访问者将无法使用浏览器的文本大小选项对文本进行放大缩小。这是要用em或百分比控制字体大小的原因之一。
数字与单位之间不应有任何空格

2，依父元素设置字体大小
（1）输入font-size:
（2）在冒号（：）后输入相对值，如1.5em或150%

使用这种，最好在body元素上建立一个基准，即声明body{font-size:100%;}大多数，这项设置等价于将字体大小设置为16px,即大多数系统默认的字体大小。font-size属性是继承的，该属性传递至其他元素，除非该元素设置了它自己的font-size.

如何计算em 的值？
实际上，1em就等于默认的字号大小（16px）可以通过一点点除法确定em值.
要指定字体的大小/父元素的字体大小=值

例如：如果要将h1设为22px，同时已知其父元素的字体大小为16px,而22/16=1.375，因此设置h1{font-size:1.375em;}，该值是相对于这些元素的父元素。
设置了相对字体大小的元素的子元素会继承这个大小，而不是继承相对值,
例如p元素的a链接则不继承p的相对值。

Css3引入了新单位rem（root em），不过他总是以根元素为参照系,这里所说的根元素（root element）毫无疑问就是web文档中的html元素。也就是说，无论嵌套层级有多深，rem都是根据的font-size来确定长度的。

设置行高

（1）输入line-height:
（2）输入n，这里的n是一个数字，它与元素字体大小相乘，得出需要的行高；
或者输入a，这里的a是以em，像素或者磅为单位的值；
或者输入p%，这里的p%是字体大小的百分数

如果使用数字设定行高，那么所有的子元素都会继承这个因子，因此，如果父元素的字体大小是16px（或者以em表示等价大小）行高是1.5，该元素的行高就是24（即16*1.5）像素，如果子元素的字体大小是10px,则该元素的行高就是15（10*1.5）像素。
如果使用百分数或者em值，那么只会继承产生的行高，因此如果父元素字体大小是16px，行高150%，则所有子元素都将继承24px的行高，不管字体大小是多少。

同时设置所有字体值

p{font:1.3em/1.6 “微软雅黑” ，Arial, sans-serify;},还可以包含font-style,font-weight等等；
字体大小和字体系列必须始终显示的声明：先是字体大小，再是字体系列。
font属性是继承的
行高是可选的，但如果出现，就必须紧跟在字体大小和斜杠后面

设置颜色

（1）输入color:
（2）输入colorname,(预定义颜色的一种)；
或者输入#rrggbb，以十六进制呈现的；
或者输入rgb（r,g,b）,其中r,g,b是0~255之间的整数，分别代表红绿蓝；
或者输入rgb（r%,g%,b%）,各个颜色所需的百分比；
或者输入hsl(h,s,l),其中h是0~360之间的数值，表示所需颜色的色相，s和l均是百分数，分别表示所需颜色的饱和度和亮度（一般来说，对于不透明颜色，使用十六进制数和RGB值更好。）
或者输入rgba(r,g,b,a),或hsla(h,s,l,a),a是0~1之间的小数，表示所需颜色的alpha透明度。

color属性是继承的

如果输入的r,g,b的值大于255,就会使用255，类似的，高于100%的百分数将被替换为100%。

修改文本背景

可以为单个元素设置背景，或者为整个页面设置背景，还可以为二者的热议组合设置背景。

body{background:#foc url(images/bg.jpg) repeat-x(或y或no-reapt) scroll(或者flex或者省略) 0 0;}
0 0(即x y)以设置背景图像的位置，其中x 和y可以表示为距离左上角的绝对值或百分数。或者用left（左对齐）,center(居中)或right(右对齐)表示x，用top（顶端对齐）,center(居中)或bottom(底端对齐)表示y。
分解

body{
background-color:#foc;
background-image:url(images/bg.jpg);
backgroun-repeat:repeat-x;
background-attachment:scroll;
background-position:0 0 ;}

background属性不是继承的

控制间距

可以增加或者减少单词之间或字母之间的距离，前者称为字间距（tracking）,或者称为字偶距（kerning）。
1，指定字间距
word-spacing:length;这里的length是一个带单位的数字，如0.8em或10px。
2，指定字偶距
letter-spacing:length;这里的length是一个带单位的数字，如0.8em或10px。