
上QQ阅读APP看书,第一时间看更新
3.6 CSS实例
3.6.1 设置背景颜色和图片
例3-11:设置背景颜色

例3-12:设置背景图片


3.6.2 修饰文本
例3-13:设置字体

提示:font属性可以按如下顺序设置。
·font-style
·font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但所有的使用小型大写字母的字母与其余文本相比,其字体尺寸更小。
·font-weight
·font-size/line-height:字体大小或者行高。
·font-family
例3-14:文本修饰


例3-15:文本缩进与换行

提示:一般来说,可以为所有块级元素应用text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用text-indent属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
white-space属性会影响到用户代理对源文档中的空格、换行和tab字符的处理。通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。如果将white-space设置为pre,空白符的处理就有所不同,其行为就像pre元素一样,空白符不会被忽略。
3.6.3 修饰列表
例3-16:

3.6.4 定位
例3-17:使带有边框和边界的图像浮动于段落的右侧

3.6.5 超链接
例3-18:


3.6.6 修饰表格
例3-19:

