网页设计-网页设计CSS常用属性课件.pptx

1、第第12讲讲 CSS常用属性常用属性 12.1 CSS属性概述属性概述 12.2 文本属性文本属性 12.3 字体属性字体属性 12.4 背景属性背景属性 12.5 列表属性列表属性 12.6 表格属性表格属性12.1 CSS属性概述属性概述CSS设置网页中的各个对象的样式需要通过设置网页中的各个对象的样式需要通过CSS属性来实现，常用的属性来实现，常用的CSS属性有文本、属性有文本、字体、背景、列表、表格、盒子模型和定位字体、背景、列表、表格、盒子模型和定位等等CSS属性。属性。12.2 文本属性文本属性 文本属性用于设置文本的颜色、行高、对齐方式、字符间文本属性用于设置文本的颜色、行高、对

2、齐方式、字符间距、段首缩进位置及修饰文本。常用文本属性如下表所示：距、段首缩进位置及修饰文本。常用文本属性如下表所示：文本属性文本属性属性值属性值描描 述述color命名颜色颜色十六进制值命名颜色颜色十六进制值RGBRGB值值设置文本的颜色设置文本的颜色text-indentlength(常用单位常用单位px|pt|em|%)设置文字的首行缩进设置文字的首行缩进距离距离line-heightlength常用单位常用单位px|pt|em)定义行定义行高高letter-spacinglength(常用常用单位单位px|px|pt|em)定义定义每个字母或汉字之间的每个字母或汉字之间的间距间距tex

3、t-decorationunderline|overline|line-through|none显示显示下划线下划线|显示显示上划线上划线|显示显示删除线删除线|不显示任不显示任何修饰何修饰text-alignleft|center|right|justify设置文本在水平方向居左设置文本在水平方向居左|中中|右右|两端对齐两端对齐text-transformnone默认值，对文本不作任何的改变默认值，对文本不作任何的改变uppercase将文本中的字母全部转换为大写的字符将文本中的字母全部转换为大写的字符lowercase将文本中的字母全部转换为小写的字符将文本中的字母全部转换为小写的字符c

4、apitalize将文本中的每个单词的首字母大写将文本中的每个单词的首字母大写white-spacenormal默认值，空白会被浏览器忽略默认值，空白会被浏览器忽略pre空白会被浏览器保留，效果类似空白会被浏览器保留，效果类似标签标签nowrap文本不会换行，文本会在同一行上显示，直到遇文本不会换行，文本会在同一行上显示，直到遇到到标签为止标签为止pre-wrap保留空白符序列，且正常进行换行保留空白符序列，且正常进行换行pre-line合并空白符序列，且保留换行符合并空白符序列，且保留换行符inherit从父元素继承从父元素继承white-spacewhite-space属性值属性值word

5、-spacinglength(常用单位常用单位px|pt|em)设置汉字或单词之间的空格的宽度设置汉字或单词之间的空格的宽度 12.3 字体属性字体属性 CSS字体属性用于设置字体族、大小、粗细及风格等字体属性用于设置字体族、大小、粗细及风格等样式，常用的字体属性如常用字体属性如下表所示：样式，常用的字体属性如常用字体属性如下表所示：属属 性性属性值属性值描描 述述fontfont除了除了fontfont之外的其他字之外的其他字体属性值体属性值把所有针对字体的属性源目录在一个声明中把所有针对字体的属性源目录在一个声明中font-sizexx-smallxx-small、绝对字体，默认值为绝对字

6、体，默认值为mediummediumsmallersmaller设置比父元素更小的设置比父元素更小的largerlarger相对字体尺寸，设置比父元素更小的尺寸相对字体尺寸，设置比父元素更小的尺寸lengthlength设置字体大小为一个固定的值，常用单位为设置字体大小为一个固定的值，常用单位为pxpx、emem%设置字体大小为基于父元素的一个百分数设置字体大小为基于父元素的一个百分数font-family宋体宋体,黑体黑体设置字体设置字体族，优先级按字体族顺序从大到小族，优先级按字体族顺序从大到小normal设置设置字体常字体常规格式显示规格式显示lighter设置设置字体加细字体加细bol

7、d设置设置字体加粗字体加粗bolder设置字体特粗设置字体特粗100900100900数字数字 400 400 等价于等价于 normalnormal，而，而 700 700 等价于等价于 boldboldfont-stylenormal|italic|oblique常常规格式显示规格式显示|斜体斜体显示显示|倾斜显示，倾斜显示，与与italic效果一样效果一样 12.4 背景属性背景属性 CSS的背景属性主要用于设置对象背景颜色或背景图的背景属性主要用于设置对象背景颜色或背景图片以及背景图片的拉伸方向及其位置等样式，常用的背片以及背景图片的拉伸方向及其位置等样式，常用的背景属性如表下所示：景

