《网页开发手记》学习笔记之CSS和DIV
web标准是很多表现层技术标准的集合，由W3C制定，所谓表现层技术指网页前端技术，如HTML，XHTML，XML，CSS等。
在编写符合Web标准的网页时应该注意与浏览器的兼容性，因为目前还没有一个浏览器完全支持web标准。
XHTML是HTML的升级，其侧重点是网页的结构设计，其语法严谨，有语义，数据的样式则由CSS完成。XHTML和CSS结合，页面的结构和样式分离，使得代码的重用性提高，更加易于维护。
CSS使用实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>常用接口</title>
<style type="text/css">
#hello{background-color:#cccccc;
width:400px;
height:80px;
}
.reader{font-weight:bold;
color:#ff0000;
}
</style>
</head>
<body>
<div id="hello"><span class="reader">读者</span>，你好！</div>
</body>
</html>
<span>：改变局部
CSS的核心包括有三个：选择符（id,class,p,body等），属性（标签的样式），值。
选择符
标签选择符：p{width:250px}等
id选择符： #hello{background-color:#cccccc;}等
class选择符：.reader{font-weight:bold;}等
伪类和伪对象选择符：a:link a:hover a:active a:visited等
统配选择符：*{width:250px}
可以通过DIV+CSS完成网页的布局，如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>初识div标签</title>
<style type="text/css">
#top,#bt{background-color:#eee;
}
#mid{background-color:#999;
width:250px;
}
#bt{width:120px;}
</style>
</head>
<body>
<div id="top">第1个div标签中的内容</div>
<div id="mid">第2个div标签中的内容</div>
<div id="bt">第3个div标签中的内容</div>
</body>
</html>
让div居中，设置margin-left为auto，margin-right为auto使左外边距和右外边距相等即可：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设置div水平居中</title>
<style type="text/css">
*{margin:0px;
padding:0px;
}
#all{width:75%;
height:200px;
background-color:#eee;
border:1px solid #000;
margin:0px auto;
}
</style></head>
<body>
<div id="all">布局页面内容</div>
</body>
</html>
为了复杂的布局，div可以嵌套：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div嵌套</title>
<style type="text/css">
*{margin:0px;
padding:0px;
}
#all{width:400px;
height:300px;
background-color:#600;
margin:0px auto;
}
#one{width:300px;
height:120px;
background-color:#eee;
border:1px solid #000;
margin:0px auto;
}
#two{width:300px;
height:120px;
background-color:#eee;
border:1px solid #000;
margin:0px auto;
}
</style></head>
<body>
<div id="all">
<div id="one">顶部</div>
<div id="two">底部</div>
</div>
</body>
</html>
每个div是独占一行的，可以设置它为浮动的，让多个div共占一行：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>右边div元素宽度自适应</title>
<style type="text/css">
*{margin:0px;
padding:0px;
}
#one{width:70%;
height:200px;
background-color:#eee;
border:1px solid #000;
float:right;
}
#two{width:50px;
height:200px;
background-color:#eee;
border:1px solid #000;
float:right;
}
</style></head>
<body>
<div id="one">第1个div</div>
<div id="two">第2个div</div>
</body>
</html>
文本段落的排版：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>段落样式1</title>
<style type="text/css">
*{margin:0px;
padding:0px;}
#all{width:500px;
height:200px;
margin:0px auto;
padding:5px;
background:#eee;}
h3{text-align:center;}
#author{font-size:14px;
text-align:right;
margin:10px;}
.content{font-size:12px;
text-indent:2em;}
p#a:first-letter{font-size:2em;
float:left;}
#a{font-size:12px;}
</style>
</head>
<body>
<div id="all">
<h3>鸟的天堂</h3>
<p id="author">作者：巴金</p>
<p id="a">我们在陈的小学校里吃了晚饭。热气已经退了。太阳落下了山坡，只留下一段灿烂的红
霞在天边，在山头，在树梢。“我们划船去！”陈提议说。我们正站在学校门前池子旁边看山景。</p>
<p class="content">“好，”别的朋友高兴地接口说。</p>
<p class="content">我们走过一段石子路，很快地就到了河边。那里有—个茅草搭的水阁。穿过水阁，在河
边两棵大树下我们找到了几只小船。</p>
<p class="content">我们陆续跳在一只船上。一个朋友解开绳子，拿起竹竿一拨，船缓缓地动了，向河中间
流去。</p>
<p class="content">三个朋友划着船，我和叶坐在船中望四周的景致。</p>
</div>
</body>
</html>
其中，text-indent:2em;表示段落的首行空出两个字的距离。以下是设置行间距和字间距：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>段落样式2</title>
<style type="text/css">
*{margin:0px;
padding:0px;}
#all{width:500px;
height:300px;
margin:0px auto;
padding:5px;
background:#eee;}
h3,h5{text-align:center;
margin:5px;}
#author{font-size:14px;
text-align:right;
margin:10px;}
p{font-size:12px;
text-indent:2em;
margin-top:20px;}
#a{line-height:2em;}
#b{letter-spacing:5px;}
#c{word-spacing:12px;}
</style>
</head>
<body>
<div id="all">
<h3>万水千山走遍</h3>
<p id="author">作者：三毛</p>
<h5>大蜥蜴之夜</h5>
<p id="a">当飞机降落在墨西哥首都的机场时，我的体力已经透支得几乎无法举步。长长的旅程，别人睡觉，我一直在看书。眼看全机的人都慢慢的走了，还让自己绑在安全带上。窗外的机场灯火通明，是夜间了。</p>
<p id="b">助理米夏已经背着他abc的东西在通道边等着了。经过他，没有气力说话，点了一点头，然后领先出去了。我的朋友约根，在关口里面迎接，向我高举着手臂。我走近他，先把厚外套递过去，然后双臂环向他拥抱了一下。他说："欢迎来墨西哥！"我说："久等了，谢谢你！"这是今年第四次见到他，未免太多了些。</p>
<p id="c">Hello,How are you?</p>
</div>
</body>
</html>
图形和文字的排版：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图文混和排版</title>
<style type="text/css">
*{margin:0px;
padding:0px;}
#all{width:600px;
height:600px;
margin:0px auto;
padding:10px;
background:#eee;}
h2{text-align:center;}
#author{text-align:right;}
p{font-size:12px;
text-indent:2em;}
#a{text-align:center;}
#a h5{margin:5px;}
#b{width:150px;
float:left;}
#img1{float:left;
margin:12px;}
</style>
</head>
<body>
<div id="all">
<h2>白杨礼赞</h2>
<p id="author">作者：茅盾</p>
<p>白杨树实在不是平凡的，我赞美白杨树！<br />当汽车在望不到边际的高原上奔驰，扑入你的视野的，是黄绿错综的一条大毯子；黄的，那是土，未开垦的处女土，</p>
<div id="a"><img src="img/img.jpg" width="150" height="122" /><h5>秋天美景图</h5></div>
<p id="b">几百万年前由伟大的自然力所堆积成功的黄土高原的外壳；绿的呢，是人类劳力战胜自然的成果，是麦田，和风吹送，翻起了一轮一轮的绿波─—这时你会真心佩服昔人所造的两个字“麦浪”，若不是妙手偶得，便确是经过锤炼的语言的精华。</p>
<img src="img/img.jpg" width="150" height="122" id="img1" />
<p>黄与绿主宰着，无边无垠，坦荡如砥，这时如果不是宛若并肩的远山的连峰提醒了你（这些山峰凭你的肉眼来判断，就知道是在你脚底下的），你会忘记了汽车是在高原上行驶，这时你涌起来的感想也许是“雄壮”，也许是“伟大”，诸如此类的形容词，然而同时你的眼睛也许觉得有点倦怠，你对当前的“雄壮”或“伟大”闭了眼，，而另一种味儿在你心头潜滋暗长了──
“单调”！可不是，单调，有一点儿罢？<br />
然而刹那间，要是你猛抬眼看见了前面远远地有一排，──不，或者甚至只是三五株，一二株，傲然地耸立，象哨兵似的树木的话，那你的恹恹欲睡的情绪又将如何？我那时是惊奇地叫了一声的！<br />那就是白杨树，西北极普通的一种树，然而实在不是平凡的一种树！ </p>
</div>
</body>
</html>
哎，DIV和CSS真是博大精深啊。