文档介绍：XHTML+CSS页面布局教程
知识篇
你必须知道的知识
[知识一] DIV+CSS的叫法是不准确的
在整个教程的最前面必须先给大家纠正一个错误,就是“DIV+CSS”!
“DIV+CSS”这种叫法其实是一种不准确的叫法,是国人给这种布局标准页面的方法起的名字,是对技术理解不够透彻导致的,而标准的叫法是什么呢?
呵呵,没错,是xHTML+CSS!
为什么国人将这种布局标准页面的方法叫做DIV+CSS?
因为第一个将这种技术引进中国的人,对这门技术理解不够透彻,单纯从代码上辨别过去的页面布局方法和现在流行的页面布局方法,认为过去布局页面用的是Table,称之为“Table+CSS”,而现在布局页面呢,用DIV,所以叫DIV+CSS。
听起来也挺合理,岂不知这种叫法误导了绝大部分的网页开发者,认为这样布局出来的页面也就是标准页面,就是符合W3C标准的页面,更甚者走了极端,看到网站上用到Table,就会嘲笑页面做的不够标准,结果用不用Table成为了判定页面是否标准的关键点。还有另外一种极端,将页面中用到的标签全部换做DIV,那就更是大错特错了。
[知识二] DIV+CSS将你引入误区
“DIV+CSS”叫法将网页制作者引入两大误区
【误区一】网页中用了Table,页面就不标准,甚至觉着用Table丢人,Table成为了判定页面是否标准的关键点。
【误区一】认为网页中的DIV标签用的越多越好,甚至有人将页面中所有的标签都替换为DIV,DIV的多少,决定页面标准的程度。
为了能够避免大家进入误区,必须要了解“Table”和“DIV”这两个网页元素诞生的目的,
首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构,两者有不同的工作职能,当我们存储数据的时候用Table是最方便快捷的,的一个主题页面“浏览器大全”,
地址是:?mod=topic&topicid=6,
这个时候肯定用Table最合适了,而表格外面组成页面结构的部分当然用DIV了,这是由他们两个诞生的目的决定的,也是符合W3C标准的, 那么这个页面就是标准页面。
既然是标准页面,标签各干各的活“各司其职”,Table就用来存储数据,怎么用Table就丢人了呢?怎么就不标准了呢?DIV就用来构架页面结构,怎么会用的越多越标准呢?归根结底就是“DIV+CSS”的叫法导致。
[知识三] 什么是W3C?
我们平时说的W3C,其实是World Wide Web Consortium的缩写,中文是W3C组织或者万维网联盟,W3C这个组织做什么的呢?很简单,就是出网页标准的。那么有W3C组织出的标准就被称为W3C标准,那么符合W3C标准的页面就是标准页面了,好,问题来了~
什么是W3C标准?
【注意】下面对W3C标准的解释,需要理解一下,因为在很多Web前端开发工程师面试的时候会遇到这方面的问题,很多企业在面试一些Web前端技术人员的时候,认为如果连什么是W3C都不知道,那做出来的页面肯定就不能够符合W3C标准,所以要求大家留意下!
W3C标准不是一个标准,而是一系列标准的集合,包含三部分的标准:结构标准、表现标准和动作标准。与结构标准对应的代表语言是xHTML,与表现标准对应的代表语言是CSS,与动作标准对应的代表语言是JavaScript。
当我们将一个成品的网页设计制作成一个静态页面的时候,就要符合前面两种标准,结构标准和表现标准,那么制作出来的页面就是标准页面,用他们相对应的语言来描述这种制作标准页面的技术我们就称之为“xHTML+CSS”!
【总结】知识一、知识二、知识三是大家必须知道的,知道了这些无论去面试还是和其他人沟通,都会让对方感觉你这个人很专业,对技术理解很透彻!
基础篇
你必须掌握的基础
本节主要讲解,两个内容:
第一:CSS如何控制页面样式,有几种样式;
第二:这些样式出现在同一个页面时的优先级。
使用xHTML+CSS布局页面,其中有个很重要的特点就是结构与表现相分离,结构指xHTML页面代码,表现就是CSS代码了,如果把一个网页看成穿着衣服的人的话,人就是xHTML,是结构,而衣服呢就是CSS,是表现,现在出现的问题是,如何让CSS去控制页面?或者说,如何让衣服穿在人身上;不同的CSS就可以使页面出现不同的风格适用不同的网站,而不同的衣服,人穿上后就会体现出不同的职业。
[知识一] CSS如何控制页面
第一:如何让CSS去控制HTML页面?
有4种样式(方式),行内样式、内嵌样式、链接样式、导入样式
1)行内样式
行内样式是4种样式中最直接最简单的一种,直接对HTML标签使用style="",例如:
<p style="color:#F00; b