网站DIV+CSS教程培训教程X一

　　XHTML CSS基础知识

　　1）文档类型

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题

　　2）语言编码

　　它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。

　　3）html标签

　　html标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。

　　成对的标签：<div>{…}</div> <span>{…}</span><p>{…}</p> ……

　　单一的标签：<img src="" /><br />……

　　4）css样式

　　■外部样式

　　这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。

　　■内部样式

　　<style>

　　h2 { color:#f00;}

　　</style>

　　这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。

　　■行内样式

　　这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。

　　■导入样式

　　@import url（"/css/global.css"）;

　　链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url（"/css/global.css"）的形式链接全局样式，这样就使代码达到很好的重用性。

　　5）css优先级

　　■id优先级高于class

　　■后面的样式覆盖前面的

　　■指定的高于继承

　　■行内样式高于内部或外部样式

　　■总结：单一的（id）高于共用的（class），有指定的用指定的，无指定则继承离它最近的

　　6）css盒模型组成

　　属性名：内容（content）、填充（padding）、边框（border）、边界（margin）， CSS盒子模式都具备这些属性。

　　整个盒模型在页面中所占的宽度是由：左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度

　　■一列固定宽度

　　■一列固定宽度居中

　　■一列自适应宽度

　　■一列自适应宽度居中

　　■一列二至多块布局

　　一列固定宽度

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　#layout { height: 300px; width: 400px; background: #99FFcc; }

　　</style>

　　</head>

　　<body>

　　<div id="layout">此处显示 id "layout" 的内容</div>

　　</body>

　　</html>

　　一列固定宽度居中

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　#layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }

　　</style>

　　</head>

　　<body>

　　<div id="layout">此处显示 id "layout" 的内容</div>

　　</body>

　　</html>

　　一列自适应宽度

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　body { margin:0;}

　　#layout { height: 300px; width: 80%; background: #99FFcc; }

　　</style>

　　</head>

　　<body>

　　<div id="layout">此处显示 id "layout" 的内容</div>

　　</body>

　　</html>

　　一列自适应宽度居中

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　body { margin:0;}

　　#layout { height: 300px; width: 80%; background: #99FFcc; margin:auto;}

　　</style>

　　</head>

　　<body>

　　<div id="layout">此处显示 id "layout" 的内容</div>

　　</body>

　　</html>

　　一列二至多块布局

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　body { margin:0; padding:0;}

　　#header { margin:5px auto; width:500px; height:80px; background:#9F9;}

　　#main { margin:5px auto; width:500px; height:400px; background:#9FF;}

　　#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}

　　</style>

　　</head>

　　<body>

　　<div id="header">此处显示 id "header" 的内容</div>

　　<div id="footer">此处显示 id "footer" 的内容</div>

　　</body>

　　</html>

　　3、CSS语法

　　CSS语法由如下三部分构成，选择器：可以是ID、CLASS或标签；属性和值是用来定义这个物件的某一个特性。如一张桌子的长120cm，宽60cm，套用css的格式为，桌子{长：120cm;宽：60cm;}，

　　4、ID和CLASS选择器

　　id的优先级高于class，比如说今天三班的学生上体育课，小明留下来打扫卫生。那么三班的学生上体育课这是一个类，而小明打扫卫生这是个id，虽然小明也是三班的学生，但id高于class，所以小明执行打扫卫生的任务。

　　■二列自适应宽度

　　■二列固定宽度

　　■二列固定宽度居中

　　■xhtml的块级元素（div）和内联元素（span）

　　■float属性

　　■三列自适应宽度

　　■三列固定宽度

　　■三列固定宽度居中

　　■IE6的3像素bug

　　一、两列自适应宽度

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<style>

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

　　</style>

　　</head>

　　<body>

　　</body>

　　</html>

　　二、两列固定宽度居中

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<style>

　　#content { width:470px; margin:0 auto;}

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }

　　</style>

　　</head>

　　<body>

　　</div>

　　</body>

　　</html>

　　三、xhtml的块级元素（div）和内联元素（span）

　　块级元素：就是一个方块，像段落一样，默认占据一行出现；

　　内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

　　一般的块级元素诸如段落<p>、标题<h1><h2>…、列表，<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如：表单元素<input>、超级链接<a>、图像<img>、<span> …… 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

　　四、float属性

　　<div id="main"> 教程适合初学者循序渐进学习！</div>

　　body { font-size:18px; line-height:200%; }

　　#side { float:left; width:202px;}

　　五、三列自适应宽度

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<style>

　　body { margin:0;}

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

　　#main { background: #99FFFF; height: 300px; margin:0 120px; }