【HTML5与CSS3基础教程】 第10章 为文本添加样式
第10章 为文本添加样式
本章内容
- 本章之前与本章之后
- 选择字体系列
- 指定替代字体
- 创建斜体
- 应用粗体格式
- 设置字体大小
- 设置行高
- 同时设置所有字体值
- 设置颜色
- 设置背景
- 控制间距
- 增加缩进
- 对齐文本
- 修改文本的大小写
- 应用小型大写字母
- 装饰文本
- 设置空白属性
选择字体系列
- 设置字体：
font-family: Geneva; - 对于包含多个单词的字体名称，应该用引号（单引号或双引号）包围起来。
- 该属性是继承的，但是也可以强制继承：
font-family: inherit
指定替代字体
font-family: name, name2, monospace;- 字体列表称为字体栈。通常，字体栈至少包含三个字体：希望使用的字体、一个或几个替代字体，以及一个表示类属的标准字体。
- 表示类属的标准字体有：serif（衬线字体）、sans-serif（无衬线字体）、cursive（手写字体）、fantasy（装饰字体）、monospace（等宽字体）。
- 可以在同一个font-family规则中为不同的字母表指定字体（如日语和英语），从而对包含不同语言和书写体系的文本进行格式化。
创建斜体
- 在传统出版业中，斜体通常用来表示引述、强调的文本、外文单词、学名、电影片名等。
- 创建斜体：
font-style: italic;或font-style: oblique; - 取消斜体：
font-style: normal; font-style属性是继承的。
应用粗体格式
- 粗体格式可能是让文本突出显示的最常见、最有效的方式。
- 应用粗体格式：
font-weight: bold;，可选的值有bolder（更粗）、lighter（更细）、100~900之间的100的倍数（400表示正常，700表示粗体）。 - 取消粗体格式：
font-weight: normal;，或者400。 - 如果字体的粗细少于9种，那么一些数值就可能对应于同样的粗细。
font-weight属性是继承的。
设置字体大小
- 设置字体大小一般分两种，第一种直接使用像素指定，第二种通过百分数、em或rem指定相对于父元素文本的大小。
- 使用相对单位有更大的灵活性，不过使用时，最好在body元素上建立一个基准，即声明：
body { font-size: 100%; }。计算指定的em值时，值=要指定的字体大小/父元素的字体大小。CSS3引入了rem（root em），以根元素字体为参考，而不是父元素。 - 指定字体大小：
font-size: 13px;，可选的值有：xx-small、x-small、small、medium、large、x-large、或xx-large。 - 根据父元素设置字体大小：
font-size: 150%;font-size: 1.5em; - 根据根元素设置字体大小：
font-size: 1.5rem; font-size属性是继承的。
设置行高
- 行高指的是段落内每行之间的距离。
- 设置行高：
line-height: 1.5;, 输入的数与元素的字体大小相乘得到需要的行高，或者直接输入一个有单位的值。
同时设置所有字体值
- 可以使用font简写属性同时设置字体样式、粗细、变体、大小、行高和字体系列。不要求所有的字体属性，但至少应该包含字体大小和字体系列属性。
- 实例：
font: italic small-caps bold .875em/1.3 "Palatino Linotype", Palatino, serif; - 一般顺序（非绝对）：是否斜体、粗细、是否小型大写字母、字体大小/行高、字体系列（用逗号分隔）
设置颜色
- 设置颜色：
color: red;。 - 颜色的值：
- colorname：预定义颜色
- #rrggbb：十六进制颜色（最常用）
- rgb(r, g, b)，其中r、g、b是0～255的整数
- rgb(r%, g%, b%)，其中r、g、b是百分数
- hsl(h, s, l)，h是0～360的数值，表示色相；s和l均是百分数，表示饱和度和亮度。
- rgba(r, g, b, a)，前三个0～255，a是0～1之间的小数
- hsla(h, s, l, a)
- 除了link元素，其他元素都会继承父元素的color属性。
设置背景
- 修改背景颜色：
background: blue; - 使用背景图像作为背景：
background-image: url(bg.png); - 重复背景图像：
background-repeat: direction;direction可以取4个值：repeat-x、repeat-y、repeat、no-repeat。 - 控制背景图像是否随页面滚动：
background-attachment: fixed;fixed或scroll。 - 指定元素背景图像的位置：
background-position: 20px 100px;距离左上角的偏移量（先x后y），也可以用left、center、right，top、center、bottom等关键字。 - 在一条声明中设置所有背景属性：
background: #ccc url(bg.png);注意，简写会将所有没有指定的属性设置为默认值，可能会覆盖之前定义的样式。 background-clip和background-origin两个属性分别控制元素背景显示的范围和开始的位置，接受相同的值，content-box包含内容，padding-box包含内容和内边距，border-box包含内容、内编剧和边框。background-clip默认值是border-box，background-origin默认值是padding-boxbackground-size控制图像的显示尺寸，属性值有contain（在显示图像完整宽度和高度的情况下，尽可能地扩大图像的尺寸。）、cover（在填充元素整个背景区域的情况下，让图像尽可能地小。）、一个长度、百分数或auto。
控制间距
- 单词之间的间距称为字间距（tracking），字母之间的间距称为字偶距（kerning）
- 指定字间距：
word-spacing: length;指定字偶距：letter-spacing: length;length是一个带单位的数字，如0.4em或5px - 这两个属性是继承的。
添加缩进
- 首行缩进：
text-indent: 2em - 该属性是继承的。
对齐文本
text-align: left;left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐）
修改文本的大小写
text-transform: capitalize;capitalize（首字母大写），uppercase（全部大写），lowercase（全部小写），none（保持原样）
使用小型大写字母
- 使用小型大写字母：
font-variant: small-caps; - 取消小型大写字母：
font-variant: none;
装饰文本
text-decoration: underline;underline（下划线）、overline（上划线）、line-through（删除线）、none（取消装饰）
设置空白属性
white-space: pre;pre（显示原文本中的空格和回车）、nowarp（空格不断行，文本全部在一行）、normal（正常）
浙公网安备 33010602011771号