第8章 CSS网页元素设计.ppt.Convertor.docVIP

第8章 CSS网页元素设计 字体样式的设置 段落样式的设置 颜色与背景的设置 图片样式的控制 本章主要内容： 《网页设计制作基础与上机指导——HTML+CSS+JavaScript》 清华大学出版社 8.1 文本的设置 在CSS中有关文本的控制，包括字体属性及文本属性，字体属性是对文字大小、样式及外观的控制，文本属性则包括字符、单词及行与行的间距等，主要帮助实现对文本更加精细的控制。 8.1.1 字体的设置 在HTML中设置字体是使用的font标记的face属性，而CSS字体属性包括字体族科、字体大小、字体样式、字体加粗及字体变体。 1．设置字体族科——font-family 2．设置字号——font-size 3．设置字体样式——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 颜色与背景 网页中的每个元素都有前景色与背景色，也有很多的网页或文字的背景由图片组成。HTML设置背景的样式非常单调，在Web标准的页面中，背景的CSS样式非常强大，广泛的应用到页面的美化应用中。 8.2.1 设置字体颜色 在HTML中设置字体颜色使用的是font标记的color属性，而在CSS中仅使用color属性设置字体的颜色，但一定要明确color属性不是只用来设置字体的颜色，网页中每个元素的颜色都可以用color属性来设置，且用color属性设置的颜色一般都为标记内容的前景色。 基本语法如下： color:关键字|RGB值 8.2.2 设置背景颜色 CSS中使用background-color属性来设置背景，相对于HTML中的背景色设置，CSS背景色有更为灵活的设置方法，不仅可以设置网页的背景颜色，还可以设置文字的背景颜色。 基本格式如下： background-color: 关键字|RGB值|transparent 8.2.3设置背景图片 背景图片的设置属性是background-image，其属性值即为图片所在的路径，基本格式如下： background-image:url(“图片路径”); 该属性设置背景图片的效果和HTML中背景图片设置是一样的效果，默认为平铺的背景图片，配合CSS其他背景属性，可以使背景图片得到更精确的控制。控制背景平铺的属性为background-repeat，其值有4个： （1）repeat：默认值，背景图片在水平和垂直方向平铺 （2）repeat-x：水平方向平铺 （3）repeat-y：垂直方向平铺 （4）no-repeat：不平铺，只显示一张背景图片 将background-image属性和background-repeat属性结合使用，就可以方便的控制背景图片的平铺方式。 8.2.4 设置背景图片位置 在网页中插入背景图时，如果背景图片不平铺，该图片会默认显示在网页的左上角，CSS提供了用于定位背景图片的background-position，其定位功能很强大，确定图片位置能精确到像素级别。 定位背景的方法有两种，一种是指定位置名称，另一种是通过像素或百分比指定背景具体的位置，基本格式如下： background-position：关键字|百分比|长度 8.2.5 设置背景附件 背景附件属性（background-attachment）就是用来设置背景图片是否会随着滚动条的移动而一起移动。基本格式如下： background-attachment:scroll|fixed 8.2.6 背景属性整体设置 编写控制背景的CSS代码往往使用多个属性的组合，为此，CSS提供了背景属性的整体编写方法，即使用“background”属性，其值由多个背景控制的属性值组合而成，基本格式如下： background：背景色 背景图片路径 背景平铺方式 背景是否固定 背景定位； 8.3 图片样式控制 在HTML中，通过img元素和scr等属性可以将外部的图片插入到网页文档中，在网页设计中，图片的排版也很重要，本节主要学习图片的定位、图文混排及图片的裁剪。 8.3.1 图片定位 图片即img元素，作为XHTML一个独立的对象，需要占据一定的空间，这与上一节所学习的背景图