第6章文本超链接和图像的设置.ppt

* 第六章 文本、超链接和图像的css格式化设计 文本 1 主要的文本标记 h1 ——h6 p span ulli/olli/dldtdd 2 主要的文本属性 (1)font-family:设定字体名称，如verdana,黑体等，多个字体用”,”分隔.示例如下： p{font-family:verdana,宋体;} (2)font-size:设置字体的大小。可以有多种方式，最常用的就是pt和px(pixel)。示例如下： p{font-size:18px;} (3)font-style:设定字体风格,有三个值可选：normal, italic, oblique,normal是缺省值，italic, oblique都是斜体显示。示例如下： p{font-sytle:italic;} (4)font-weight：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 设定字体浓淡，常用值是normal(400)和bold(700)，normal是缺省值。示例如下： P{font-weight:bold;} (5) text-decoration:设定文本的装饰性,有以下值： none (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线) 示例代码如下： p {text-decoration: underline;} （6）line-height:设定行高,其值有以下设定方法： length ：长度，可以用绝对单位(px, pt等)或者相对单位 (em, ex, px) percentage (百分比，以当前默认字体的高度为基础，默认行高的百分比，可为120%或1.2) 示例代码如下： p{line-height:150%;} (6)color:文本颜色，颜色的表示方式： (1) color：颜色名 (2)color:# fc0e08. 使用十六进制数组定义颜色,格式为#RRGGBB (3) color:rgb(R%,G%,B%).此时，红、绿、蓝颜色值的等级用百分比数来确定。 (4)color:rgb(R,G,B)：使用范围在0～255之间的整数来设置 如：p{color:#ff3366;} (7)background-color:背景颜色，颜色的表示方式与color相同 (8) text-indent:设定文本首行缩进, 设定方法如下： length ：长度，可以用绝对单位(px, pt等)或者相对单位 (em, ex, px) 示例代码如下： p{text-indent:2em;} (9) text-align：设定文本的对齐方式，有以下值： left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码： p{text-align:center;} 补充： 长度单位 在CSS中，长度是一种度量尺寸，用于字体尺寸、文本首行缩进、行高和对象的宽度、高度、填充、边框线和边距等属性 绝对长度单位：厘米（cm）、毫米（mm）、英寸（in）、磅（pt） 、像素(px)等 注: 1英寸=2.54厘米=25.4毫米=72磅=96像素 1像素＝0.26毫米 1像素=0.75磅 (2)相对长度值：em（当前字体中字母m的宽度）、ex（当前字体中字母x的高度,此高度通常为字体尺寸的一半 ）和百分比 使用em和ex的目的就是为所给的字体设置合适的宽度，而没有必要知道字体有多大，在显示时，可通过比较当前字体中的m和m来确定,字体越大，所对应的em和ex也就越大 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title公车超标公车泛滥向谁举报？/title style type=text/css h1{ font-family:黑体; font-size:24px; color:red; text-decoration:underline; text-align:center; } span{ font-family:verdana; font-size:16px; font-weight:200; color:blue; text-a