1、第8章 CSS网页元素设计,字体样式的设置 段落样式的设置 颜色与背景的设置 图片样式的控制,本章主要内容：,网页设计制作基础与上机指导HTML+CSS+JavaScript 清华大学出版社,8.1 文本的设置,在CSS中有关文本的控制，包括字体属性及文本属性，字体属性是对文字大小、样式及外观的控制，文本属性则包括字符、单词及行与行的间距等，主要帮助实现对文本更加精细的控制。,8.1.1 字体的设置,在HTML中设置字体是使用的标记的face属性，而CSS字体属性包括字体族科、字体大小、字体样式、字体加粗及字体变体。 1设置字体族科font-family 2设置字号font-size 3设置字
2、体样式font-style 4设置字体加粗font-weight 5设置字体变体font-variant 6组合设置字体属性font,8.1.2 文本的排版,文本排版主要包括字符间距、单词间距、文字修饰、文本排列、段落缩进及行高的设置等。 1调整字符间距letter-spacing 2调整单词间距word-spacing 3添加文字修饰text-decoration 4设置文本排列方式text-align 5设置段落缩进text-indent 6调整行高line-height 7段落内容裁剪 8转换英文大小写text-transform,8.2 颜色与背景,网页中的每个元素都有前景色与背景色，
3、也有很多的网页或文字的背景由图片组成。HTML设置背景的样式非常单调，在Web标准的页面中，背景的CSS样式非常强大，广泛的应用到页面的美化应用中。,8.2.1 设置字体颜色,在HTML中设置字体颜色使用的是标记的color属性，而在CSS中仅使用color属性设置字体的颜色，但一定要明确color属性不是只用来设置字体的颜色，网页中每个元素的颜色都可以用color属性来设置，且用color属性设置的颜色一般都为标记内容的前景色。 基本语法如下：color:关键字|RGB值,8.2.2 设置背景颜色,CSS中使用background-color属性来设置背景，相对于HTML中的背景色设置，CS
4、S背景色有更为灵活的设置方法，不仅可以设置网页的背景颜色，还可以设置文字的背景颜色。 基本格式如下： background-color: 关键字|RGB值|transparent,8.2.3设置背景图片,背景图片的设置属性是background-image，其属性值即为图片所在的路径，基本格式如下： background-image:url(“图片路径”); 该属性设置背景图片的效果和HTML中背景图片设置是一样的效果，默认为平铺的背景图片，配合CSS其他背景属性，可以使背景图片得到更精确的控制。控制背景平铺的属性为background-repeat，其值有4个： （1）repeat：默认值，
5、背景图片在水平和垂直方向平铺 （2）repeat-x：水平方向平铺 （3）repeat-y：垂直方向平铺 （4）no-repeat：不平铺，只显示一张背景图片 将background-image属性和background-repeat属性结合使用，就可以方便的控制背景图片的平铺方式。,8.2.4 设置背景图片位置,在网页中插入背景图时，如果背景图片不平铺，该图片会默认显示在网页的左上角，CSS提供了用于定位背景图片的background-position，其定位功能很强大，确定图片位置能精确到像素级别。 定位背景的方法有两种，一种是指定位置名称，另一种是通过像素或百分比指定背景具体的位置，基本
6、格式如下： background-position：关键字|百分比|长度,8.2.5 设置背景附件,背景附件属性（background-attachment）就是用来设置背景图片是否会随着滚动条的移动而一起移动。基本格式如下： background-attachment:scroll|fixed,8.2.6 背景属性整体设置,编写控制背景的CSS代码往往使用多个属性的组合，为此，CSS提供了背景属性的整体编写方法，即使用“background”属性，其值由多个背景控制的属性值组合而成，基本格式如下： background：背景色 背景图片路径 背景平铺方式 背景是否固定 背景定位；,8.3 图
7、片样式控制,在HTML中，通过img元素和scr等属性可以将外部的图片插入到网页文档中，在网页设计中，图片的排版也很重要，本节主要学习图片的定位、图文混排及图片的裁剪。,8.3.1 图片定位,图片即img元素，作为XHTML一个独立的对象，需要占据一定的空间，这与上一节所学习的背景图片有着很大的差别。img元素在页面中的定位依然要和盒模型定位来设计，特别是当图片成为超链接时，CSS伪类的各种设计也可以应用到img元素。,8.3.2 图文混排,由于段落的p元素是块状元素，利用img元素的浮动属性同样可以很漂亮的完成复杂的图文排版。,8.3.3图片的裁切,为了可以在网页中用较小的容器显示较大的图片，CSS提供了“clip”属性对图片进行裁切，效果类似于Photoshop中的画布大小的调整，基本格式如下： clip: auto|rect(上偏移 右偏移 下偏移 左偏移),
