自印刷出版物诞生以来,排版就一直是平面设计的基础。

同样,排版在网页设计中也扮演着重要角色。

1.CSS的基本排版技术

1.1 文本颜色

对应网页而言,文本颜色也许是最基本的样式之一。

默认情况下,浏览器把绝大部分文本渲染为黑色。

p {
color: #3b4348;
}

1.2 字体族

字体族(font-family)属性的值是一个备选字体的列表,按优先级从左到右排列。

body {
/* 列出包含空格的字体族名称时,引号不是非加不可,但最好加上。*/
/* 规范中只要求与通用字体族重名的字体族要加引号,但同时也建议给包含非标准符号的名称加引号 */
/* 字体列表最后的serif叫作通用字体族,在这里充当没有选择的选择 */
font-family: 'Georgia Pro', Georgia, Times, 'Times New Roman', serif;
}

Georgia是一种衬线字体。

衬线字体:“衬线”是字形笔画末梢的装饰性线条。

如果网页中要显示代码,应该首选monospace字体族,也叫“等宽字体”,因为monospace的每个字符的宽度都一样,不同行之间的字符可以完美对齐。

1.3 字型大小与行高

几乎所有浏览器中font-size的默认大小都是16像素,除非用户修改过偏好设置。

h3 {
font-size: 1.314em; /* 21px */
}

em单位用于font-size属性时,实际上是一个相应元素继承的font-size缩放因子。

对于font-size属性,可用百分比代替em

rem是基于根元素的em大小缩放,也就是基于html元素的font-size缩放。

长度单位还有mm、cm、in和pt等绝对物理长度,这些主要是给打印样式准备的。

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

如果行盒子中包含多个行高不一的行内盒子,那么这个行盒子的最终高度至少等于其中最高的行内盒子。

设置行高时,需要考虑当前字体大小。

body {
line-height: 1.5;
}

line-height设置没有单位的值1.5,意思是当前font-size的1.5倍。

也可以给line-height设置像素、百分比值或em值,但要注意body元素的所有子元素都会继承line-height的计算值。

如果给line-height设置没有单位的值,那么子元素继承的是一个系数,永远与自己的font-size成比例。

行内盒子也会受到verticaal-align属性的影响,它的默认值是baseline,即子元素的基线与父元素的基线对齐。

如果行盒子中有一个元素使用vertical-align调整了位置,那么它可能会扩展行盒子的高度。

1.5 文本粗细

我们使用font-weight属性来设置标题文本的粗细。

font-weight属性的值可以使用关键字:normalboldbolderlighter,也可以使用100的整数倍:100、200、300、··· 900。

默认值normal对应400,bold对应700,这两个粗细值是最常用的。

如果某款字体缺少你想要的粗细变体,浏览器会尽量模拟加粗效果,但无论如何不能模拟变细效果。这种模拟的结果往往差强人意。

1.6 字体样式

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

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

使用text-transform属性控制英文字母大小写。

1.8 控制字母和单词间距

通过word-spacing属性来控制单词间的距离,。它的值意味着在默认词间距基础上增加或减少一定的量。

通过letter-spacing属性来控制字符间的距离。

2.版心宽度、律动和毛边

行长对阅读体验有着重大影响。用排版的行话说,就是版心宽度。

article元素的宽度设置为38em,并令其在页面上居中。

article {
max-width: 38em;
margin: 0 auto;
}

2.1 文本缩进与对齐

设置段首缩进。

p + p {
text-indent: 1.25em;
}

段落的右边参差不齐,我们暂时先不管它。这种参差不齐的样式在排版上也有术语,叫作“毛边”。

居中显示。

h1 {
text-align: center;
border-bottom: 1px solid #c8bc9d;
}

text-align属性应用justify值,可以在单词间平均分布间距,结果是左右两端对齐,消除毛边。

2.2 连字符

手工在HTML中插入一个表示连字符的实体­。只有当浏览器需要断词换行时才会显示这个连字符。

使用hyphens属性,让浏览器帮我们插入连字符。

p { hyphens: auto; }

2.3 多栏文本

article {
max-width: 70em;
margin: 0 auto;
columns: 20em; /* 在保证最小宽度20em的前提下,自动设置栏数 */
column-gap: 1.5em;
}

columns属性是columns-countcolumn-width属性的简写形式。

columns-count属性表示最大栏数,column-width属性表示最小栏宽。

h1 {
column-span: all; /* 横跨所有栏 */
}

在印刷设计中,律动关系的应用非常普遍,结果就是正文文本都会排进基线网格。

3.Web字体

使用Web字体需要考虑许可和侵权问题。

嵌入Web字体的关键是@font-face规则。

@font-face {
font-family: Vollkorn;
font-weight: bold;
src:url('fonts/vollkorn/Vollkorn-Bold.woff') format('woff');
}

前面的@font-face块声明了在font-family值为Vollkorn且为粗体时应用该规则。之后提供了一个URL,供浏览器下载包含粗体字体的Web开放字体格式(WOFF,Web open font format)文件。

