网页设计基础教程.pptVIP

网页设计基础──CSS层叠样式表 王建民 1、css简介 css 是 cascading style sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 可以用以下三种方式将样式表加入到网页。 1.1 链入外部样式表文件 可以先建立外部样式表文件（.css），然后使用html的link对象。示例如下： head title文档标题/title link rel=stylesheet href=/dhtmlet.css type=text/css / /head 而在xml中，你应该如下例所示在声明区中加入： ? xml-stylesheet type=text/css href=/dhtmlet.css / 1.2 定义内部样式块对象 你可以在你的html文档的html和body标记之间插入一个style.../style块对象。 定义方式请参阅样式表语法。示例如下： htmlheadtitle文档标题/title style type=text/css !— body {font:10pt arial}h1 {color:gray}h2 {color:red} p {color:silver} -- /style/headbody/body/html 请注意，这里将style对象的type属性设置为text/css，是允许不支持这类型的浏览器忽略样式表单。 1.3 内联定义 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： p style=color:gray这一行字是灰色的/p 1.4 css注释 语法：/*……*/ 范例1： /*这里写注释*/ 范例2： /*这里写注释1 这里写注释2这里写注释3*/ 2.1基本规则 selector { property:value } 参数说明： selector -- 选择符 property:value -- 样式表定义。属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开。 范例：H2 {color:gray;} 其中H2是选择符，color是属性，gray是值，整个{clor:gray}是一个声明，而H1 {color:gray}就是一条规则。 2.2分组 让同一条规则应用于多个元素，也就是多个选择符，或者要将更多的样式应用于一个或一组元素。 2.2.1分组选择符 范例1：H2,P {color:gray;} 范例2： body, table, th, td, h1, h2, h3, h4, p, strong, em, b, i｛color:gray;｝ 2.2.2分组声明 范例1： H1{font:18pt helvetica;}H1{color:purple;}H1{background:blue;} 范例2： H1{font:18pt helvetica;color:purple;background:gray;} 范例3： H1,H2,H3 {clor:gray;background:white;} 2.3 类和ID选择符 html标记：p class=”warning” /p css范例：.warning {font-weight:bold;} html标记：div id=”first-line” /div css范例：#first-line {font-weight:bold;} 类和ID间的区别在于，首先，类可以给任何数量的元素分配相同的名称，而分配给多个元素ID名称不能相同。其次，ID对元素应用何种样式声明都比类具有更高的优先级。 2.4上下文选择 html标记：h1em/em/h1 css范例：h1 em {color:gray;} 范例可翻译为：任何h1中的em元素颜色为灰色。 规则：有多个选择符组成，选择符之间由空格间隔。 2.5 通用选择符 css范例：* {color:black;} 所有的元素为黑色。 Css范例：body * ul {color:gray;} Body 元素下的ul 元素不为灰色，而其两级以下的ul元素为黑色。 2.6 相邻兄弟选择符 css范例：h1 + p {color:silver;} 紧跟在h1后面的p元素的颜色为银色。不包含嵌套在h1中的p元素。 Css范例：h2 + * {color:silver;} 紧跟在h2后面的所有元素为银色。不包含嵌套在h2中的元素 。 2.7属性选 择符 css范例1：a[href] ｛text-decoration:none;｝ 有href属性的a标记元素无下划线。 css范例2：[class] {