零点起飞学HTML+CSS之CSS属性.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2013/1/16,#,第,13,章,CSS,属性,了解完,CSS,样式的基础知识后，就要开始对,CSS,设置属性和属性值了。,CSS,属性是,CSS,样式中最重要，也是最复杂的部分。,CSS,样式的属性非常多，也因此能够实现各种各样的表现形式。,CSS,之所以功能强大，和,CSS,的属性密不可分。,CSS,常用的属性包括：背景属性、文本属性、边框属性、外边距属性、内边距属性、列表属性等。,13.1 CSS,背景属性,通过,background,属性可以用来设置页面任何元素的背景。,background,属性和HTML,中的,background,属性是一样用法的。但在,CSS,样式里，,background,属性比,HTML,中多出了很多属性值。,13.1.1,背景颜色,background-color,background-color,属性可以用来为指定的元素添加背景颜色，和,HTML,的,bgcolor,属性是同样用法的。但在使用,CSS,样式属性时，属性和属性值中间是用英文的“,:,”号隔开的，而且写完后在后面必须加上英文的“,;,“，表示该属性已经描述完毕。其语法结构如下。,background-color:,颜色,;,13.1.2,背景图片,background-image,背景图片,background-image,属性是用来为指定的元素添加背景图片。其语法结构如下。,background-image:url(,图片链接地址,);,13.1.3,设置重复背景图片,background-repeat,background-repeat,属性用来设置背景图片是否可以重复出现和以及重复出现的位置。,background-repeat,属性具有四个属性值：,no-repeat,、,repeat,、,repeat-x,和,repeat-y,。其语法结构如下。,background-repeat:no-repeat/repeat/repeat-x/repeat-y;,13.1.4,设置固定背景图片,background-attachment,background-attachment,属性是用来设置背景图片是固定在它的原始位置还是随内容一起滚动。,background-attachment,属性具有两个属性值：,fixed,和,scroll,。其语法结构如下。,background-attachment:fixed/scroll;,13.1.5,设置背景图片位置,background-position,background-position,属性用来设置背景图片相对于元素的位置。,background-position,属性有两个值，用来对水平位置和垂直位置进行定位。其语法结构如下。,background-position:X Y;,13.1.5,设置背景图片位置,background-position,background-position,属性除了可以设置背景图片位置之外，还可以用来定位背景图像。定位背景图像是指背景图片通过垂直和水平距离来规定距离框架的高度和宽度。语法如下。,background-position:,左边距离 上边距离,;,13.2 CSS,文本属性,在一个,网页,中，文本内容的样式也是很重要的，它是给浏览者的第一印象。在,CSS,样式中也可以设置,HTML,中的文本内容的样式。,CSS,中文本属性也有很多，包括字体颜色、文本间距、对齐方式等。,13.2.1,字体颜色,color,字体颜色就是为字体填充颜色，可以通过,color,属性来进行设置。这是,CSS,样式中很常用的一个属性。其语法格式如下。,color:,字体颜色,;,13.2.2,字符间距,letter-spacing,字符间距是用来定义文本中每个字符之间的距离，可以通过,letter-spacing,属性来设置。语法形式如下。,letter-spacing:n;,13.2.3,行间距,line-height,line-height,属性可以用来设置文本中行和行之间的距离。使文本行之间看起来不会太拥挤。其语法结构如下。,line-height:n;,13.2.4,文本对齐方式,text-align,text-align,属性可以用来设置文本内容的对齐方式。,text-align,属性有四个值：,left,、,right,、,center,和,justify,。其语法结构如下。,text-align:left/right/center/justify;,13.2.5,修饰文本,text-decoration,修饰文本就是用来定义文本字体的修饰效果，比如为文本添加下划线、上划线、删除线等。可以通过,text-decoration,属性来设置。其语法结构如下。,text-decoration:underline/line-through,/,overline;13.2.6,文本缩进,text-indent,文本缩进是用来定义段落文本的首行缩进，以达到不用空格而实现首行缩进的效果。可以通过,text-indent,属性来进行设置。其语法结构如下。,text-indent:n;,13.2.7,转换大小写,text-transform,转换大小写是指用来定义英文字体的大小写之间的转换，可以通过,text-transform,属性来进行设置。,text-transform,属性具有三个属性值：,capitalize,、,uppercase,和,lowercase,。其语法结构如下。,text-transform:capitalize/uppercase/lowercase;,13.2.8,控制文本换行,white-space,控制文本换行是指当文本内容超出框架宽度时，是否让它自动换行。可以通过,white-space,属性来进行设置。,white-space,属性具有三个属性值：,normal,、,pre,和,nowarp,。语法形式如下。,white-space:normal/pre/nowrap;,13.2.9,字体大小,font-size,设置字体的大小在前面已经接触过很多了，在,CSS,中使用,font-size,属性来设置字体大小。其语法结构如下。,font-size:n;,13.2.10,选择字体,font-family,选择字体也就是选择文本内容中的字体的风格，例如宋体、黑体、楷体等。可以通过,font-family,属性来进行设置。其语法结构如下。,font-family:n;,13.3,CSS,边框属性,边框是用来分割元素与元素的属性，通过边框可以很直观的区分出每个元素。在前面已经学过表格的边框，在,CSS,样式中也同样有边框。而且,CSS,里的边框比表格的边框多出了一些属性，让边框更加多元化。,13.3.1,边框样式,border-style,border-style,属性可以用来设置边框的样式。常用的,border-style,属性具有六个属性值：,solid,、,double,、,groove,、,ridge,、,inset,和,outset,。其语法结构如下。,border-style:solid/double/groove/ridge/inset/outset;,13.3,.,2,边框颜色,border-color,通过,border-color,属性可以用来设置边框的颜色，和,HTML,表格中,bordercolor,属性的用法是一样的。其语法结构如下。,border-color:#,边框颜色,;,13.3.3,边框宽度,border-width,border-width,属性可以用来设置边框的宽度，和,HTML,表格中,border,属性的用法是一样的。其语法结构如下。,border-width:,边框宽度,;,13.3.4,设置上边框,border-top,border-top,属性是用来只显示边框的上边框的。,border-top,属性可以把上面讲过的各种设置边框的属性合在一起进行控制，只需要在每个属性值中间用英文的空格号隔开。语法形式如下。,border-top:,属性值,1,属性值,2,属性值,3;,13.3.5,设置右边框,border-right,border-right,属性是用来只显示边框的右边框。它和上边框,border-top,属性一样，都可以用来把不同的属性值全部放在一起，对右边框进行声明的。其语法格式如下。,border-right:,属性值,1,属性值,2,属性值,3;,13.3.6,设置下边框,border-bottom,border-bottom,属性是用来只显示边框的下边框。它和上边框,border-top,属性一样，都可以用来把不同的属性值全部放在一起，对下边框进行声明的。其语法格式如下。,border-bottom:,属性值,1,属性值,2,属性值,3;,13.3.7,设置左边框,border-left,border-left,属性是用来只显示边框的左边框。它和上边框,border-top,属性一样，都可以用来把不同的属性值全部放在一起，对左边框进行声明。其语法格式如下。,border-left:,属性值,1,属性值,2,属性值3;,13.3.8,综合声明边框,border,综合声明边框,border,属性是用来把上面所讲到的不同的属性值全部放在一起，对四个边框的颜色、样式、宽度一起进行声明。在声明的时候，只需要在每个属性值中间用英文的空格号隔开。其语法结构如下。,border:,各种属性值,;,13.4,CSS,外边距,外边距是指用标签设置的内容外部的边距，不被标签计算在内的距离。通过外边距属性使得元素之间有一定的距离，从而将元素有效的区分开。由于外边距不被计算在标签内，所以通过外边距来设置的元素，可以很好的将元素和旁边的其他元素隔开。,13.4.1,居中,auto,使用,auto,属性值可以将整个被包含某一元素内的内容水平居中，这和,align=center,属性值有些相似。居中,auto,是外边距一个比较特殊的属性值，通过,margin,属性来进行设置。语法形式如下。,margin:0 auto;,13.4.2,上外边距,margin-top,通过,margin-top,属性可以用来设置上外边距，也就是使标签内的内容与上面的其他文本内容隔开一定的距离。其语法结构如下。,margin-top:n;,13.4.3,右外边距,margin-right,通过,margin-right,属性可以用来设置右外边距，也就是使标签内的内容与右边的其他文本内容隔开一定的距离。其语法结构如下。,margin-right:n;,13.4.4,下外边距,margin-bottom,通过,margin-bottom,属性可以用来设置下外边距，也就是使标签内的内容与下边的其他文本内容隔开一定的距离。其语法结构如下。,margin-bottom:n;,13.4.5,左外边距,margin-left,通过,margin-left,属性可以用来设置左外边距，也就是使标签内的内容与左边的其他文本内容隔开一定的距离。其语法结构如下。,margin-left:n;,13.4.6,综合声明外边距,margin,综合声明外边距和综合声明边框的用法一样。它是通过,margin,属性来把上面讲过的四个不同外边距的属性值全部放在一起，对四个外边距一起进行声明的。只需要在每个属性值中间用英文的空格号隔开。其语法结构如下。,margin:,各种属性值,;,13.5,CSS,内边距,内边距和外边距刚好相反。内边距是指用标签设置的内容内部的边距，是被标签计算在内的距离。通过内边距，可以很好的用来规定元素在标签设置的内部的显示位置。,13.5.1,上内边距,padding-top,通过,padding-top,属性可以用来设置上内边距，也就是标签设置的元素内的内容与元素顶部距离。其语法结构如下。,padding-top:n;,13.5.2,右内边距,padding-right,通过,padding-right,属性可以用来设置右内边距，也就是标签设置的元素内的内容与元素右边的距离。其语法结构如下。,padding-right:n;,13.5.3,下内边距,padding-bottom,通过,padding-bottom,属性可以用来设置下内边距，也就是标签设置的元素内的内容与元素底部的距离。其语法结构如下。,padding-bottom:n;,13.5.4,左内边距,padding-left,通过,padding-left,属性可以用来设置左内边距，也就是标签设置的元素内的内容与元素左边的距离。其语法结构如下。,padding-left:n;,13.5.5,综合声明内边距,padding,和综合声明外边距一样，综合声明内边距,padding,属性是用来把上面讲过的四个不同内边距的属性值全部放在一起，对四个内边距一起进行声明。只需要在每个属性值中间用英文的空格号隔开。其语法结构如下。,padding:,各种属性值,;,13.6 CSS,列表属性,列表属性用于定义列表元素的显示效果。在,CSS,中，列表元素的控制包括列表符号、列表图片和控制列表位置等几个方面。使用,CSS,列表属性可以做到,HTML,列表中许多做不到的功能。,13.6.1,定义列表排序图案,list-style-image,在第,9,章里已经讲过列表排序的符号样式。在实际应用中，仅用列表符号来制作页面效果是不够的。可以考虑使用图片来代替列表符号。list-style-image,属性可以把默认的列表符号替换成列表图案。其语法结构如下。,ullist-style:none;,lilist-style-image:url(,图片链接地址,);,13.6.2,定义列表排序位置,list-style-position,有时候需要在不同的位置来显示列表符号或图片，这时候就可以使用,list-style-position,属性来进行设置。使用,list-style-position,属性可以设置列表排序的标记是否显示在文本内容里面，并且文本内容是否与列表排序的标记对齐。,list-style-position,属性具有两个值：,outside,和,inside,。其语法结构如下。,list-style-position:outside/inside;,13.6.3,定义列表排序符号样式,list-style-type,通过,list-style-type,属性可以来设置列表排序符号的样式。,list-style-type,属性和,HTML,中列表,type,属性的用法是一样的。但有点不同的是，,list-style-type,属性无论是使用无序列表还是有序列表都可以设置里面的属性值。,list-style-type,属性是放在,标签里面的。其语法结构如下。,list-style-type:,列表排序符号样式,;,13.6.3,定义列表排序符号样式,list-style-type,在这里,list-style-type,属性有二十个属性值，都是同样的用法，这里就不一一解说。,list-style-type,属性的属性值列表如下所示。,list-style-type:disc,：实心圆,list-style-type:circle,：空心圆,list-style-type:square,：实心方块,list-style-type:decimal,：阿拉伯数字,list-style-type:lower-roman,：小写罗马数字,i,、,ii,、,iii,等,13.6.3,定义列表排序符号样式,list-style-typelist-style-type:upper-roman,：大写罗马数字,I,、,II,、,III,等,list-style-type:lower-alpha,：小写英文字母,a,、,b,、,c,等,list-style-type:upper-alpha,：大写英文字母,A,、,B,、,C,等,list-style-type:none,：不使用项目符号,list-style-type:armenian,：传统的亚美尼亚数字,13.6.3,定义列表排序符号样式,list-style-type,list-style-type:cjk-ideographic,：浅白的表意数字,list-style-type:georgian,：传统的乔治数字,list-style-type:lower-greek,：基本的希腊小写字母,list-style-type:hebrew,：传统的希伯莱数字,list-style-type:hiragana,：日文平假名字符,13.6.3,定义列表排序符号样式,list-style-type,list-style-type:hiragana-iroha,：日文平假名序号,list-style-type:katakana,：日文片假名字符,list-style-type:katakana-iroha,：日文片假名序号,list-style-type:lower-latin,：小写拉丁字母,list-style-type:upper-latin,：大写拉丁字母,13.6.4,综合声明列表属性,list-style,综合声明列表属性,list-style,是用来把上面所讲的列表的不同属性值全部放在一起，对列表一起进行声明的。只需要在每个属性值中间用英文的空格号隔开。其语法结构如下。,list-style:,各种属性值,;,13.7,本章小结,本章学习了,CSS,的基本属性。详细介绍了,CSS,的背景属性、文本属性、边框属性和列表属性。本章难点是,CSS,的内边距和外边距，概念容易搞混，希望同学们可以认真仔细的学习。通过本章学习，可以掌握,HTML,标签属性外的样式的基本设置，使页面更加丰富多彩。,