CSS学习篇之——初始CSS+DIV
CSS概述？
CSS是Cascading StyleSheets的英文缩写，英文意思的层叠样式表，它是一种用来表现html货xml等文件样式的一种计算机语言，这种计算机语言可以真正做到网页表现与内容分离的一种样式设计语言。
相对于传统html表现而言，CSS能够对网页中的对象位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步的交互设计，是目前基于文本展示最优秀的表现设计语言。
CSS特点？
CSS样式定于了如何显示html元素，样式通过存在在样式表中，它把样式添加到html中，是为了解决内容与表现分离的问题，外部样式表可以极大的提高工作效率，外部样式表通过存储在CSS文件中，多个样式定义可层叠为一。
CSS怎么使用？
CSS使用方法有三种，分别是外部样式，内部样式表（位于 <head>标签内部和内联样式（在 HTML 元素内部）。
外部样式
外部样式是指将网页链接到外部样式表，当要再站点上所有货部分网页上一致地应用相同样式时，可使用外部样式表。
<head> <linkrel="stylesheet" type="text/css"href="mystyle.css" /> </head>
在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以.css做为文件扩展名，例如 Mystyles.css。然后在需要此样式的页面中将其链接进来
内部样式表
即“嵌”在网页的<HEAD>标记符内。嵌入的样式表中的样式只能在同一网页上使用。
<head>
<title>页面标题</title>
<styletype="text/css">
<!--
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
-->
</style>
</head>
内联样式
即使用在html标记符中的样式，只对当前的html标签起作用
<p style="color:#FF0000;font-size:20px;text-decoration:underline;">正文内容1</p>
CSS与DIV
提到CSS就不能不提到DIV，DIV可以定义文档中的的分区或节，DIV标签可以把文档分割为独立的、不同的部分，它可以用来用作严格的组织工具。当我们把CSS用到DIV中去以后，我们就不但可以严格设定DIV块的位置，还可以利用CSS的优点，特别方便的设置DIV内部的样式，下面我们就讲CSS+DIV优点说下。
精简代码
网站使用DIV+CSS布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。
网页访问速度
使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。
SEO优化
采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
浏览器兼容性
DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。国内主流是ie，firefox及chrome用的较少，在兼容性测试方面，首先需要保证在ie多版本不出现问题，这里涉及到一些方法和技巧，可以针对具体问题在网站查找解决办法。
CSS+DIV网页布局容易出的问题
书写问题
html元素是否有拼写错误及忘记结束标记，div嵌套关系容易混乱，所以需要小心，CSS是否拼写错误，不要忘记结尾的大括号等等，一定要细心。
float问题
利用float出错时，可以为元素添加border书写确定元素边界，这样错误可能容易解决；对float元素的父元素不能指定clear属性，否则会导致周围的float元素布局发生混乱；float元素一定要指定width属性，有些浏览器对于未指定width的float元素有bug，所以不管float元素内容如何，一定要为其指定width属性，另外指定元素宽度是尽量使用em而不是px做单位；float元素的宽度之和一定要小于100%，原因大家应该都清楚。
其它问题
是否重设了默认的样式，某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等，养成一个好的编程习惯；如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。