CSS-Learning | CSS中的网页排版技术与文本属性设置

一个简单的文档页面包括几个标题和一些段落，怎么排版才能提升页面可读性，并且美观呢？这里，介绍一些网页排版属性

基本排版技术

1. 文本颜色
   浏览器默认会把绝大多数文本渲染成黑色（链接的颜色是“活力蓝”），白底黑字的对比度极高，但容易形成过分强调。通过color属性，我们可以把正文改成深蓝灰色，链接也调整一下。

   p {
   	color: #3b4348;
   }
   a {
   	color: #235ea7;
   }
   

2. 字体族
   font-family属性的值是一个备选字体的列表，按优先级从左到右排列

   body {
   	font-family: 'Georgia Pro', Georgia, Times, 'Time New Roman', serif;
   }
   

3. 字型大小和行高

   几乎所有浏览器中font-size的默认大小都是16像素，我们可以选择使用em单位来调整特定元素的大小，当用户修改偏好中的默认font-size大小时，那么相应元素的大小也会相应调整。对于font-size属性，可用百分比代替em。

   最灵活的方式就是使用rem单位。rem也是一个缩放因子，但它始终基于根元素的em大小缩放。

   标题的大小有一个“纯四度”（perfect fourth）的数学比例，即上一级标题会比下一级标题的字型大小大自身尺寸的1/4，或者说是下一级标题字型大小的1.33333…倍。

4. 行间距、对齐以及行盒子的构造

   下图展示了行内格式化模型的一个例子：<p>The <strong>Moon</strong>...[etc]</p>

每行文本都会生成一个行盒子。行盒子还会进一步分成表示行内元素的行内盒子，或者连接两个行内元素的匿名行内盒子。

行内盒子的内容区显示文本，内容区的高度由font-size的测量尺度。

小写字母“x”的上边界决定了所谓的x高度。

行高指的是行盒子的总高度，更通俗的叫法是行间距。

设置行高： line-height，一般取值在1.2～1.5范围内。设置不加单位，为了在子元素继承的是一个系数，而不是计算后得到的像素值，永远与自己的font-size成比例。

垂直对齐：vertical-align也会影响行内盒子，默认值为baseline，即子元素的基线与父元素的基线对齐。还有其他关键字supper、sup、top、bottom、text-top、text-bottom和middle。

5. 文本粗细

   font-weight属性来设置标题文本的粗细，关键字：normal、bold、bolder和lighter，也可以直接给出数字值，都是100的整数倍：100、200、300、400，等等，最大是900。

   默认值normal对应400，bold对应700。

6. 字体样式

   font-style:italic会从字型中选择斜体显示，前提是存在这个变体。如果不存在，浏览器会通过倾斜字体来模拟，但结果会不太理想。

   默认值是normal，还可以设置oblique关键字（是倾斜文本的另一个变体），但很少用。

7. 大小写变换和小型大写变体

   text-transform属性可以控制英文字母大小写，设置为uppercase、lowercase、capitalize、none，分别是把所有字母都显示为大写、小写，单词首字母变大写，显示HTML源码的默认大小写。

   font-variant属性，值为small-caps，可把英文文本转换成所谓的“小型大写字母”，虽然所有字母大写，但是只有首字母是正常大小，其他字母的大小和小写一样。

8. 控制字母和单词间距

   word-spacing属性控制词间距，letter-spacing控制字符间的距离。

9. 文本缩进与对齐

   text-indent设置文本缩进；

   text-align属性接受关键字：left、right、center和justify。后来又加上了start和end（文本逻辑方向）

10. 文本阴影

    text-shadow属性用于给文本绘制阴影，指定相对于原文本x轴和y轴的偏移量（可正可负）、模糊距离（0表示完全不模糊）和颜色值，由空格分隔。

    h1 {
    	text-shadow: -.2em .4em .2em #ccc;
    }
    

以上就是一些基础的CSS文本属性设置介绍。