web开发（1）-- 初识div + css引入方式

要有大局观……

没错，茶哥儿不会按着常规套路出牌的，我们web的第一节课就是学习什么是div。

div是我们最常用的标签，没有之一。在HTML的标签中，每一个标签都是有语音的，div的语义就是无意义。

茶哥儿没有那你们开涮，就是这个样子的，div在我们的开发中经常用来划分区域，进行分快处理分块开发。看了下图你就能明白了。

div展示.png

图片就是以我们网的首页为例，这么多元素的页面如果先用div划分大区域的话就是下边的样式，这样看来是不是就很简单了呢？

ok，上代码来看看如何操作div(htm+css)：




    
    Document


     我是一个div

第一个div.png

之前已经说过html和css的关系了（好基友，一辈子），如果单纯写一个div我们是看不到任何东西的（并不是不存在），代码中我们通过加入css样式（div标签中style属性里边写的就是css样式）从而改变了div的大小和背景色，于是我们就看到他了，这里我们使用的是css的行间样式表。

这里我们做个设想：body里边有100个div，要分别赋予宽200px，高200px，背景色是红色。

我勒个去，这是个多么可怕的需求，我们难道要写100个div，再写100变style吗？当然了，如果我们只能使用行间样式表那么肯定是要付出汗水与努力了，然而，我们还有另外两种完美的解决方案：内部样式表&外部样式表。




    
    Document
    


    我是一个div

这个就是内部样式表了，我们在head标签内添加了style标签，在style标签中书写css样式，但是为了找准我们给哪个标签添加让样式，所以我们使用了选择器：div{}，这个叫做标签名选择器，会为相同的标签添加这个样式。ok再来看看外部样式表怎么写：




    
    Document
    >


    我是一个div

这段代码是html文档的，我们在head标签中添加了link标签用来导入外部文件，在这里我们导入了外部的“index.css”文件，看到这里就明白了吧，所谓的外部样式表就是将样式写入到了外部的css文件中，然后通过link导入html文档。来看看index.css：

div {
    width: 200px;
    height: 200px;
    background-color: red;
}

外部样式表与内部样式表写法上是一致的，不同的是引入方式。

如果有一个div，同时有三种样式表为其赋予颜色这个时候div应该用哪个呢？想知道吗，接着看下边的总结。

总结：

创造即永恒，喝茶去……