在花样替补摆烂的第二天 居然过上了啃教材的日子
目录
运用复合值的形式把font-size和line-height写在一起
Font Squirrel(http://www.fontsquirrel.com)
1. 字体
1.1 字体族(font-family)
用于设定元素中的文本使用什么字体。
一般流程
- 给整个页面设定一种主字体
- 对需要不同字体的元素应用font-family
注意
- 不可以修改在线字体库生成的字体名
设定body元素的该属性:为整个页面指定字体
特点
- 为可继承属性
- 不区分大小写
字体栈
以防指定的字体无效而多列出几种后备字体的列表
注意
- 多于一个单词或有空格的字体名,应加上引号
- 字体栈的最后一项要指定一个通用字体类
通用的字体类
- serif 衬线字体
- sans-serif 无衬线字体
- monospace 等宽字体
- cursive 草书体或手写体
- fantasy 其他
字体栈1(Verdana)
Verdana的后备用Tahoma最好,因它们的x高度相同:
verdana, tahoma, sans-serif
字体栈2(无衬线)
helvetica, arial, sans-serif
1.2 字体大小(font-size)
设定font-size时其实是在修改默认值。
特点
- 有默认值
- 可继承(相对单位)
绝对单位
- 像素
- 点
- 派卡
- 英寸
注意:使用绝对单位不会继承祖先元素的字体大小!
缺点
- 在调整页面所有元素的字体大小时需要一个一个修改
优点
-
祖先元素的字体大小变化时不会出现意外的“连锁反应”
相对单位
- 百分比
- em
- rem(根元素的字体大小)
在默认情况下,1em为16像素。
用相对单位设置元素的font-size的情况下,该元素的字体大小要相对于最近的“被设定过字体大小”的祖先元素来确定。
优点
- 能成比例地改变所有元素的字体大小
- 在反复修改布局设计的时候,能节省时间
由于今天设备的屏幕尺寸千差万别,相对大小应是首选。
rem元素
集相对大小和绝对大小的优点于一身的单位。
- 可以只修改根元素就成比例地调整所有字体大小
- 避免字体大小逐层复合的连锁反应
1.3 字体样式(font-style)
- italic:斜体
- normal:正体
1.4 字体粗细(font-weight)
- bold:粗体
- normal:正体
1.5 字体变化 (font-variant)
- small-caps:使所有小写英文字母变成小型大写字母
- normal:正体
1.6 简写
-
font-weight、font-style、font-variant
-
font-size
-
font-family
2. 文本
2.1 文本缩进(text-indent)
该属性设定行内盒子相对于包含元素的起点,一般来说就是左上角。
- 正号:往右移
- 负号:往左移
能够得到首行缩进的效果。
具有可继承性。然而,被继承的缩进值并不是祖先元素中设定的值,而是计算的值。
CSS会把文本放在一个只有开头和末尾是封闭着的不可见的盒子里。这个盒子会因为折行而断开。所以我们缩进的其实是这个文本盒子的起点位置。也就是说,文本属性只能应用于这个文本盒子,而不是包含元素的盒子。
2.2 字符间距(letter-spacing)
- 正号:增大
- 负号:减小
一定要用相对单位,以便字符间距能随大小同比例变化。
- 控制字距(letter-spacing):控制文本块中所有字符之间的间距
- 紧排(keming):只调整两个字符的间距
2.3 单词间距(word-spacing)
调整的只是单词的间距,不影响字符间距。
CSS把任何两边有空白的字符和字符串都视作“单词”。
2.4 文本装饰(text-decoration)
- underline 下划线
- overline 上划线
- line-through 划掉
- blink 布灵布灵(很讨厌!)
- none 无
2.5 文本对齐(text-align)
- left 左对齐
- right 右对齐
- center 居中
- justify 两端对齐
2.6 行高(line-height)
特点
- 不用指定单位
对于类似标题的一行文本来说,line-height增加的空白就像外边距一样,标题往往有默认行高。
运用复合值的形式把font-size和line-height写在一起
div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}
行高是字体大小1.2em的1.4倍。
注意:设定行高时如果使用了绝对单位,将来增大字体有可能导致行与行之间的重叠。
2.7 文本转换(text-transform)
- uppercase 大写
- lowercase 小写
- capitalize 首字母大写
- none 无
2.8 垂直对齐(vertical-align)
特点
- 只影响行内元素
对于块级元素,必须把其display属性设置为inline。
该属性最常用于公式或化学分子式的上标和下标。
- 正值:向上
- 负值:向下
3. Web字体
3.1 公共字体库
一行代码可以链接多款字体。
3.2 @font-face包
以这种方式提供的字体,会在使用该字体的页面第一次加载时被浏览器下载并缓存起来,以后就不用下载了。
但是,除了显示网页之外,用户不能将这种字体用于其他用途。
把代码添加到网页中之后,就可以使用font-family以常规方式引用该字体了。引用字体时要使用@font-face规则中font-family属性的值作为字体族的名字。
4 网页排版
html实体标点符号
- &ldquo 左双引号“
- &rdquo 右双引号”
- &hellip 省略号……
- &mdash 破折号——
- & 和号&
- < 小于号
排版上一些特殊的行内元素
1) q
默认样式是在文本开头和末尾加上引号
2) span
为构造首字下沉效果,首字母都会被包含在该元素里。然而,这种做法对于从内容管理系统中动态取文本的网页并不适用。
首字下沉
- 紧邻同胞选择符+
- ::first-letter伪元素
注意:
使用::before和::after的伪元素给引用内容添加引号时使用的是十六进制,在这里不能给content属性设定常规的Html实体,只能使用改写后的十六进制实体值。