所有浏览器开发商都支持标准的WOFF格式。

为了解决旧版浏览器对字体格式支持的不一致问题,可以在@font-face规则中声明多个src值。

@font-face规则可以接受几个声明,多数是可选的。

  • font-family:必需,字体族的名称
  • src:必需,URL或URL列表,用于下载字体
  • font-weight:可选的字体粗细
  • font-style:可选的字体样式

这些声明是字体描述符(font descriptor),它们不会改变字体,它们的值只是为了告诉浏览器在什么情况下可以触发使用这个特定的字体文件。

浏览器加载和选择字体的原则:正确的font-family优先于正确的粗细值。

4.文本特效

4.1 合理使用文本阴影

CSS的text-shadow属性可以用来给文本绘制阴影。

对于标题或短文本,阴影适合模拟凸版印刷或者喷涂效果。

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

text-shadow需要指定相对于源文本x轴和y轴的偏移量、模糊距离和颜色值,由空格分隔。

除此之外,还可通过用逗号分隔来给文本添加多组阴影。多组阴影会按先后次序堆叠,先定义的在上,后定义的在下。

为同一段文本添加多组阴影可以模拟出压印或浮雕的效果,方法就是在文本上方和下方加上偏暗或偏亮的阴影。

可以利用多组阴影创造出3D效果。

几乎所有浏览器都支持text-shadow属性。对于支持它的浏览器而言,由于绘制阴影开销比较大,请不要滥用。

参考资料:

  • 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德

CSS网页排版的更多相关文章

  1. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  2. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  3. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  4. CSS文字排版

    一.font-size 我来试一试:为第一段中的“胆小如鼠”设置字号为:20px,字体颜色为:red. <!DOCTYPE HTML> <html> <head> ...

  5. HTML+CSS学习笔记 (10) - CSS格式化排版

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

  6. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  7. DIV+CSS 网页布局之:混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  8. DIV+CSS 网页布局之:一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  9. 从零开始学习html(十)CSS格式化排版——下

    六.文字排版--删除线 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&q ...

随机推荐

  1. python 面试题一:Python语言特性

    1 Python的函数参数传递 两个例子 a = 1 def fun(a): a = 2 fun(a) print a # a = [] def fun(a): a.append(1) fun(a) ...

  2. java IO流 (三) 节点流(或文件流)

    1.FileReader/FileWriter的使用:1.1 FileReader的使用 /* 将day09下的hello.txt文件内容读入程序中,并输出到控制台 说明点: 1. read()的理解 ...

  3. ASP.NET Core端点路由 作用原理

    端点路由(Endpoint Routing)最早出现在ASP.NET Core2.2,在ASP.NET Core3.0提升为一等公民. Endpoint Routing的动机 在端点路由出现之前,我们 ...

  4. 证明:ThreadLocal的get,set方法无法防止内存泄漏

    先给出结论:get,set两个方法都不能完全防止内存泄漏,还是每次用完ThreadLocal都勤奋的remove一下靠谱. 前言:   看到有的博客说在把ThreadLocal的所有强引用置空前,调用 ...

  5. Ubuntu18.04安装GitLab搭建私有仓库服务器过程笔记

      百度了很多资料结果折腾很久还没安装成功,索性就直接上官网找文档参考顺利搭建完成 因为有2台服务器做练习,总结了2种安装方式提供参考:第一种官网安装方式,第二种国内镜像安装方式(建议采用第二种) 第 ...

  6. .NET 使用sock5做代理(不是搭建服务端)

    在日常开发中经常会遇到这些需求,爬取数据,都知道现在通常用python爬取是很方便的,但是免不了还有很多伙伴在用NET来爬取,在爬取数据的时候我们知道需要使用代理服务器,如果不用代理,你的IP很有可能 ...

  7. Pull后产生多余的log(Merge branch 'master' of ...)

    第一步: git reset --hard 73d0d18425ae55195068d39b3304303ac43b521a 第二步: git push -f origin feature/PAC_1 ...

  8. 高效C++:继承和实现

    如何正确的使用继承和实现是本章说明的重点. 确定public继承的关系是is-a public继承等同于is-a 对public继承,所有base的特性,在derived上都适用 避免遮掩继承而来的名 ...

  9. python-多任务编程05-协程(coroutine)

    协程是python个中另外一种实现多任务的方式,只不过比线程更小占用更小执行单元(理解为需要的资源). 为啥说它是一个执行单元,因为它自带CPU上下文.这样只要在合适的时机, 我们可以把一个协程 切换 ...

  10. [leetcode/lintcode 题解] Amazon面试题:连接棒材的最低费用

    为了装修新房,你需要加工一些长度为正整数的棒材 sticks. 如果要将长度分别为 X 和 Y 的两根棒材连接在一起,你需要支付 X + Y 的费用. 由于施工需要,你必须将所有棒材连接成一根. 返回 ...