第二讲CSS的文字效果.ppt

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