零点起飞学HTMLCSS之CSS属性.pptx

《零点起飞学HTMLCSS之CSS属性.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第13章CSS属性了解完CSS样式的基础知识后，就要开始对CSS设置属性和属性值了。CSS属性是CSS样式中最重要，也是最复杂的部分。CSS样式的属性非常多，也因此能够实现各种各样的表现形式。CSS之所以功能强大，和CSS的属性密不可分。CSS常用的属性包括：背景属性、文本属性、边框属性、外边距属性、内边距属性、列表属性等。13.1CSS背景属性通过background属性可以用来设置页面任何元素的背景。background属性和HTML中的background属性是一样用法的。但在CSS样式里，background属性比HTML中多出了很多属性值。13.1.1背景颜色background-

2、colorbackground-color属性可以用来为指定的元素添加背景颜色，和HTML的bgcolor属性是同样用法的。但在使用CSS样式属性时，属性和属性值中间是用英文的“:”号隔开的，而且写完后在后面必须加上英文的“;“，表示该属性已经描述完毕。其语法结构如下。background-color:颜色;13.1.2背景图片background-image背景图片background-image属性是用来为指定的元素添加背景图片。其语法结构如下。background-image:url(图片链接地址);13.1.3设置重复背景图片background-repeatbackground-r

3、epeat属性用来设置背景图片是否可以重复出现和以及重复出现的位置。background-repeat属性具有四个属性值：no-repeat、repeat、repeat-x和repeat-y。其语法结构如下。background-repeat:no-repeat/repeat/repeat-x/repeat-y;13.1.4设置固定背景图片background-attachmentbackground-attachment属性是用来设置背景图片是固定在它的原始位置还是随内容一起滚动。background-attachment属性具有两个属性值：fixed和scroll。其语法结构如下。bac

4、kground-attachment:fixed/scroll;13.1.5设置背景图片位置background-positionbackground-position属性用来设置背景图片相对于元素的位置。background-position属性有两个值，用来对水平位置和垂直位置进行定位。其语法结构如下。background-position:XY;13.1.5设置背景图片位置background-positionbackground-position属性除了可以设置背景图片位置之外，还可以用来定位背景图像。定位背景图像是指背景图片通过垂直和水平距离来规定距离框架的高度和宽度。语法如下。b

5、ackground-position:左边距离上边距离;13.2CSS文本属性在一个网页中，文本内容的样式也是很重要的，它是给浏览者的第一印象。在CSS样式中也可以设置HTML中的文本内容的样式。CSS中文本属性也有很多，包括字体颜色、文本间距、对齐方式等。13.2.1字体颜色color字体颜色就是为字体填充颜色，可以通过color属性来进行设置。这是CSS样式中很常用的一个属性。其语法格式如下。color:字体颜色;13.2.2字符间距letter-spacing字符间距是用来定义文本中每个字符之间的距离，可以通过letter-spacing属性来设置。语法形式如下。letter-spac

6、ing:n;13.2.3行间距line-heightline-height属性可以用来设置文本中行和行之间的距离。使文本行之间看起来不会太拥挤。其语法结构如下。line-height:n;13.2.4文本对齐方式text-aligntext-align属性可以用来设置文本内容的对齐方式。text-align属性有四个值：left、right、center和justify。其语法结构如下。text-align:left/right/center/justify;13.2.5修饰文本text-decoration修饰文本就是用来定义文本字体的修饰效果，比如为文本添加下划线、上划线、删除线等。可以

7、通过text-decoration属性来设置。其语法结构如下。text-decoration:underline/line-through/overline;13.2.6文本缩进text-indent文本缩进是用来定义段落文本的首行缩进，以达到不用空格而实现首行缩进的效果。可以通过text-indent属性来进行设置。其语法结构如下。text-indent:n;13.2.7转换大小写text-transfor