[计算机软件及应用]css应用.pptVIP

CSS的应用 主要内容 一、理解CSS CSS的简介 CSS构造 CSS的简介 CSS的英文名为Cascading Style Sheet，译成中文的意思为层叠样式表。 样式就是格式，对于网页来说，文字的大小、颜色以及图片位置以及段落、列表等，都是网页显示的样式。层叠就是指当HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优先原则”。 CSS将样式的定义与HTML文件内容分离。只要建立定义样式的CSS文件，并且让所有的HTML文件都来调用这个CSS文件，如果要改变HTML文件中任意部分的显示风格时，只要把CSS文件打开，更改样式就可以了。 CSS构造 构造样式规则 样式表的每个规则都有两个主要部分：选择符（selector）和声明（declaration）。选择符决定哪些网页元素受到影响，声明由一个或多个属性值对组成。 基本语法： selector{属性:属性值[[;属性:属性值]…]} 语法说明： selector表示希望进行格式化的元素； 声明部分包括在选择符后的大括号中； 用“属性:属性值”描述要应用的格式化操作； 声明中的多个属性值对之间必须用分号隔开。 定义选择符 选择符决定了样式将应用于哪些元素。最简单的选择符可以对给定类型的所有网页元素进行格式化，更复杂的选择符可以根据元素的class或id来应用格式化规则。 因此选择符通常有三种方式：标记、class、id 1、按照标记名称选择元素 选择要格式化的元素可以通过元素的HTML标记。例如，可以让所有p元素显示为红色、且大小为30像素。 下面的示例中除非指定其他情况，指定的所有元素（这里是标记p）都将被格式化。 1.html 2、使用class作为选择符 使用class作为选择符，也称为类别选择符，该选择符的名称是可以用户自定义的。属性和属性值的设置与前面的标记选择符是一样的。 类别选择符的使用更加灵活，如可以让相同的Html标记元素实现不同的效果，也可以让不同的Html标记实现相同的效果。 2.html 3.html 4.html 3、使用id作为选择符 Id选择符的使用方法与class选择符的使用方法类似，在语法格式上稍有不同。 注意：ID选择符最好只用于一个标记，即只使用一次，因为javascript语言可以通过ID获取网页元素的值，如果将ID选择符用于多个标记则容易引起错误。另外ID选择符不支持像class那样多种样式同时使用。 5.html CSS的继承性 继承 继承是CSS的一个主要特征，许多CSS属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。 6.html 可以为CSS样式添加注释 在样式规则中添加注释 在样式表规则中添加注释有助于记住复杂的样式规则的作用，应用的范围等，便于进行维护和应用。例如，下面是一个添加注释的样例。 /*此标记应用在文档中*/ h1{color:red;background:yellow;} 实际操作 介绍在Dreamweaver中如何定义样式和使用样式 注意在定义id选择符时要加# 号 二 CSS样式在网页中的使用 在CSS里可以使用四种不同的方法，将样式表的功能加到网页里。 1、直接定义标记的style属性 2、定义内部样式表 3、嵌入外部样式表 4、链接外部样式表 1、定义标记的style属性 将CSS样式定义在HTML标记内的，这是最简单的样式定义方法。 基本语法： 标记 style=样式属性:属性值;样式属性:属性值;… 语法说明： 标记：HTML标记，如body、table、p等； 标记的style定义只能影响标记本身； style的多个属性之间用分号分割； 标记本身定义的style优先于其他所有样式定义。 7.html 2、定义内部样式表 内部样式表允许在所应用的HTML文档的顶部设置样式，后在整个HTML文件中直接调用使用该样式的标记。 基本语法： style type=text/css!--选择符1（样式属性：属性值；样式属性：属性值；……）选择符2（样式属性：属性值；样式属性：属性值；……）选择符3（样式属性：属性值；样式属性：属性值；……）……选择符n（样式属性：属性值；样式属性：属性值；……）--/style 前面从1到6.html文件都是这种方式 定义内部样式表 语法说明： style元素是用来说明所要定义的样式，type属性是指style元素以CSS的语法定义； !--…… --隐藏标记：避免了因浏览器不支持CSS而导致错误，加上这些标记后，不支持CSS的浏览器，会自动跳过此段内容，避免一些错误