CSS设置文本样式题稿.ppt

用CSS设置文本样式 10.4设置文字的字体(font-family) 10.5设置文字的倾斜效果(font-style) 10.6设置文字的加粗效果(font-weight) 10.7英文字母大小写转换(Text-transform) 10.8控制文字的大小(font-size ) 10.9文字的装饰效果(Text-decoration ) 10.10设置段落首行缩进(Text-indent) 10.11设置字词间距(Word-spacing Letter-spacing) 10.12设置段落内部的文字行高(Line-height ) 10.13设置段落之间的距离(Margin ) 10.14控制文本的水平位置(Text-align) 10.15设置文字与背景颜色(Color Background-color) 10.16设置段落的垂直对齐方式(Vertical-align) 用CSS设置文本样式 在学习HTML的时候，通常也会使用HTML对文本进行一些非常简单的样式设置，而使用CSS对文本的样式进行设置远比使用HTML灵活、精确得多。 本章将以CSS的样式定义方法来介绍文字的使用。 1 长度单位 1.相对类型 （1）px——像素 （2）em——字符高度 2.绝对类型 in（英寸）cm（厘米）mm（毫米）pt（点数）——均较少用。 2 颜色定义 h3{color:blue;} h3{color:#0000ff;} h3{color:#00f;} h3{color:rgb(0,0,255);} h3{color:rgb(0%,0%,100%);} 3 创建基础页面 创建一个基本的网页，如图所示。 4 设置文字的字体 在HTML中，设置文字的字体需要通过font标记的face属性。 而在CSS中，则使用font-family属性。针对上述网页，在样式部分增加对p标记的样式设置如下，实例文件为“06-02.html”。 style type=text/css h1{ font-family:黑体; } p{ font-family: Arial, Times New Roman; } /style 5 设置文字的倾斜效果 CSS中的font-style属性正是用来控制字体倾斜的，它可以设置为“正常”、“意大利体”和“倾斜”3种样式，分别如下： font-style:normal; font-style:italic; font-style:oblique; 6 设置文字的加粗效果 然而遗憾的是，实际上大多数操作系统和浏览器还不能很好地实现非常精细的文字加粗设置，通常只能设置“正常”和“加粗”两种粗细，分别如下。 font-weight:normal /*正常*/ font-weight:bold /*加粗*/ 7 转换英文字母大小写 例如下面3个文字段落分别可以实现单词的首字母大写、所有字母大写和所有字母小写。 p { text-transform:capitalize; } /* 单词首字母大写 */ p { text-transform:uppercase; } /* 全部大写 */ p { text-transform:lowercase; } /* 全部小写 */ 对上述网页代码的#p1和#p2两个段落分别设置如下，实例文件为“06-04.html”。 #p1{ font-style:italic; text-transform:capitalize; } #p2{ text-transform:lowercase; } 8 控制文字的大小 p{ font-family: Arial, Times New Roman; font-size:12px;} 9 设置文字装饰效果 h1 { font-family:黑体; text-decoration:underline overline; } 10 设置段落首行缩进 Text-indent属性是以各种长度为属性值，为了缩进两个字的距离，最经常用的是“2em”这个距离。 例如，对网页代码的p2段落进行如下设置，实例文件为“06-08.html”。 #p2{ text-indent:2em; }