CSS教程之甚么是DIV＋CSS？有哪些上风？

接下来我们模仿这个盒子做个简单的模型将以下内容拷贝至记事本中，后缀名改为html即可。

• 
  
• 
  

关于老手或进门者来讲，常常会有这几方面的疑问：

• 甚么是DIV＋CSS？本色是甚么？
  
• DIV+CSS的上风安在？
  
• 老手进修div＋css，该怎样进门？
  
• 利用甚么软件来结构页面和编纂css呢？
  
• 能不克不及供应几个实例详细解说一下怎样来完成？
  

诸云云类的成绩，是老手们最常问的。回覆这些成绩，也是仁者见仁，智者见智了。不外从严厉的角度来说，div＋css的叫法是不合错误，只不外像我们这些菜鸟级的都如许叫，习气了罢了。
1、那末DIV＋CSS是甚么意义呢？本色是甚么？
要弄懂这个意义，起首你要对网页有必定懂得，对和div绝对的table结构有很好的熟悉，如许了解起来就不难了。
DIV+CSS是网站尺度（或称“WEB尺度”）中经常使用的术语之一，一般为了申明与HTML网页计划言语中的表格（table）定位体例的区分，由于XHTML网站计划尺度中，不再利用表格定位手艺，而是接纳DIV+CSS的体例完成各类定位。用div盒模子布局给各部份内容分别到分歧的区块，然后用css来界说盒模子的地位、巨细、边框、表里边距、分列体例等。
CSS是英语CascadingStyleSheets（层叠款式表单）的缩写，它是一种用来体现HTML或XML等文件式样的盘算机言语。在我们用table结构时，都曾打仗和使用到css。
DIV元素是用来为HTML文档内年夜块（block-level）的内容供应布局和背景的元素。DIV的肇端标签和停止标签之间的一切内容都是用来组成这个块的，个中所包括元素的特征由DIV标签的属性来把持，大概是经由过程利用款式表格局化这个块来举行把持。
复杂地说，div用于搭建网站布局（框架）、css用于创立网站体现（款式/丑化），本色即便用XHTML对网站举行尺度化重构，利用CSS将体现与内容分别，便于网站保护，简化html页面代码，能够取得一个较优异的网站布局便于往后保护、协同事情和搜刮引擎蜘蛛抓取。
固然不是一切的网页都必要用div结构，比方数据页面、报表之类的页面的时分仍是会用table，web尺度里并没有说要摒弃table。所谓DIV+CSS结构的叫法让人更加忧虑，不要让DIV成为Table的替换品，多层嵌套的DIV会严峻影响代码的可浏览性，活用HTML为我们供应的标签吧。
2、DIV+CSS的上风安在？
1：体现和内容相分别
将计划部分剥离出来放在一个自力款式文件中，HTML文件中只寄存文本信息。切合W3C尺度，微软等公司均为W3C撑持者。这一点是最主要的，由于这包管您的网站不会由于未来收集使用的晋级而被减少。
2：进步搜刮引擎对网页的索引效力
用只包括布局化内容的HTML取代嵌套的标签，搜刮引擎将更无效地搜刮到你的网页内容，并大概给你一个较高的评价。
3：代码简便，进步页面扫瞄速率
关于统一个页面视觉效果，接纳CSS+DIV重构的页面庞量要比TABLE编码的页面文件容量小很多，代码加倍简便，前者一样平常只要后者的1/2巨细。关于一个年夜型网站来讲，能够节俭大批带宽。而且撑持扫瞄器的向后兼容，也就是不管将来的扫瞄器年夜战，成功的是IE7大概是火狐，您的网站都能很好的兼容。
4：易于保护和改版
款式的调剂加倍便利。内容和款式的分别，使页面和款式的调剂变得加倍便利。你只需复杂的修正几个CSS文件就能够从头计划全部网站的页面。如今YAHOO,MSN等国际流派网站，网易，新浪等国际流派网站，和支流的WEB2.0网站，均接纳DIV+CSS的框架形式，加倍印证了DIV+CSS是局势所趋。
3、老手进修div＋css，该怎样进门？
进修任何器材都是一样，从小学、中学、年夜学，除进修常识外就是往进修办法！要想学好网页尺度化结构，要先屏弃传统的table结构时构成的流动头脑体例，用div结构，从内容动身。并且必需要对html标签有很好的熟悉，最少见了要晓得它怎样用，干甚么的。由于一个款式它是不成能离开HTML页面的，HTML不与款式分离的话,CSS就得到了存在的意义。接上去就是css了，必需能写出经常使用css的款式。
进修体例能够从网上找如今的教程或材料学，如本站2010年9月新增的《十天学会web尺度（div+css）》、6月新增的《老手罕见成绩系列视频教程》和之前的CSS网页结构低级进门教程、DIV+CSS网页计划视频教程（后边两系列有点老，倡议进修前边的），都长短常不错的教程，信任经由过程这一系列的进修，你就能够很快进门了。
别的保举几本书：《CSS威望指南》《网站重构》《网站结构实录》《HTML参考年夜全》。浏览一本书，一样平常来讲第一主要先把全部书通读一遍，不睬解的也要往下看，在往下看的过程当中你大概会找到谁人成绩的谜底。看完后你有一个也许的印象，但必定有良多不分明的中央，不妨，持续往下看。第二遍你就要边看边做进修条记了，把你以为是重点的部分写上，另有，你以为有疑问的部分也要记下，带着疑问看下往，假如没有谜底，你能够往BBS上发一个贴子，好意人仍是良多的，提醒一句：“必定要学会怎样往问成绩!”。你还要上机往实习书上的例子，最使你狐疑的：“一是记不住，二是对观点的了解有误(这一条多是书译的欠好，别的就是你的了解不合错误)”，关于第一条你就要建立信念，保持再保持下往。当你抵达尽头时你回发明统统都是水到渠成的事。由于你勉力了，勉力了就会有报答，有了局。
4、利用甚么软件来结构页面和编纂css呢？
关于这个成绩，只需已能到达会手写的水平，用甚么软件都能够，好比记事本。关于老手来讲保举利用Dreamweaver（本站主页供应有下载出口）、微软出的FrontPage的替换品MicrosoftExpressionWeb或TopStyle。
5.能不克不及供应几个实例详细解说一下怎样来完成？
关于实例方面，本站推出一篇具体的从制造最终效果、页面切割、div结构、css定位丑化等从头至尾的具体教程：http://www.ckuyun.com/div_css/911.shtml，共分三篇，但愿对人人有所匡助。假如间接进修这篇文章有点难，那末就从《十天学会web尺度（div+css）》的第一天入手下手进修哟！
外补丁margin呢，它代表了DIV(盒子)和DIV(盒子)之间的距离，而内补丁padding则是大盒子(DIV)和里面的盒子(DIV)的距离(盒子(DIV)里面可以放盒子(DIV)哦)。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。