第五章css样式表.ppt

第五章　 CSS样式表 5.1 CSS样式表 1. CSS样式表的基本语法格式 CSS有不同于XML的组织结构，它的基本结构单元可称为CSS元素。 每个CSS元素其实就是一只盒子，盒子是拥有一组特性和规则的矩形区域。盒子可以嵌套，浏览器根据CSS盒子规则将XML文档具体内容填入到载体中。 　 2. 一个简单的CSS样式表 CSS文件:ex5-1.css XML文件:ex5-1.xml 3. CSS样式表的结构: Px与em的区别： 1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位；3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。 px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)? em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 em有如下特点： 1. em的值并不是固定的；2. em会继承父级元素的字体大小。 所以，写CSS时注意：1. body选择器中声明Font-size=62.5%；2. 将原来的px数值除以10，然后换上em作为单位；3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。 CSS相对长度单位(relative length unit) CSS相对长度单位中的相对二字，表明了其长度单位会随着它的参考值的变化而变化，不是固定的。 以下是CSS相对长度单位列表： CSS相对长度单位 说明 em 元素的字体高度The height of the elements font ex 字母x的高度The height of the letter x px 像素Pixels % 百分比Percentage CSS绝对长度单位(absolute length unit) 绝对长度单位是一个固定的值。比如我们常用的有mm，就是毫米的意思。 以下是CSS绝对长度单位列表： CSS绝对长度单位 说明 in 英寸Inches (1 英寸 = 2.54 厘米) cm 厘米Centimeters mm 毫米Millimeters pt 点Points (1点 = 1/72英寸) pc 皮卡Picas (1 皮卡 = 12 点) CSS样式表可以包含注释。CSS中的注释与c语言中的注释(／* …*／)很相似。 CSS文件中不区大小写，书写时可以不考虑大小写的问题。 4. CSS样式表的继承性 父元素的一些格式属性是传递到子元素并由其继承的。 而当属性在父 子元素中同时声明时,则子属性覆盖父属性. 如右边的例子: 5. 使用多个元素与多个规则 格式: 元素1,元素2,…,元素n { 样式声明; } 6. 将样式表链接到XML文件 格式: ?xml-stylesheet type=“text/css” href=URL? 5.2 设置字体 例如： element { font-stlye: “italic”; font-size: “20pt”; font-family: “楷体_gb2312”; } 在CSS样式表中使用中文 在css文件的头部加上 ：@charset “gb2312” 不能使用中文作元素名称 1. font-style 语法：?font-style : normal | italic | oblique 参数: normal: 正常的字体 italic: 表示使用斜体显示文字 oblique: 使用倾斜幅度不大的斜体 inherit: 表示该属性从父元素继承 例如：ex5-3.xml ex5-3.cs