文档介绍：第8章 CSS网页元素设计
字体样式的设置
段落样式的设置
颜色与背景的设置
图片样式的控制
本章主要内容:
《网页设计制作基础与上机指导——HTML+CSS+JavaScript》清华大学出版社
文本的设置
在CSS中有关文本的控制,包括字体属性及文本属性,字体属性是对文字大小、样式及外观的控制,文本属性则包括字符、单词及行与行的间距等,主要帮助实现对文本更加精细的控制。
字体的设置
在HTML中设置字体是使用的<font>标记的face属性,而CSS字体属性包括字体族科、字体大小、字体样式、字体加粗及字体变体。
——font-family
——font-size
——font-style
——font-weight
——font-variant
——font
文本的排版
文本排版主要包括字符间距、单词间距、文字修饰、文本排列、段落缩进及行高的设置等。
——letter-spacing
——word-spacing
——text-decoration
——text-align
——text-indent
——line-height
——text-transform
颜色与背景
网页中的每个元素都有前景色与背景色,也有很多的网页或文字的背景由图片组成。HTML设置背景的样式非常单调,在Web标准的页面中,背景的CSS样式非常强大,广泛的应用到页面的美化应用中。
设置字体颜色
在HTML中设置字体颜色使用的是<font>标记的color属性,而在CSS中仅使用color属性设置字体的颜色,但一定要明确color属性不是只用来设置字体的颜色,网页中每个元素的颜色都可以用color属性来设置,且用color属性设置的颜色一般都为标记内容的前景色。
基本语法如下:
color:关键字|RGB值
设置背景颜色
CSS中使用background-color属性来设置背景,相对于HTML中的背景色设置,CSS背景色有更为灵活的设置方法,不仅可以设置网页的背景颜色,还可以设置文字的背景颜色。
基本格式如下:
background-color: 关键字|RGB值|transparent
背景图片的设置属性是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属性结合使用,就可以方便的控制背景图片的平铺方式。
设置背景图片位置
在网页中插入背景图时,如果背景图片不平铺,该图片会默认显示在网页的左上角,CSS提供了用于定位背景图片的background-position,其定位功能很强大,确定图片位置能精确到像素级别。
定位背景的方法有两种,一种是指定位置名称,另一种是通过像素或百分比指定背景具体的位置,基本格式如下:
background-position:关键字|百分比|长度
设置背景附件
背景附件属性(background-attachment)就是用来设置背景图片是否会随着滚动条的移动而一起移动。基本格式如下:
background-attachment:scroll|fixed