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

第第8章章 CSS网页元素设计网页元素设计l字体样式的设置字体样式的设置l段落样式的设置段落样式的设置l颜色与背景的设置颜色与背景的设置l图片样式的控制图片样式的控制本章主要内容：本章主要内容：网页设计制作基础与上机指导HTML+CSS+JavaScript 清华大学出版社8.1 文本的设置文本的设置在CSS中有关文本的控制，包括字体属性及文本属性，字体属性是对文字大小、样式及外观的控制，文本属性则包括字符、单词及行与行的间距等，主要帮助实现对文本更加精细的控制。8.1.1 字体的设置字体的设置在HTML中设置字体是使用的标记的face属性，而CSS字体属性包括字体族科、字体大小、字体样式、字体加粗及字体变体。1设置字体族科font-family2设置字号font-size3设置字体样式font-style4设置字体加粗font-weight5设置字体变体font-variant6组合设置字体属性font8.1.2 文本的排版文本的排版文本排版主要包括字符间距、单词间距、文字修饰、文本排列、段落缩进及行高的设置等。1调整字符间距letter-spacing2调整单词间距word-spacing3添加文字修饰text-decoration4设置文本排列方式text-align5设置段落缩进text-indent6调整行高line-height7段落内容裁剪8转换英文大小写text-transform8.2 颜色与背景颜色与背景网页中的每个元素都有前景色与背景色，也有很多的网页或文字的背景由图片组成。HTML设置背景的样式非常单调，在Web标准的页面中，背景的CSS样式非常强大，广泛的应用到页面的美化应用中。8.2.1 设置字体颜色设置字体颜色在HTML中设置字体颜色使用的是标记的color属性，而在CSS中仅使用color属性设置字体的颜色，但一定要明确color属性不是只用来设置字体的颜色，网页中每个元素的颜色都可以用color属性来设置，且用color属性设置的颜色一般都为标记内容的前景色。基本语法如下：color:关键字|RGB值8.2.2 设置背景颜色设置背景颜色CSS中使用background-color属性来设置背景，相对于HTML中的背景色设置，CSS背景色有更为灵活的设置方法，不仅可以设置网页的背景颜色，还可以设置文字的背景颜色。基本格式如下：background-color:关键字|RGB值|transparent8.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|fixed8.2.6 背景属性整体设置背景属性整体设置编写控制背景的CSS代码往往使用多个属性的组合，为此，CSS提供了背景属性的整体编写方法，即使用“background”属性，其值由多个背景控制的属性值组合而成，基本格式如下：background：背景色 背景图片路径 背景平铺方式 背景是否固定 背景定位；8.3 图片样式控制图片样式控制在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(上偏移 右偏移 下偏移 左偏移)