4-网页排版

发表于 | 分类于 | | 阅读次数: | 本文总阅读量 次

CSS的基本排版技术

文本颜色

文本颜色为最基本的样式之一，也是最容易被忽视的。默认情况浏览器会将其渲染成黑色，白底黑字的对比度极高，但是被过度强调了。
可以使用以下文本颜色

1
2
3
4
5
6
7
p{
    color:#3b4348;
}
a{
    color:#235ea7;
}
//虽然改变了颜色，但是相对于白底黑子真的舒服多了，链接也比直接的蓝色看的舒服,大家可以试一下

字体族群

字体族 (font-family) 优先级按照从左到右的排列
关于此我们主要看ui

字型大小与行高

几乎所有浏览器的默认大小都为16像素
em的单位是基于继承得到的
rem是基于根元素html的font-size得到的

为了兼容老旧浏览器可以在基于rem声明前声明一个像素单位 如果未对根元素html元素font-size属性修改，那么当前rem值就是像素值/16

基于比例缩放字型大小

凭感觉设置字型大小，最终还是要维持一定的比例关系，即一级比一级大1.3333倍

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

设置行高

一般来说行高取值为字体大小的1.2-1.5倍。行与行之间既不能太密也不能太疏。
一般来说如果给line-height设置了单位，body所有子元素都会继承line-height的计算值。反之如果没有设置单位，那么子元素继承的是一个系数，永远与自己的font-size成比例

垂直对齐

除了line-height，行内盒子也会受到vertical-align属性的影响。默认值为baseline（基线）
vertical-align除了常用的top、middle、bottom除外还有sup等，会使得文本偏离基线，并且会撑大行盒子的高度

文本粗细

font-weight 默认值为400 bold对应700;

###字体样式
font-style 只要值有italic（斜体）默认normal 另外的oblique很少用

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

css可以控制英文字母大小写，属性是 text-transform:uppercase/lowercase/capitalize/none; 分别表示全部大小写首字母大写和默认

控制字母和单词间距

word-spacing属性是控制词间距很少用

letter-spacing属性是控制字符间距

版心宽度、律动、毛边

###文本缩进与对齐
text-indent:1.25em;设置缩进
text-align:center/justify..设置对齐
毛边及时以左对齐或者右对齐为了阅读方便，另外一边会有些不对齐，justify可以改善这点，但是会造成阅读障碍 也会造成“串流”

连字符

手工插入连字符并不现实
所以使用hyphens属性让浏览器帮助插入
因为浏览器支持并不完全，所以需要加上前缀
想要使用此功能需要保证2点

1
2
<html lang="en"> //html元素中设置语言代码
p{hyphens:auto;}//通过此属性设置值为auto 关闭此属性值为manual

多栏文本

使用colunms属性可以给文本定义个最大宽度，之后定义每一栏的宽度最后设置栏与栏之间的间隔

1
2
3
4
5
6
7
8
article{
    clounms:20em;//表示每栏的大小 是colunm-width和colunm-count的简写形式
    colunm-width：20em;//在保证每栏20em的大小同时自动设置栏数
    clounms:3;//此种形式表示不管每栏宽度多少都要设置成3栏
    colunm-count:3;//此属性同上
    max-width:70em;//表示总共的宽度，根据这个宽度可以得出可以分出几栏
    colunms-gap:1.5em;//表示栏之间的间隔
}

后备宽度

为了在不支持多栏布局的浏览器中确保长度不会超过限度可以在段落元素上应用max-width 这样虽然旧版浏览器不能分栏，依旧可以保持可读性

跨栏

有时候头部标题，或者底部一段文字不希望多栏布局，可以选择关闭

1
2
3
4
5
6
h1{
    column-span:all;
    //或者
    columne-span:none;//此种方式浏览器试了下好像不行
}
//如果给文本流中间的一个元素横跨所有栏，那么文本会按照垂直切分后的几栏流动，即会横向流动

ps：存在问题，ie9及更早的浏览器不支持此分栏属性。
需要合适的开发商前缀
浏览器实现此布局方式不一样，主要在于边距折叠，和边框渲染

垂直律动与基线网格

Web字体

@font-face 规则

页面中加载web字体即像阿里云iconfont那样的字体时候关键是@font-face规则，他可以指定服务器地址，以及如何引用

1
2
3
4
5
@font-face{
    font-family:Vollkorn;//此处表示使用什么字体阿里云的是iconfont
    font-weight:bold;//表示什么情况下使用该字体
    src:url(...) format('woff');//表示加载字体的url地址
}

字体文件格式

阿里云里面已经为我们设置了这些，兼容市面上浏览器的方式

Web字体、浏览器与性能

带来的麻烦：浏览器需要下载额外的字体，这会增加用户等待的时间，所以需要注意不要加载过多的字体确保适当的缓存首部避免不必要的网络开销

虽然有2种方式可以去处理这个
1.ie和谷歌都是在没加载出来不予显示
2.浏览器先用后备字体，但切换时候会造成闪动
所以选用JavaScript加载字体

使用JavaScript加载字体

高级排版特性

文本特效

合理使用阴影

text-shadow属性后面有4个值分别是 相对于x轴的偏移距离、相对于y轴的便宜距离（可以是负值也就是上下左右都能偏）、模糊距离（0代表不模糊）、颜色值
此外还可以给文本添加多组阴影逗号分隔，先定义的在上，后定义在下

这个需要多试试
不要过分使用，此功能对浏览器开销比较大

使用JavaScript提升排版品质

因为有时候我们只能通过 :first-letter 伪元素来选中第一个字母，但是css没有办法选中其他的字母所以可以用jq插件
这些插件有 lettering.js/fitText.js/BitText.js/Widowtamer