一CSS概念.doc

备课记录（一）Css基本概念互动教学目标（2分）Css div概念Doc声明XHTML规范基本语法重点标注对css与div的理解提问2至4人问题：1）、 2）、1、 互动2、 鼓励学生操作演示3、 设计题目，学生分组4、 检验学习掌握效果回顾旧知识（2分）复习，提问，测试，演示新课教学（围绕目标展开设计）(4分)l Web标准WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。l Css概念一，CSS（cascading style sheet）中文译为层叠样式表，是用于控制网页样式并允许将样式内容与网页内容分离的一种标记性语言。表现与结构相分离附加解释： css是用于布局和美化网页的。 是一种标记性语言，因此不需要编译，可以直接由浏览器执行。 Css文件是一个文本文件，它包含了一些css标记，必须使用css作为后缀。 对大小写不敏感。 由w3c的css工作组产生和维护的。二，历史。从1990年初HTML被发明开始，样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。随着HTML的成长，为了满足设计时的要求，HTML获得了很多显示属性。如font、b1994年哈根*利提出了css的最初建议。佰特波斯当时正在设计一个叫做argo的浏览器，他们决定一起合作设计css。当时已经有一些样式表的建议了，但css是第一个含有“层叠”的主意的，在css中，一个文件的样式可以以其他的样式表中继承下来，可以在某些地方混合自己爱好灵活假如不同显示属性。1996年底，css已经完成，1996年12月css1出版，1997年初w3c内组织了专门css工作组，负责人是克里斯*里雷。1998年5月css2推出。W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee。 W3C组织是对网络制定标准的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员（大约500名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。l Div XHTMLDiv是HTML中的标签，将div+css说成XHTML+CSS也可以。在XHTML中的任何标签都可以用于浮动与定位，div首当其冲。对于其他标签而言，往往有它自身存在的目的，比如P ul table，而div不赋予任何样式的时候，本身没有任何属性，只是一个块级元素。Div是XHTML中指定的专门用于布局设计的容器对象。XHTML。可扩展的超文本标记语言，是用来代替HTML的，2000年w3c公布发行的，是一种增强了的HTML。l Doctype声明 为何要使用doctype声明？浏览器的发展历程中，微软凭着将IE捆绑进windows系统中，从而成为浏览器市场上的霸主，微软的IE一直只遵循自己的web标记，经常不遵守w3c，由于浏览器不同，造就了对HTML代码默认解析不同，所以即使同样的代码在不同的浏览器下会呈现不同的样式，于是需要一份众浏览器都遵守的规则来协调差异，这个规则需要一个声明来引用它。由它来告诉浏览器如何解析XHTML文档和如何采用统一规则校验。DOCTYPE要写在所有代码之前。DOCTYPE声明是一个兼容标准的网页的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则标记和css样式都不会生效。 如何声明？点此查看l 使用div+css的优点。 表现与结构分离将设计部分剥离出来放在一个独立样式文件中，HTML文件只存放文本信息，这样的页面对搜索引擎更加友好。 提高页面浏览速度对于同一个页面同一的视觉效果，采用div+css布局的页面，容量要比table布局的页面文件容量小很多，浏览器不用去解析大量冗长的标签代码，减轻了浏览器负担。 易于维护和改版只要简单的修改几个css文件就可以重新设计整个网站界面。l 基本语法CSS 语法由三部分构成：选择器、属性和值：selector property: value选择器 (selector) 通常是你希望定义的 HTML 元素或标签属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明;l 如果值为若干单词，则要给值加引号.l 如果要定义不止一个声明，则需要用分号将每个声明分开。l Css作用方式 行内样式。将css样式编码写在XHTML标签中。如：不赞成使用，行内样式仅仅是体现了XHTML标签对style属性的支持，并不符合表现与内容分离的设计原则并且增加带宽，需谨慎使用。 内部样式。可单独针对某一页进行设计，将样式信息放在页面一个固定位置上。一般放在head中。如：!- h1 color:#ffff00;内嵌式不能跨页面执行，因此达不到css代码重用的目的。并不节省带宽，因为用户每次打开新网页必须同时下载新的内部样式。设计师之所以会使用内部样式表的原因：n 站点可能只由一个页面构成n 用户还在使用ie3访问站点（ie3最早开始支持css，不支持外联样式）n 仅为某个页面写额外定义n 设计师不断的修改样式表，并想立即看见效果，即在测试时使用。 外部样式表。是css中最好的一种应用方式，它将css样式代码单独放在一个外部文件中，再由网页进行调用。多个网页可以调用同一个样式表文件，这样能够实现代码的最大限度重用及网站文化的最优化配置。当用户把一个外联样式表下载到缓存中，它依然能控制一个几十个几百个的页面，而不需要另外再加载。所以能提高浏览速度，大大节省用户和服务器带宽。所有支持css的浏览器都支持link法，但import法只在5.0及其以上版本有效，所以可以通过此对4.0隐藏高级样式表。即“双表法”。引用外部样式外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：hr color: sienna;p margin-left: 20px;body background-image: url(images/back40.gif);不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。注意：外部样式表另一种写法：import url（“a.css”）；与link区别：差别1：老祖宗的差别。link属于XHTML标签，而import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，import就只能加载CSS了。 差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用import，一边下载一边浏览梦之都网页时，就会出现上述问题）。 差别3：兼容性的差别。由于import是CSS2.1提出的所以老的浏览器不支持，import只有在IE5以上的才能识别，而link标签无此问题。 差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为imp