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

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 文本属性文本属性用于设置文本的颜色、行高、对齐方式、字符间距、段首缩进位置及修饰文本。常用文本属性如下表所示：文本属性属性值描 述color命名颜色颜色十六进制值RGB值设置文本的颜色text-indentlength(常用单位px|pt|em|%) 设置文字的首行缩进距离line-heigh

2、tlength常用单位px|pt|em)定义行高letter-spacinglength(常用单位px|pt|em)定义每个字母或汉字之间的间距text-decorationunderline | overline | line-through | none显示下划线 | 显示上划线 | 显示删除线 |不显示任何修饰text-alignleft | center | right | justify设置文本在水平方向居左|中|右|两端对齐text-transformnone默认值，对文本不作任何的改变uppercase将文本中的字母全部转换为大写的字符lowercase将文本中的字母全部转换为小

3、写的字符capitalize将文本中的每个单词的首字母大写white-spacenormal默认值，空白会被浏览器忽略pre空白会被浏览器保留，效果类似标签nowrap文本不会换行，文本会在同一行上显示，直到遇到标签为止pre-wrap保留空白符序列，且正常进行换行pre-line合并空白符序列，且保留换行符inherit从父元素继承white-space属性值word-spacinglength(常用单位px|pt|em)设置汉字或单词之间的空格的宽度文本属性示例 12.3 字体属性CSS字体属性用于设置字体族、大小、粗细及风格等样式，常用的字体属性如常用字体属性如下表所示：属 性属性值描

4、述font除了font之外的其他字体属性值把所有针对字体的属性源目录在一个声明中font-sizexx-small、绝对字体，默认值为mediumsmaller设置比父元素更小的larger相对字体尺寸，设置比父元素更小的尺寸length设置字体大小为一个固定的值，常用单位为px、em%设置字体大小为基于父元素的一个百分数font-family宋体,黑体设置字体族，优先级按字体族顺序从大到小normal设置字体常规格式显示lighter设置字体加细bold设置字体加粗bolder设置字体特粗100900数字 400 等价于 normal，而 700 等价于 boldfont-stylenorm

5、al | italic | oblique常规格式显示|斜体显示|倾斜显示，与italic效果一样字体属性示例 12.4 背景属性CSS的背景属性主要用于设置对象背景颜色或背景图片以及背景图片的拉伸方向及其位置等样式，常用的背景属性如表下所示：属 性属性值描 述background除background之外的任何的背景属性值将背景属性设置在一个声明中background-color颜色值设置元素的背景颜色background-imageurl(image_file_path)|inherit设置元素的背景图像background-attachmentscroll|fixed|inherit设置

6、背景图像是固定亦或随着页面滚动，默认是滚动background-repeat repeat-x设置图像横向重复repeat-y设置图像纵向重复repeat默认值，设置图像横向及纵向重复no-repeat设置图像不重复background-position left背景图像居左放置right背景图像居右放置center背景图像居中放置top背景图像向上对齐bottom背景图像向下对齐背景属性示例 12.5 列表属性CSS列表属性主要用于设置列表项目类型以及列表项的放置位置。常用的列表属性如表下所示：属 性属 性 值描 述list-style其他任意的列表属性值用于把所有用于列表的属性设置于一个声

7、明中list-style-imageimage_url将图片设置为列表项前导符list-style-position（决定列表项目放置位置）outside默认值，列表项导符放置在文本以外 inside列表项目前导符放置在文本以内，占用列表项宽度list-style-type（设置列表项目类型）disc默认值，在列表项前添加“”实心圆点circle在列表项前添加“ ”空心圆点square在列表项前添加“ ”实心方块decimal在列表项前添加普通的阿拉伯数字lower-roman在列表项前添加小写的罗马数字upper-roman在列表项前添加大写的罗马数字lower-alpha在列表项前添加小写

8、的英文字母upper-alpha在列表项前添加大写的英文字母none在列表项前不添加任何的项目符号或编号列表属性示例 12.6 表格属性CSS表格属性主要用于设置表格边框是否会显示单一边框、单元格之间的间距以及表格标题位置等样式。常用的列表属性如表下所示：属 性属 性 值描 述border-collaseseparate默认值，表格边框和单元格边框会分开collapse表格边框和单元格边框会合并为一个单一的边框border-spacinglength length规定相邻单元格的边框之间的距离，单位可取px、cm 等。如果定义一个 length 参数，则该值同时定义了相邻单元格之间的水平和垂直间距。如果定义两个 length 参数，那么第一个参数设置相邻单元格之间的水平间距，而第二个参数设置相邻单元格的垂直间距caption-si