css设置文字效果.ppt

第3章 用CSS设置文字效果 3.1 CSS文字样式 3.1.1 字体 font-family:黑体,Arial,宋体, “Times New Roman”sans-serif; 3.1.2 文字大小 绝对大小:font-size:0.5in;/cm/mm/pt/pc font-size:xx-small;/x-small/small/medium/large/ x-large/xx-large 相对大小:p.one{font-size:15px;} p.one span{font-size:200%;} p.two{font-size:30px;} p.two span{font-size:0.5em} 3.1.3 文字颜色 color:#0000ff color:blue color:#00f Color:rgb(0,0,255) Color:rgb(0%,0%,100%) 3.1.4 文字粗细 font-weight:lighter font-weight:normal font-weight:bold font-weight:800 3.1.5 斜体 font-style:italic font-style:normal font-style:oblique 3.1.6 下划线、顶划线和删除线 text-decoration:underline text-decoration:overline text-decoration:line-through 3.1.7 英文字母大小写 text-transform:capitalize text-transform:uppercase text-transform:lowercase 3.2 文字实例一:模拟Google公司的logo 3.4 CSS段落文字 3.4.1 段落水平对齐方式: text-align:left/right/center/justify 3.4.2 段落的垂直对齐方式 Vertical-align:top/bottom/middle 该属性对于块级元素并不起作用,例如p和div等,但对于表 格而言,这个属性则显得十分重要. Vertical-align:10px Vertical-align:-10px 当值设置为正数时,文字将向上移动相应的数值,设置为 负数时则向下移动. 3.4.3 行间距和字间距 Line-height可以设置为相对数值,也可以设置为绝对数值. Letter-spacing也可以设置为相对值和绝对值,并且可以等 于负数. 3.4.4 首字放大 主要通过float语句对首字下 沉进行控制. float:left 3.5 段落实例:百度搜索 html head titleGoogle/title style p{ font-size:80px; letter-spacing:-2px; /* 字母间距 */ font-family:Arial, Helvetica, sans-serif; } .g1, .g2{ color:#184dc6; } .o1, .e{ color:#c61800; } .o2{ color:#efba00; } .l{ color:#42c34a; } /style /head body pspan class=g1G/span span class=o1o/spanspan class=o2o/span span class=g2g/spanspan class=ll/span span class=ee/span/p /body /html 3.3 文字实例二:五彩标题