1、字型大小与行高
几乎所有的浏览器中font-size的默认大小都是16像素,除非手动去设置,字体建议使用以em为单位去调整
h3 {
font-size: 1.314em;
}
em的单位用于font-size属性时,实际上是一个相应元素继承的font-size缩放因子,比如:h3元素,虽然可以直接设置为21px,但是em更加灵活,多数浏览器都允许缩放整个页面,即使像素单位也可以缩放,而使用em之后,如果用户使用了偏好的font-size浏览器默认的大小进行了修改,那么相应的元素的大小也会相应的进行调整。因为em单位继承的大小缩放,所以可以通过缩放父元素的font-size来修改页面局部的继承大小,但是这样做也有问题(也是使用em经常出错误的地方):如果我们不想因为调整了某个元素在标记中的位置而意外改变其字型大小
p {
font-size:1.314em;
}
article {
font-size:1.314em;
}
这意味着p和article元素默认情况下的font-size为21像素,但是article中的p元素标签则会变成1.314em*1.314em,这样就不符合设计稿了,因此,在使用相对长度值的时候,必须留意最终计算得到的值,当使用em用于计算模型盒子的时候,它不是基于继承font-size,而是基于元素自身计算的font-size,因此,不同级别的元素标签对应的font-size是不同的。
2、行间距、对齐以及盒子的构造
这部分主要剖析了CSS行内格式化模型,针对于行内格式化,每行文本都会生成一个行盒子,行盒子还可以进一步分成行内元素的行内盒子,如<p><strong>测试</strong></p>
中的strong标签,行内盒子的内容区用于显示文本,内容区的高度由font-size决定,每个行内盒子的底边都默认对齐于靠近底部的共同水平线,这条线也被称为基线。行高指的是行盒子的总高度,也叫做行间距。
设置行高:
一般来说,行高取值于1.2~1.5范围内,关键是行与行之间不能太密,这里给 line-height
设置了1.5,指的是设置为了当前font-size的1.5倍。
垂直对齐:
除了line-height,行内盒子也会受到vertical-align
属性的影响,它的默认值是baseline,即子元素的基线与父元素的基线对齐。
<time datetime="2016-02-23">
<span class="ordinal">
rd
</span>
</time>
.ordinal {
vertical-align: super;
font-size:smaller;
}
vertical-align还有其他的关键字sup,bottom,text-top,text-bottom,middle。text-top和text-bottom会让当前元素的内容区与父行盒子的内容区顶部或底部对齐,但只有在行内盒子的font-size或line-height与其父元素不同时才会有影响,
文本粗细:
font-weight属性来设置标题的文本的粗细,有些字体的变形很多,也可以通过100~900之间的100的整数倍数字去设置。
字体样式:
font-style会从字型中选择斜体显示,前提是存在这个变体,如果不存在,浏览器会通过倾斜字体来模拟,但是结果会不太理想。
大小写变换和小型大写变体:
css可以控制英文字母的大小写,属性为text-transform
,存在三个属性值,capitalize把每个词的首字母大写,uppercase和lowercase是把所有字母全部变成大写或者小写。
控制字母和词间距:
word-spacing主要控制词间距,很少用,设置为0.1em就指的是在默认词间距的基础上加了0.1em。
letter-spacing主要控制字符的间距。
3、版心宽度、律动和毛边
文本缩进:
默认情况下,文本是左对齐的,使用text-indent:1.25em
设置了段首缩进,段落右边参差不齐的样式也被称为毛边。text-align属性可以接受下列鸡哥关键值,left,right,center和justify,如果给父元素设置了dir='rtl'
属性,即从右往左显示,浏览器会自动反转默认的文本方向。
给text-align设置justify值时,可以在单词间平均分布间距,结果就是左右两端对齐,消除毛边。但是如果让文字使用两端对齐,可能会引起串流
,即文本中间会有断断续续的空白部分,IE会支持另一个非标准值newspaper,它会同时的调整字母间距和单词的间距。
解决串流的做法二:
如果让文本两端对齐,那么连字符会有助于减轻串流的问题,插入一个表示连字符的实体(也就是软连字符­),要想使用自动连字符的功能。
- 1、首先,需要在html元素中设置语言代码
<html lang="en">
- 2、通过css设置hyphens属性值设为auto
p {
hyphens:auto;
}
要关闭连字符,只需要将hyphens属性值设为manual,即手动模式,在手动模式下,软连字符会起作用。
4、多栏文本
对于大屏幕而言,使用版心宽度会造成大片的空白区域,如果想要有效的利用宽屏,可以把文本分成多栏,并对每栏宽度加以限制。如果想要在最大宽度为70em下分成3栏,可以通过如下设置:
article {
max-width: 70em;
columns: 20em;
columns-gap:1.5em;
margin: 0 auto;
}
columns属性是clolumns-count和columns-width属性的简写,如果只设置columns-count属性,浏览器会严格生成指定数量的栏,不管宽度如何,如果同时设置了columns-width和columns-count,则前者会作为最大栏数,后者会作为最小栏数。