![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=1739122372-6leRl7Bc9H0PhMKm2aoVz1nZqRXg6z8z-0-bdb729f12a252e8248310523f65fd01d)
例3-12:设置背景图片
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_50_04.jpg?sign=1739122372-euc8Uq68eMZV7ebTeJQQhPWHJpauzuYz-0-b93a50519f832ae0acb71acdf5582ea7)
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_51_01.jpg?sign=1739122372-XSjQsgH1VznshH6VGoObEVXxqPbxVAUH-0-c2c9284d6f67b210fe57eef6c77fbe91)
3.6.2 修饰文本
例3-13:设置字体
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_51_02.jpg?sign=1739122372-7MkdzlYDgClcNeA8qKRAjlWY7veNpohm-0-f4972fb3b65a2258f25c3217e54bd634)
提示: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=1739122372-B11FbtE0gCiJ5gABFxjEef1oRuzxUpp8-0-c0eab39121cd7c496ba43612ec5ccbc1)
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_52_01.jpg?sign=1739122372-GZtsPXjGohxbRZdBsTcZgEX5UBnQNm3w-0-39e426332933532f000fddea700cedca)
例3-15:文本缩进与换行
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_52_02.jpg?sign=1739122372-VkOtivVOENYNd8vfDFqjvIsjh9QdpmTs-0-73895b75f9ae4f6928bf44e9512754a6)
提示:一般来说,可以为所有块级元素应用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=1739122372-QpRwcbpzaSUZgXeAZMXSSCkMUCuugvUK-0-a384f2a84d50bfeb8775a538abe05c79)
3.6.4 定位
例3-17:使带有边框和边界的图像浮动于段落的右侧
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_54_01.jpg?sign=1739122372-obiV923k34A9h8AY60nzEZg8IH1aDTHV-0-419533b63678db1f71400c058e10ad81)
3.6.5 超链接
例3-18:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_54_02.jpg?sign=1739122372-1dNebkiFWFDeYcUetpPzkHdKiPBjr1HV-0-104fa5d0a078e190ba391edeafe80221)
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_55_01.jpg?sign=1739122372-Rd04BeCqy9G4DPKMTdivtA3PKzS5k1xK-0-96eca6b8d51fae5572176053f077826a)
3.6.6 修饰表格
例3-19:
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_55_02.jpg?sign=1739122372-ehNuK8kS3dN31pLGZFLX6bySYCjpzmag-0-bf36da50ed1971be06a84c62a8339068)
![](https://epubservercos.yuewen.com/6DD77C/22139294709122706/epubprivate/OEBPS/Images/978-7-111-61820-1_56_01.jpg?sign=1739122372-3teYBUDVgEunLoDiVa9myqBnrUWy89YN-0-a6761bb5ea445b500144f9017f5deba8)