div+css的学习要点及学习方法

div+css的学习要点及学习方法

css是写前端网页基本上都要用到的知识。一张呈现在你面前的网页其实可以理解为是由很多个小块组成的一个大块，每个小块里面又可以分成很多个小块去处理。而css就是定义这些块的属性，例如一个块里面的图片它应该放的位置、大小等。

了解div

可以将一个网页看成是由很多个div组合成的，例如下图这个简单的网页就是由四个小的div组合成一个大的div，从而组成有个网页。每个div都用css去控制它的属性，那么它就会呈现出我们想要的结果了，可以说精通CSS和DIV的结合运用可以大大提高你的工作效率。

了解网页的基本组合板块

可将一个网页分成3大块去展开自己的设计与排版——头部、中间、底部。头部主要由宣传海报和导航栏组成，海报就是你想宣传的内容，导航栏就是已整个网页的导向。中间主要就是你网页上想实现的内容了，可以将中间部分划分成若干块。底部就是一些声明之类的。使用div+css就可以将网页整个板块大概的样式设计出来了。

Css语法

Css要怎么写呢，怎么识别一条css呢？其实css是有一个特定的语法的。如果你想用div+css的话。就需要提前给div命名。在Dreamweaver中可以新建一个独立的css文件去控制html文件里的div。例如在html文件里设置一个div并class给div命名为header，那么在css文件里就可以设置header的属性。格式为“‘.’+div命名的class名称+‘一对{}（括弧中间就是设置这个div属性的地方）’”class专业的说法是选择器。

Css id 和class选择器

Id也有和class相同的作用就是作为选择器。也就是说，如果html的div文件里出现id=‘名称’那么这个id的css格式为“‘.’+id名称+‘一对{}（括弧中间就是设置这个div属性的地方）’”用id来做悬着器是可以方便以后做表格。如果是在同一个文件里编辑css和html，css可以写成

Css创建

其实前面的几个步骤中，都有所提到css的创建。Css创建的方法分为3种：外部样式、内部样式、内联样式。步骤3说的是一种外部样式，即单独建一个css样式文件与html

文件独立开来，同时步骤3中插入图片的方法属于css的内联样式。步骤4用到的是一种内部样式，机css的参数直接写在html文件里面。一个网页是不单单只有一种样式存在的，什么样式最好表示就用什么样式。

使用css添加背景

网页可以添加一个背景颜色，background-color属性就是添加颜色作为背景的。也可以添加一张图片作为背景。background-image就是用来定义背景图片的。background-repeat即是定义背景图片是重复使用的。背景还有其他的定义规则，如background-attachment、background-position

使用css做表格

使用css和table属性可以大大提高网页的美观程度，其实也就是将div当成是一个个table，然后用css是将这一个个table排版成为一个表格。Table是一张表格，表格里面含有hr和th两种类型的内容。Css其控制这些所有内容该有的行为，例如border（边界）属性为大小1个像素、实线。

Css盒子模型

Css盒子模型的含义就是将所有的html元素看作是盒子。用盒子概念去设计我们的网页。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。不难理解，其实盒子模型就是div理念的升级版（一个div就是一个盒子，盒子里装盒子）。