![Web前端开发技术](https://wfqqreader-1252317822.image.myqcloud.com/cover/759/42637759/b_42637759.jpg)
上QQ阅读APP看书,第一时间看更新
3.6 CSS实例
3.6.1 设置背景颜色和图片
例3-11:设置背景颜色
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_50_03.jpg?sign=1739265157-bma2nU8ksQm3rg78Mv1WZZMQbx1tdSFa-0-506f3c51ddb9224f4bfc251b0ee51aea)
例3-12:设置背景图片
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_50_04.jpg?sign=1739265157-cvfhpoIGkNHj46zB7GYphZ8K5SzPLrqL-0-b1a4ea88cce67ab0e8e8612f564c0d4a)
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_51_01.jpg?sign=1739265157-kKJ28mnm8371L5vDOo0UFY7bbr6exHfF-0-95f6771aa2ba67cd2fa0f1199a29fef1)
3.6.2 修饰文本
例3-13:设置字体
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_51_02.jpg?sign=1739265157-ASEnhhmX4cFhxC1OdbsibXP7kxptzy97-0-6fced8ee7dcfc8d8b86c6b01e22515e9)
提示:font属性可以按如下顺序设置。
·font-style
·font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但所有的使用小型大写字母的字母与其余文本相比,其字体尺寸更小。
·font-weight
·font-size/line-height:字体大小或者行高。
·font-family
例3-14:文本修饰
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_51_03.jpg?sign=1739265157-J3ipOMFnzjtmM30deoYg0vzoj0ZdvS1J-0-e3113e4c13ffca84f9a603d167296f76)
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_52_01.jpg?sign=1739265157-ptHG1SRcIKgb8UqUrra2lv9PkUn6cD46-0-c62d7240f2cbf384d33378a045507ec4)
例3-15:文本缩进与换行
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_52_02.jpg?sign=1739265157-Dx7xaLNfmTEZatAZaXoWfG9iIsDabGMq-0-1a892f64d1bb662a05ab457c77cee30b)
提示:一般来说,可以为所有块级元素应用text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用text-indent属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
white-space属性会影响到用户代理对源文档中的空格、换行和tab字符的处理。通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。如果将white-space设置为pre,空白符的处理就有所不同,其行为就像pre元素一样,空白符不会被忽略。
3.6.3 修饰列表
例3-16:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_53_01.jpg?sign=1739265157-xRXKWjPHCBKJWNMZCtbkG9mkylrfz0yl-0-1b67e26415a3b6828ebf785799d807f7)
3.6.4 定位
例3-17:使带有边框和边界的图像浮动于段落的右侧
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_54_01.jpg?sign=1739265157-WELxdKbHvkRX4NBC3T68ng0ZeHX285rq-0-9cd2a8a61832d59931c83a2dde0f3ad2)
3.6.5 超链接
例3-18:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_54_02.jpg?sign=1739265157-JqyxEBjKLIQoGKJKSpJyREm3jyDQenNW-0-22547b1f4d3b76a5ee44b6de77e55295)
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_55_01.jpg?sign=1739265157-M5gQRPyikE42YadGCxEjg8RRp3VTlKya-0-3f20b4f78ea7d4d618a55fc8d5bf86d3)
3.6.6 修饰表格
例3-19:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_55_02.jpg?sign=1739265157-UnpciTufG4zXy7OL1RwJYD3rw5igZkXC-0-1866f97a3e09e9b3cbf7aa86ff3df63f)
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_56_01.jpg?sign=1739265157-HPgocmKaPKFkFxztRxTLVMYzpOiPXqkN-0-4bb2b4d6f4af25f4e36fcecae403af3c)