CSS样式(文本字体).ppt

1、,CSS 样式,CSS 样式,我们能用CSS样式表来定义什么？ CSS 文本 CSS 背景 CSS 字体 CSS 列表 CSS 表格 CSS 轮廓,CSS字体,CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。 样式事从印刷而来，故CSS里沿用了很多印刷术语，如： 字体（font） 字面(face) 字体集(font-family) 磅值(weight) 样式（style）,字体集：font-family属性,语法：h1 font-family: Georgia; h1 font-family:宋体; CSS设置字体的局限性很大，字体能否正常显示，则看用户

2、机器上是否安装该字体。,font-family可以多重取值，例如： p font-family: Times, TimesNR, New Century Schoolbook, Georgia, New York, serif; 根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择系统默认字体。 建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。,font-family引号的问题,有些字体例如： New Centur Schoolbook， 本身带有空

3、格，所以我们用引号给他引上，单引号和双引号都可以使用，但如果在行内式样式表中需注意嵌套的问题，例如： 在行内式样式表中使用单引号。如果不是行内式的话单引号或双引号都可以接受。,字体尺寸：font-size属性,字体尺寸是一个很重要的属性，很多其他属性的设定，都可以以字体大小为基础，达到弹性设计的目的，例如： pfont-size:30em font-size属性用来定义元素内文字的大小。,font-size的取值,font-size 值可以是绝对或相对值。 语法: font-size: | | | 绝对值： 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小（不利于可用性） 绝对大小

4、在确定了输出的物理尺寸时很有用 相对大小： 相对于周围的元素来设置大小 允许用户在浏览器改变文本大小 注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素,绝对尺寸,绝对尺寸包括xx-small x-small small medium large x-large xx-large 7个关键字，这7个关键字之间存在一个固定缩放因子，在CSS2中为1.5，例如： medium为12PX，则large 就为14.4PX（12PX*1.2）.,相对尺寸,larger | smaller 使用中，更多的是我们直接输入具体的数值或者百分比。 Font-size例子,Font-wei

5、ght属性,定义和用法 font-weight 属性设置文本的粗细。 该属性用于设置显示元素的文本中所用的字体加粗。 数字值 400 相当于 关键字 normal，700 等价于 bold。,Font-weight取值,Font-weight实例,font-style 属性,font-style 属性定义字体的风格 ,该属性设置使用斜体、倾斜或正常字体。 p.normal font-style:normal; p.italic font-style:italic; p.oblique font-style:oblique;,font-style取值,font-style三个取值的示例,font

6、-variant 属性,font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。 实例 把段落设置为小型大写字母字体： p.small font-variant:small-caps; ,font-variant 取值,font-variant示例,line-height 属性,line-height 属性设置行间的距离（行高）。 注释：不允许使用负值。 设置以百分比计的行高： p.small line-height:90% p.big line-height:200%,line-hei

7、ght实例,用百分比来设置行间距 用像素值来设置行间距 用数值来设置行间距,font 属性,font 简写属性在一个声明中设置所有字体属性。这个简写属性用于一次设置元素字体的两个或更多方面。 可以按顺序设置如下属性： font-style font-variant font-weight font-size/line-height font-family 可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。,实例,在一个声明中设置所有字体属性： p.ex1 font:italic arial,sans-serif; p.ex2 font:

8、italic bold 12px/20px arial,sans-serif; ,CSS 文本,color 属性,定义和用法 color 属性规定文本的颜色。 我们可以这样写： body color:red; h1 color:#00ff00; p color:rgb(0,0,255); 当然RGB模式我们也可以使用百分比, 与之相关的是：我们可以使用background-color属性设置文本背景色。 实例 背景色实例,direction 属性,定义和用法 direction 属性规定文本的方向 / 书写方向。 我们可以这样写： div direction: rtl ,Direction取值

9、,实例,letter-spacing 属性,定义和用法 letter-spacing 属性增加或减少字符间的空白（字符间距） 我们可以这么写： 设置 h1 和 h2 元素的字母间距： h1 letter-spacing:2px h2 letter-spacing:-3px,letter-spacing取值,该属性定义了在文本字符框之间插入多少空间，normal 就相当于值为 0。 注释：允许使用负值，这会让字母之间挤得更紧。 实例,text-align 属性,text-align 属性规定元素中的文本的水平对齐方式。 我们可以这样写： 设置 h1、h2、h3 元素的文本对齐方式： h1 tex

10、t-align:center h2 text-align:left h3 text-align:right,text-align的取值,最后一个水平对齐属性是 justify，它会带来自己的一些问题，一般情况下因为浏览器的问题，我们并不使用该值进行两端对齐。 实例,text-decoration 属性,text-decoration 属性规定添加到文本的修饰，修饰的颜色由 “color” 属性设置。 该属性不能被继承。 我们可以这样写： 设置 h1、h2、h3、h4 元素的文本修饰： h1 text-decoration:overline h2 text-decoration:line-thr

11、ough h3 text-decoration:underline h4 text-decoration:blink,text-decoration取值,IE、Chrome 或 Safari 不支持 “blink” 属性值。 实例,text-indent属性,text-indent 属性规定文本块中首行文本的缩进。允许使用负值。如果使用负值，那么首行会被缩进到左边。 我们可以这样写： 将段落的第一行缩进 50 像素： p text-indent:50px; ,text-indent取值,实例,word-spacing 属性,word-spacing 属性增加或减少单词间的空白（即字间隔）。该属性定义元素中字之间插入多少空白符。normal