CSS样式表基础攻略要点.pptVIP

Web标准的构成 三大部分组成的标准集： 结构（Structure）--XML、XHTML、HTML 表现（Presentation）--CSS 行为（Behavior） -- DOM 、 JavaScript Html与样式表的关系图 Web标准的好处 表现与内容分离技术是目前Web标准制定的核心目的。 内容：指具体的信息，仅仅表示信息正文。正文通过XHTML结构化语言被标记为各个独立的部分，如左分栏、右分栏等。 表现：指信息的展示形式，如字号、字体、排版的设计等。 CSS的概念及版本 CSS中文翻译为“层叠样式表”，简称样式表。 CSS1 :1997年 CSS2 :1998年5月 CSS3 :2005年12月 CSS的样式规则 CSS的定义是由三个部分构成： 选择符（selector） 属性（properties） 属性的值（value）。 基本格式如下： 选择符 {属性：值；}  (单一选择符的复合样式声明应该用分号隔开 ） 　选择符 { 属性1: 值1; 属性2: 值2 ；} CSS位置与写法 1.页面内 style type =“text/css”…/style 2.标记内 style =“color:blue” 3.文件外调用（后缀名为.css） link rel =“stylesheet” href =“style.css” type=“text/css” CSS语法结构-类型选择符 指网页中已有的标签名作为名称的选择符，body是网页中的一个标签，p也是。因此以下的选择符都是类型选择符。 body{} p{} CSS语法结构-群组选择符 除了可以对单个XHTML对象进行样式指定外，同样可以对一组对象进行相同的样式指派，例如： h1,h2,h3,p { font-size:12px; font-family:arial } 使用逗号对选择符进行分隔。 CSS语法结构-包含选择符 1.包含选择符指选择符组合中前一个对象包含了后一个对象，对象之间使用空格作为分隔符。 例如：h1 span{......} 2.包含选择符除了可以二者包含，也可以多级包含： 例如： body h1 span {......} CSS语法结构-id及class选择符 id及class均是CSS提供自定义标签名称的选择符。对于id与class而言，id的定义优先于class的定义。 1.id选择符使用#符号进行标识（#content{......}）; 2.class在CSS中使用点符号加上名称的形式定义(.p1{......})。 CSS选择器--ID选择器 #id color: yellow; font-size: 30px; { } ID选择器 属性 值 属性 值 声明 声明 CSS选择器--伪类选择器 用于超链接标记 a:link { font-size: 9pt; color: black; text-decoration: none;}a:visited { font-size: 9pt; color: black; text-decoration: underline;}a:hover { font-size: 9pt; color: green; text-decoration: none;}a:active { font-size: 9pt; color: blue; text-decoration: none;} 样式优先权问题-样式继承 XHTML中的子标签会继承部分父标签的样式特征 例如：定义body{color:red;}，那么页面中body之下所有的标签及标签下的所有子标签的文本都将变为红色。 样式优先权问题-!important 在两行相同类型的CSS样式定义中，往往优先执行后面一个，可以通过!important语法，提升某一句样式表的重要性，使其优先执行。 !important标注的语句：该body背景色为红色 body{ background-color:red;!important background-color:blue; } DIV标记 DIV是一个XHTML所支持的标签，是XHTML中指定的、专门用于布局设计的容器对象。 用法 div id=“id名”[…]/div div class=“class名”[…]/div 说明 div是一个block对象—块对象（或者块级元素）。 盒模型详解（Box Model） 盒模型是CSS中的一个核心概念。由于浏览器设计的原因，在不同的浏览器下面，盒模型的实际表现不一样。 什么是盒模型 盒模型是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。无论任何布局，它们都