css样式表.ppt

CSS 样 式 表 CSS 样 式 表 CSS样式表概述 样式表的基本语法 样式表的使用规则 样式表中的常用属性 布局与定位 CSS样式表概述 CSS是Cascading Style Sheet的缩写，称为“层叠样式表”，简称为“样式表” 层叠是指多个样式可以同时应用于同一个页面或网页中的同一个元素，执行的效果按照“层叠规则” 所谓“层叠规则”即当标记的样式定义发生冲突时，靠近标记的定义将生效 主要用来定义一个HTML或一类HTML标记的显示样式，以便实现对页面样式的独立管理,可以将样式信息与网页内容分离的一种标记性语言。 CSS样式的主要优点是提供便利的更新功能，更新CSS样式时，使用该样式的所有文档都自动更新格式 · CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面 样式表的作用： 覆盖浏览器 页面布局 可以重用 多个文档可以链接到一个样式表 样式表的使用规则 样式表的分类 按加入的方式不同，可以分为： 行内样式表、 内部样式表 外部样式表。 1．行内样式表(内嵌样式表) 在HTML标记中使用style属性，直接写入需要定义的样式。例如： p style=color:Blue; font-size:12px 内嵌样式表p 其中各个属性之间用“;”隔开，属性与属性值之间用“:”隔开. 内联式样式表是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中，比如下面的例子： p style=color：#ff0000内联式样式表/p 这种样式表只会对使用它的元素起作用，而不会影响HTML文档中的其他元素。也正因为如此，内联式样式表通常用在需要特殊格式的某个网页对象上。 3．外部样式表 先创建一个CSS文件，然后在页面中调用这个CSS文件。 调用的方法:在页面的头部标记HEAD中加入下面的代码 head link href=school.css rel=stylesheet type=text/css / /head link标记，用来调用外部的样式表文件。 外部CSS样式：一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件。 使用外部样式表，相对于内嵌和内部样式表，有以下优点： ? 样式代码可以复用。 ? 便于修改。 ? 提高网页显示的速度。 样式表的基本语法 选择器简介 样式表文件由三部分组成：选择器、属性和属性值。 selector {property : value;property : value} 例如： body { margin: 0px; font-size: 12px; line-height: 150%; } “属性”和“属性值”之间用冒号“:”隔开，多个属性定义之间用分号“;”隔开，所有属性内容都需要用大括号“{ }”括起来 CSS的选择器类型： 1．通用选择器 指定的样式可应用在页面里的所有元素。 例如：把页面中所有支持字体属性的样式都设为“宋体”： * { font-family: 宋体; } 注： HTML标记符是最典型的选择器类型，网页设计者可以为某个或某些具体的HTML元素应用样式定义。 如果需要为位于某个标记符内的标记符设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记符。例如，如果只想使位于h2标记符内的b标记符具有特定的属性，则应使用以下格式： h2 b{color:blue} /*注意h2和b之间以空格分隔*/ 这表示只有位于h2一标记符内的b元素具有指定样式，而其他b元素不具有该样式。实际上，这种嵌套关系可以有多层，不过通常仅用一层。 3．class选择器 是一种特殊类型的CSS选择器，可将同一类型的HTML标记定义出不同的样式。 为页面中的某个元素指定一个类选择器，类选择器的名字可以用class属性来定义，在类名的前面有一个前缀句点“.”。 例如：在页面中有两种不同样式的段落，一种右对齐，一种左对齐。 p.right {text-align:right } p.left {text-align:left } 在页面中使用定义的样式： p class=“right学校网站开发/p p class=“left学校网站开发/p 5.虚类选择器 对于a标记符,可以用虚类的方式设置不同类型链接的显示方式，所谓不同类型超链接，是指访问过的、未访问过的、激活的以及鼠标指钍悬停于其上的