第2-1章用CSS设置文字与背景教案分析.pptVIP

第3章 用CSS设置文字与背景 本章要点 CSS设置文字样式 CSS段落样式和列表样式 CSS颜色和背景样式 文字与背景的综合实例 3.1 CSS文字与段落样式 1.字型 font-family ：字体1，字体2，字体3，… 说明：这个属性是一个按照优先顺序列出的字体名称，它的表述方法与大多数的CSS属性有些不同，它的值是用逗号分隔的，用来指定可替换的字体。例如： body{font-family:gill,helvetica,sans-serif} 上面这行代码执行时，如果浏览器没有找到gill字体，那么将使用helvetica或者sans-serif字体来替代。 2.字号 font-size：absolute-size | relative-size 说明：absolute-size关键字指的是字体尺寸的绝对值，推荐单位为点数（pt）。点数（pt）是计算机字体的标准单位，这一单位的好处是设定的字号会随着显示器的分辨率的变化而调整大小，这样可以防止不同分辨率显示器中字体大小不一致。如果使用点数作为单位，推荐正文文字大小为9pt。 3.字体样式 font-style：normal | italic | oblique 说明：normal表示 正常字体，italic 表示斜体，oblique表示偏斜体（有时本身并不是斜体，而是被系统自动变斜的普通字形）。 4.字体粗细 font-weight ：normal | bold |boder| lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 说明：font-weight 定义了字体的粗细值。这些值从100排到900，每一个数字所表示的字体都要比它前一个粗一些。在这些值当中， normal相当于400， bold相当于700， bolder相当于900。 5.字体大小写 font-variant：normal | small-caps 说明：font-variant 属性决定了字符是以普通还是以小体大写(small-caps)显示。 6.文字修饰 text-decoration：underline|overline|line-through|blink|none 说明：underline表示下划线；overline表示上划线；line-through表示删除线；blink表示闪烁文字（只有Netscape浏览器支持）；none表示默认值（去掉超链接下划线用此值）。 7.英文大小写转换 text-transform：captalize|uppercase|lowercase|none 说明：capitalize表示首字母大写；uppercase表示大写；lowercase表示小写；none表示默认值。 3.1.2 CSS段落文字 1.段落的水平对齐方式 text-align：Left| right| center| justify 说明：left表示左对齐；right表示右对齐；center表示居中对齐；justify表示两端对齐。 2.字符间距 letter-spacing：normal|length 说明：字符间距用来设置字符或英文字母间距。 3.单词间距 word-spacing：normal|length 说明：单词间距用来设置英文单词之间的距离。使用正值为增加单词的间距，使用负值为减小单词的间距。 4.文字的首行缩进 text-indent：value 说明：文字缩进与字号单位保持统一。如字号为9pt，若想创建两个中文缩进的效果，文字缩进就应该为18pt，也可以用设为2em。 5.行高 line-height：value 说明：行高值可以绝对像素值，也可用百分比数来表示。当值为数字时，行高由字体大小的量与该数字相加所得，百分比的值相对与字体的大小而定。 3.1.3 CSS 列表 某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。 1.列表类型 要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。list-style-type : value 说明：对于type属性，可以设置多种符号类型。 2.列表项图像 如果要把列表的标志改成一个图像，可以利用 list-style-image 属性： ul li {list-style-image : url(*.gif)} 说明：这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。 3.列表标志位置 CSS可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。例如： list-style-positio