第6章_CSS样式表.pptVIP

第6章 CSS样式表 主要内容 6.1 CSS样式表概述 6.2 CSS样式表的应用 6.3　CSS样式表基本语法 6.4　CSS选择器 6.5　CSS使用方法 6.6 实例——使用CSS样式控制页面 6.7 DIV+CSS布局 6.1 CSS样式表概述 CSS样式表的适用场合 保证一个网页上相同要素具有一致的风格，可以使用CSS样式表 为了保证同一个网站上多个网页风格一致，使这些网页上相同要素具有相同的样式 通过CSS样式定义DIV标签，实现网页布局设计 多个网页上存在多个方框或边框要求样式一致 CSS样式表应用举例 【实例1】通过CSS样式表控制主页中字体及超级链接样式 【实例2】使用CSS样式表为多个网页设置相同的样式 6.2 CSS基本语法 CSS的基本语句的结构是这样的： 选择器{属性：属性值} CSS就是由3个基本部分组成――“选择器”、“属性”和“属性值”。 CSS的核心思想就是首先指定对什么“选择器”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。 6.3 CSS选择器 在CSS的3个组成部分中，“对象”很重要，它指定了对哪些页面元素进行设置。因此它有一个专门的名称—选择器。 选择器是CSS中很重要的概念，所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。 在CSS中，有几种不同类型的选择器。 基本选择器有标记选择器、类别选择器、ID选择器3种。 6.3.1 标记选择器 一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。 因此每一种HTML标记的名称都可以作为相应的标记选择器的名称。 例如P选择器就是用于声明页面中所有P标记的样式风格。 h1{ color: blue; font-size: 60px; } 6.3.2 类别(class)选择器 标记选择器一旦声明，那么页面中所有的相应标记都会相应地产生变化。 class选择器的基本语法 .对象名 {属性：属性值} class选择器的引用 所以的HTML标记中都有一个属性是class，只需给相应标记的class属性进行声明即可。 在实际制作中，有时会将两种或两种以上的样式运用到一个标记中，在这里可以给一个标记运用多个class选择器。 6.3.3 ID选择器 ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次。 在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器。 ID选择器的基本语法 #对象名 {属性：属性值} 6.4 CSS的使用方法 如何在HTML中使用CSS，包括行内式、内嵌式、链接式、导入式。 6.4.1 行内式 行内式是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。 例如p style=“color:#ff0000;font-size:20px;” 欢迎/p 6.4.2内嵌式 内嵌式样式表就是将CSS写在head与/head之间，并用style和/style标记进行声明。 可以看出所有CSS的代码被集中在了同一个区域，方便了后期的维护。 style type=text/css h1 { color: #FFFFFF; background-color: #0000ff; text-indent: 2em; padding: 15px; } /style 6.4.3链接式 链接式CSS样式是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便。 语法： head link href=“02.css” type=“text/css” rel=stylesheet /head type属性用于指定媒体类型。text/css是一个层叠样式表 rel属性用于定义连接的文件和HTML文档之间的关系。 6.4.4导入式 例如： head style type=“text/css” @import 02.css; /style /head 6.4.4 导入式 导入式样式表与链接式样式表的功能基本相同，只是语法和运作方式上略有区别。导入式是在HTML文件初始化时被导入到HTML文件内，作为文件的一部分采用import方式导入样式表。 常用的方法如下： @import url(“sheet.css”); @import url(sheet.css); @i