CSS分析.ppt

链入外部样式表文件 (Linking to a Style Sheet) 可以先建立外部样式表文件（.css），然后使用HTML的link对象。 注意： 将样式分类后放在单独的CSS文件中，然后在网页中添加所引用的CSS文件 。 当需要修改元素的样式时，只需要修改.css文件中的样式即可。 一旦修改了.css文件中的某个样式，则凡是引用了该.css文件的网页，都会自动应用新的样式。 CSS文件中每个样式定义的一般格式为 ：选择符 { 属性1:值1; 属性2:值2; ……} 定义内部样式块对象 (Embedding a Style Block) 　　可以在HTML文档的HTML和BODY标记之间插入一个STYLE.../STYLE块对象。 示例如下： 　　html head title内嵌样式测试/title style type=text/css h1{ font-size:30pt; color:Red;} h2{ font-size:20pt; color:Blue;} /style /head body div h1第1章/h1 h21.1/h2 h21.2/h2 h1第2章/h1 h22.1/h2 h22.2/h2 /div /body /html 　　请注意，这里将style对象的type属性设置为text/css，是允许不支持这类型的浏览器忽略样式表单。 内嵌样式 表(Inline Styles) 　 内嵌样式表即是在对象的标记内使用对象的style属性定义适用其的样式表属性。 示例如下： p style=“height:300;width:400”这是个实例/p 注意事项： 如果某个元素既使用了外部样式表，又使用了内部样式表，同时也定义了内嵌样式，而这些样式的定义又发生了冲突，元素最终呈现的效果会是什么呢？ 实际上浏览器会按照文档解析的顺序，依次应用样式 ，优先级依次为：内嵌样式、内部样式、外部样式。 Css语法 CSS的定义是由三个部分构成:选择符(selector)，属性(properties)和属性的取值(value)。 　 语法：　 selector {property: value} (选择符 {属性:值}) 说明： 选择符可以有多种形式。 如果属性的值是字符串，必须在值上加引号 如果需要对一个选择符指定多个属性时，使用分号将所有的属性和值分开 2、选择符组 　 可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义。 　 例：h1, h2, h3, h4, h5, h6 { color: green } (这个组里包括所有的标题元素，每个标题元素的文字都为绿色) 3、 类选择符 　 用类选择符能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。 例：p.right {text-align: right} .center {text-align: center} 4、ID选择符 　 在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。 例：#intro 　　{ 　　font-size:110%; 　　font-weight:bold; ｝ 注意： 利用CSS定义样式时，如果在一个元素的样式定义中，既有HTML元素，又有自定义类和自定义ID，则自定义ID的优先级最高，其次是自定义类，HTML元素的优先级最低。 5、包含选择符 　 可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。 例：table a { 　　 font-size: 12px 　　 } 样式表的层叠性 　 层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。 例：divp我会是什么颜色？/p/div 如果定义css：div { color: red; font-size:9pt} /*段落的文字为红色9号字.另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。 接上例：如果定义css： div { color: red; font-size:9pt} 　　p {color: blue} /*段