1、应用基本文本样式
1.1 对齐文本
对齐属性:
属性 | 说明 | 值 |
---|---|---|
text-align | 指定文本块的对齐方式 | start,end,left,right,center,justify |
text-justify | 如果text-align属性使用了justify值,则该值会用来指定对齐文本的规则 | 见下表 |
text-align属性相当简单,不过,需要注意的重要一点是:可以将文本对齐到显式命名的某个边界(使用left或者right值),或者对齐到语言本来使用的边界(使用start和end值)。在处理从右到左的语言时,这是一个非常重要的区别。
text-justify属性的值:
值 | 说明 |
---|---|
auto | 浏览器选择对齐规则,这是最简单的方法,不过,不同浏览器之间的呈现方式会有微小差别 |
none | 禁用文本对齐 |
inter-word | 空白分布在单词之间,适用于英语等词间有空的语言 |
inter-ideograph | 空白分布在单词、表意字之间,且文本两端对齐,适用于汉语、日文和韩文等语言 |
inter-cluster | 空白分布在单词、字形集的边界,适用于泰文等无词间空格的语言 |
distribute | 空白分布在单词、字形集的边界,但连续文本或者草体除外 |
kashida | 通过拉长选定字符调整对齐方式(仅适用于草体) |
1.2 处理空白
空白在HTML文档中通常是被压缩或者直接忽略掉。这允许你将HTML文档的布局跟页面的外观分离。
whitespace属性控制浏览器对空白字符的处理方式。
值 | 说明 |
---|---|
normal | 默认值,空白符被压缩,文本行自动换行 |
nowrap | 空白符被压缩,文本行不换行 |
pre | 空白符被保留,文本只在遇到换行符的时候换行,这跟pre元素(参见第8章)的效果一样 |
pre-line | 空白符被压缩,文本会在一行排满或遇到换行符时换行 |
pre-wrap | 空白符被保留,文本会在一行排满或遇到换行符时换行 |
1.3 指定文本方向
direction属性告诉浏览器文本块的版块方向。
值:ltr,rtl
1.4 指定单词,字母,行之间的间距
属性 | 说明 | 值 |
---|---|---|
letter-spacing | 设置字母之间的间距 | normal长度值 |
word-spacing | 设置单词之间的间距 | normal长度值 |
line-height | 设置行高 | normal长度值,数值,% |
1.5 控制断词
word-wrap属性告诉浏览器当一个单词的长度超出包含块的宽度时如何处理。
值 | 说明 |
---|---|
normal | 单词不断开,即使无法完全放入包含块元素 |
break-word | 断开单词,使其放入包含块元素 |
p元素使用了normal值,意思是浏览器不会断开长单词,即使长单词溢出p元素。
1.6 首行缩进
text-indent属性用于指定文本块首行缩进,值可以是长度值,%。
text-indent: 15%;
2、文本装饰与大小写转换
text-decoration和text-transform两个属性分别允许我们装饰文本和转换文本大小写。
属性 | 说明 | 值 |
---|---|---|
text-decoration | 为文本块应用装饰效果 | none,underline,overline,line-through,blink |
text-transform | 为文本块转换大小写 | none,capitalize,uppercase,lowercase |
3、创建文本阴影
text-shadow为文本块应用阴影,值h-shawod,v-shadow,blur,color
h-shadow和v-shadow值分别指定阴影的水平偏移和垂直偏移。它们的值用长度值表示,允许负值。blur值也是一个长度值,定义了阴影的模糊程度,该值可选。color值指定阴影的颜色。
text-shadow: 0.1em 0.1em 1px lightgrey;
4、使用字体
属性 | 说明 | 值 |
---|---|---|
font-family | 指定文本块采用的字体名称 | 见下表 |
font-size | 指定文本块的字体大小 | 见下表 |
font-style | 指定字体样式 | normal,italic,oblique |
font-variant | 指定字体是否以小型大写字母显示 | normal,smallcaps |
font-weight | 设置字体粗细 | normal,bold,bolder,lighter,100~900之间的数字 |
font | 在一条声明中设置字体的简写属性 | 见后的表 |
格式:
font: font-style font-variant font-weight font-size font-family
4.1 选择字体
font-family属性指定使用的字体,按照优先顺序排列。浏览器从字体列表中的第一种开始尝试,直到发现合适的字体为止。这种方法很有必要,因为你可以使用用户安装在电脑上的字体,而由于操作系统和偏好不同,不同用户安装的字体会有所不同。
当然还有最后的保障:CSS定义了几种任何情况下都可以使用的通用字体。有几大类字体,称为通用字体系列,浏览器在呈现这些字体时可能有差异。
通用字体系列 |
---|
serif |
sans-serif |
cursive |
fantasy |
monospace |
4.2 设置字体大小
font-size属性的值:
值 | 说明 |
---|---|
xx-small | 设置字体大小。浏览器会决定每个值代表具体大小。不过,从上到下逐渐增大是有保证的 |
x-small | |
small | |
medium | |
large | |
x-large | |
xx-large | |
smaller | 设置字体相对于父元素字体的大小 |
larger | |
使用CSS长度值精确设置字体大小 | |
<%> | 将字体大小表示为父元素字体大小的百分数 |
4.3 设置字体样式的粗细
可以使用font-weight属性设置字体粗细——增加字体“重量”会使文本更粗。font-style属性允许我们在正常字体、斜体和假斜体(倾斜字体)三种字体之间选择。斜体和假斜体有明显区别,但这是技术上的,通常从文本外观看来差别很小。
font-weight: medium;
5、使用web字体
我之前提到过CSS字体的一大问题:不能指望用户的机器上一定安装了你想使用的字体。解决这个问题的方法是使用Web字体,我们可以直接下载Web字体并使用在自己的页面上,而不需要用户做什么。使用@font-face指定Web字体。
#font-face {
font-family: 'MyFont';
font-style: normal;
font-weight: normal;
src: url('http://titan/listins/MyFont.woff');
}
使用@font-face的时候,需要使用标准字体属性来描述正在使用的字体。font-family属性定义字体名称,用来引用要下载的字体;font-style和font-weight属性告诉浏览器如何设置Web字体的样式和粗细,也就是说你可以创建斜体和粗体字符;src属性用来指定字体文件的位置。Web字体有多种格式,但WOFF格式得到了最为广泛的支持和应用。