第二讲CSS的文字效果.ppt

CSSCSS设置丰富的效果设置丰富的效果CSSCSS设置在丰富的效果设置在丰富的效果用用CSS设置文字效果设置文字效果1用用CSS设置图片效果设置图片效果2用用CSS设置网页中的背景设置网页中的背景3用用CSS设置表格与表单的样式设置表格与表单的样式4用用CSSCSS设置文字效果设置文字效果一、一、CSS文字样式文字样式1.字体字体:font-family可以同时声明任意种字体可以同时声明任意种字体,字体之间用字体之间用逗号逗号分隔分隔;例例:Pfont-family:黑体黑体,Arial,宋体宋体;用用CSSCSS设置文字效果设置文字效果一、一、CSS文字样式文字样式2.文字大小文字大小:font-size（例：例：2-2）值可以是相对大小也可以是绝对大小值可以是相对大小也可以是绝对大小.单位分类及含义单位分类及含义用用CSSCSS设置文字效果设置文字效果绝对单位及含义绝对单位及含义相对单位及含义相对单位及含义绝对单位绝对单位说明说明ininch，英寸，英寸cmcentimeter，厘米，厘米mmmillimeter，毫米，毫米ptPoint,印刷的点数印刷的点数,在一般的显示器中在一般的显示器中1pt相当于相当于1/72inchpcpica，1pc=12pt相对单位相对单位说明说明emems,相对于父对象的大小相对于父对象的大小,1em=10px%用用CSSCSS设置文字效果设置文字效果一、一、CSS文字样式文字样式3.文字颜色文字颜色:color（例：例：2-5）4.文字粗细文字粗细:font-weight（例：例：2-6）(使用像素，使用像素，bold)5.斜体：斜体：font-style（例：例：2-7）(italic)用用CSSCSS设置文字效果设置文字效果一、一、CSS文字样式文字样式6.文字下划线、顶划线和删除线文字下划线、顶划线和删除线:text-decoration（例：例：2-8）(underline,overline,line-through,blink)7.英文字母大小写英文字母大小写:text-transform(例：例：2-10)(capitalize(首字母大写首字母大写),uppercase(全部全部大写大写),lowercase(全部小写全部小写)实例一用用CSSCSS设置文字效果设置文字效果二、二、CSS段落文字段落文字1.段落的水平对齐方式段落的水平对齐方式:text-align(例例2-13)(left,center,right,justify)2.段落的垂直对齐方式段落的垂直对齐方式:vertical-align(例例2-14)(top,middle,bottom,baseline)注注:1)该属性对于块级元素并不起作用该属性对于块级元素并不起作用,如如和和等标记等标记.2)对于表格对于表格,这个属性非常重要这个属性非常重要.用用CSSCSS设置文字效果设置文字效果二、二、CSS段落文字段落文字3.行间距和字间距行间距和字间距行间距行间距:line-height(例例:2-16)注注:在静态页面中在静态页面中,文字大小固定时使用绝对数值文字大小固定时使用绝对数值;在论在论坛和博客等可以由用户自定义字体大小的页面坛和博客等可以由用户自定义字体大小的页面,通常通常设定为相对数值设定为相对数值.字间距字间距:letter-spacing(例例:2-17)注注:也可以设置相对数值和绝对数值也可以设置相对数值和绝对数值.用用CSSCSS设置文字效果设置文字效果二、二、CSS段落文字段落文字4.首字放大首字放大:float:left;(例例:2-18)注注:1)在在CSS中首字放大的效果是通过对第中首字放大的效果是通过对第1个字进行个字进行单独设置样式来实现的单独设置样式来实现的.2)浮动元素只能浮动在左侧或者右侧浮动元素只能浮动在左侧或者右侧,没有浮动到没有浮动到中间一说中间一说.