8、属性如表下所示：属属 性性属性值属性值描描 述述background除除background之外的任何的之外的任何的背景属性值背景属性值将背景属性设置在一个声明中将背景属性设置在一个声明中background-color颜色值颜色值设设置置元素的背景颜色元素的背景颜色background-imageurl(image_file_path)|inherit设设置置元素的背景图像元素的背景图像background-attachmentscroll|fixed|inherit设置背景图像是固定亦或随着页面滚动，默认是设置背景图像是固定亦或随着页面滚动，默认是滚动滚动background-repeat

9、 repeat-x设置图像横向重复设置图像横向重复repeat-y设置图像纵向重复设置图像纵向重复repeat默认值，默认值，设置图像横向设置图像横向及及纵向重复纵向重复no-repeat设置图像不重复设置图像不重复background-position left背景图背景图像像居左放置居左放置right背景图像居右放置背景图像居右放置center背景图像居中放置背景图像居中放置top背景图像向背景图像向上上对齐对齐bottom背景图像向下对齐背景图像向下对齐 12.5 列表属性列表属性 CSS列表属性主要用于设置列表项目类型以及列表项列表属性主要用于设置列表项目类型以及列表项的放置位置。常用

10、的列表属性如表下所示：的放置位置。常用的列表属性如表下所示：属属 性性属属 性性 值值描描 述述list-style其他任意的列表属性值其他任意的列表属性值用于把所有用于列表的属性设置于一个声明中用于把所有用于列表的属性设置于一个声明中list-style-image-imageimage_url将将图图片设置为片设置为列表列表项前导符项前导符list-style-position（决（决定列表项目放置位置）定列表项目放置位置）outside默认值，列表项导符放置在文本以外默认值，列表项导符放置在文本以外 inside列表项目前导符放置在文本以内，占用列表项宽列表项目前导符放置在文本以内，占用

11、列表项宽度度list-style-type（设置（设置列列表项表项目目类型类型）disc默认值，默认值，在列表项前添加在列表项前添加“”实心圆点实心圆点circle在列表项前添加在列表项前添加“”空心圆点空心圆点square在列表项前添加在列表项前添加“”实心方块实心方块decimal在列表项前添加普通的阿拉伯数字在列表项前添加普通的阿拉伯数字lower-roman在列表项前添加小写的罗马数字在列表项前添加小写的罗马数字upper-roman在列表项前添加大写的罗马数字在列表项前添加大写的罗马数字lower-alpha在列表项前添加小写的英文字母在列表项前添加小写的英文字母upper-alph

12、a在列表项前添加大写的英文字母在列表项前添加大写的英文字母none在列表项前不添加任何的项目符号或编号在列表项前不添加任何的项目符号或编号 12.6 表格属性表格属性 CSS表格属性主要用于设置表格边框是否会显示单一表格属性主要用于设置表格边框是否会显示单一边框、单元格之间的间距以及表格标题位置等样式。常边框、单元格之间的间距以及表格标题位置等样式。常用的列表属性如表下所示：用的列表属性如表下所示：属属 性性属属 性性 值值描描 述述border-collaseborder-collaseseparateseparate默认值，表格边框和单元格边框会分开默认值，表格边框和单元格边框会分开col

13、lapsecollapse表格边框和单元格边框会合并为一个单一的边框表格边框和单元格边框会合并为一个单一的边框border-spacingborder-spacinglength lengthlength length规定相邻单元格的边框之间的距离，单位可取规定相邻单元格的边框之间的距离，单位可取pxpx、cm cm 等。如果定义一个等。如果定义一个 length length 参数，则该值同时定义了相参数，则该值同时定义了相邻单元格之间的水平和垂直间距。如果定义两个邻单元格之间的水平和垂直间距。如果定义两个 length length 参数，那么第一个参数设置相邻单元格之间的参数，那么第一个

14、参数设置相邻单元格之间的水平间距，而第二个参数设置相邻单元格的垂直间距水平间距，而第二个参数设置相邻单元格的垂直间距caption-sidecaption-sidetoptop默认值，表格标题设置在表格上面默认值，表格标题设置在表格上面 bottombottom表格标题设置在表格下面表格标题设置在表格下面table-layouttable-layoutautomaticautomatic默认值，单元格宽度由单元格内容设定默认值，单元格宽度由单元格内容设定fixedfixed单元格宽度由表格宽度和单元格宽度设定单元格宽度由表格宽度和单元格宽度设定 盒子模型及其属性和浮动、定位属性请参见第盒子模型及其属性和浮动、定位属性请参见第14讲讲