CSS网页元素设计.ppt

第8章 CSS 网页元素设计字体样式的设置段落样式的设置颜色与背景的设置图片样式的控制 设置字体 font family font family —设置字体 font-size font-size —文字大小 line-height line-height —行高 color color —文字颜色 background-color background-color -背景颜色文字大小的绝对尺寸绝对单位说明 in Inch ,英寸 cm Centimeter ,厘米 mm Millimeter 毫米 pt Point 印刷的点数 pc Pica (皮卡) , 1pc=12pt 绝对尺寸不会随着显示器分辨率的变化而变化,也不会随着显示设备的不同而变化, font-size: 绝对单位,浏览器默认以 px 为单位。文字大小的相对尺寸 font-size: xx-small/ x-small/small/medium/large/x- large/xx-large font-size:15px; font-size:200%; (父元素的基础上乘以 200% ) em vs. px em指字体高,任意浏览器的默认字体高都是 16px 。所以未经调整的浏览器都符合: 1em=16px 。那么 12px=, 10px= 。为了简化 font-size 的换算,需要在 css 中的 body 选择器中声明 Font-size=% ,这就使 em值变为 16px *%=10px, 这样 12px=, 10px=1em, 也就是说只需要将你的原来的px数值除以 10,然后换上 em作为单位就行了。 em vs. px em有如下特点: 1. em 的值并不是固定的; 2. em 会继承父级元素的字体大小。阅读: /blog/348 文字颜色表示以下几种方式都可表示蓝色: color:blue; color:#00f; color:#0000ff; color:rgb(0,0,255); color:rgb(0%,0%,100%); 文字的装饰效果 font-weight font-weight —文字的粗细 normal/bold font-style font-style —字体倾斜 normal/oblique/italic text-transform text-transform —大小写转换 capitalize/uppercase/lowercase text-decoration —文字的装饰效果 underline/overline/line-through/blink(ie 无效 firefox 有效) 段落文字 text-align text-align —段落水平对齐方式 left/right/center/justify( 两端) vertical-align vertical-align —段落的垂直对齐方式 top/bottom/middle/ 数值正数:向上移动;负数:向下移动 text-indent text-indent —段落缩进,设置一个数值长度|百分比(对上一级元素的宽度而定的) line-height line-height —两行文字之间基线的距离 Normal| 数字|长度|百分比(字体大小的百分比) letter-spacing letter-spacing —调整字间距 Normal| 长度程序 8- 段落内容裁剪( P188 ) word-break word-wrap white-space over-flow 实例: 程序 8- 使文本产生省略号: white-space:nowrap; overflow:hidden; text-overflow:ellipsis;