标签：
上节课我们说到了标签以及标签的属性
比如一个div标签，它的属性有width height background对吧？
也就是
<div width="100px" height="100px" background="red"></div>
如果你的回答是对
那么恭喜你，你已经学晕了
上面这段代码是错误的
div下辈子也不会有width height background这些属性的
上节课，关于div，我们只说了它的一个属性，就是style
style里面放的才是width height background这些东西
我们可以把这些东西理解为style下的分属性
正确的写法应该是
<div style="width:100px; height:100px; background:red;"></div>
好了，为了给大家提提神
特意准备了这个小礼物，接下来开始上正菜
上面的div呢，我们给它在style里面设置了一些宽、高、背景之类的样式，它就能按照我们设置的去显示
如果我又来了一个div，希望它宽200 高200 背景绿色，那么我们就需要这样写
<div style="width:200px; height:200px; background:green;"></div>
我们知道一个div就在网页上代表一块儿内容，而我们平时上网相信大家也都看到过
一个网页可不是一块儿两块儿构成的
事实也是如此，一张网页通常是由div来划分它的结构的，而且div之间还可能存在很复杂的嵌套关系，比如
<div> <div> <div></div> </div> <div> <div> <div></div> </div> </div> </div> <div> <div></div> </div>
而且有的块儿外表(width height background)是一样的，只是内容可能稍有差别
但不管怎么样，我们不得不给每个div后面都加上style="width:100px; height:100px; background:red;"
等等很长一串东西
是不是很麻烦？
说到这里的话，我们就可以郑重的告诉大家，div的style属性里面的内容就是css
所谓css，中文翻译过来就是层叠样式表(Cascading Style Sheet)
样式可以很容易理解，层叠又是怎么一回事呢？
关于这个概念，我们稍后再做解释，而且这个概念需要随着css的学习来慢慢体会
回到刚才的style上，因为我们感觉在style里面写那么一长串的width height background的css代码不仅非常麻烦
而且特别不好看，本来复杂的div嵌套结构，再加上一大坨style就更难分辨了
所以，我们就又想出了其他给标签加css样式的方法：
上节课的时候稍微提到一点，我们head标签里面的style标签就是放css代码的
按照这个思路来，我们在页面中可以只写一个div标签，在我们的head里面新加一个style标签
现在代码应该变成了这样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> </style> </head> <body> <div></div> </body> </html>
我们心里应该大概知道style里面要为div写width height background这些东西
那这些东西在style里面具体应该怎么写呢？
这就涉及到css的语法了
css里面设置样式都是一条一条来写的，每一条的格式大概如下：
选择器{ 样式名:样式值; 样式名:样式值;...}
这里又冒出一个概念：选择器，暂时先把它理解成标签名吧，稍后再做详细解释
例如，我们要给div设置样式，按照上面的规则就要写成
div{width:100px;height:100px;background:red;}
在这里先说明一个细节
为了增强程序的可读性，我们通常会在每条样式之间加一个空格，所以就变成了这样：
div{ width:100px; height:100px; background:red; }
这个时候再次预览，宽100 高100 背景红色的一个div就显示出来了
但是，如果我页面里面又来了一个div，想要让它的宽200 高200 背景绿色，该怎么做呢？
在这条样式的后面再加上一条css吗？就像这个样子:
div{ width:100px; height:100px; background:red; } div{ width:200px; height:200px; background:green; }
稍微有些常识的人都能看出来这肯定不行
下面的这条一定会将上面的那条覆盖了，因为我们的css还不至于智能到自动识别第一条给第一个div设置，第二条给第二个div设置
所以一定要想个办法来标识每个div
css为我们提供了两种标识的方法
我们先来介绍第一种，就是id标识
具体怎么做呢？我们在HTML中可以给div加一个名为id的属性
<div id="aaa"></div>
<div id="bbb"></div>
而在css中可以这样写
#aaa{ width:100px; height:100px; background:red;} #bbb{ width:200px; height:200px; background:green;}
我们可以看见，前面的选择器变成了井号加了对应的id属性名，后面大括号里面的内容照常
再预览，就是一个红，一个绿了
可能和你想像中显示的效果稍微不太一样，你可能想着两个div会排成一排来显示对吧？呵呵，这个问题比较复杂，得等到下节课说
需要说明的一点就是我们的id属性的值，是你自己定义的，爱叫什么就叫什么，上面叫aaa bbb，你自己也可以不叫这个，都无所谓
但是不要以数字开头，例如#3a这种id是非法的，包括下面即将介绍到的class选择器也是一样的
此外也不要闲的蛋疼在名字里面包含一些逗号 句号 省略号 反斜杠等等乱七八糟的东西
好了，到目前为止，我们已经说了两种选择器了————元素选择器和id选择器
够了吗？你可能感觉够了，挺好的
接下来我们再说一种情况：有一家婚庆公司的主页，全都是红色的风格，也就是说页面里大块儿小块儿都是红色背景，但是尺寸肯定不能一样
否则的话，就跟咱家里的砖头一样排列的整整齐齐，太死板了
肯定有人就会想，这还不简单，直接上代码
//第一个块儿宽100 高100
#div1{ width:100px; height:100px; background:red;}
//第二个块儿宽200 高200 #div2{ width:200px; height:200px; background:red;}
//第三个块儿宽100 高200
#div3{ width:100px; height:200px; background:red;}
...
但是我们需要考虑一个问题，页面当中有这么多的块儿，都写了一遍背景为红色
万一哪一天需要把红色变成粉红色pink
好的，从头开始将所有的background改为pink
更有甚者，如果有的地方需要改成红的，有的地方需要改成粉红的，你还需要看一看前面的id，再去页面里面对应的找一找这个id对应哪个div
是不是需要改 等等等等一系列很恶心的事情
最不幸的是，可能当你改完了之后老板说，粉红色显得有点忧郁，咱还是改成原来的红色吧
这个时候估计你想死的心都有了
所以接下来我们引入下一种选择器，类选择器
顾名思义，类选择器是给一类元素设置样式的
直接上代码说明：
HTML：
<div id="top" class="bg-red"></div> <div id="middle" class="bg-red"></div> <div id="bottom" class="bg-red"></div>
css：
#top{ width:100px; height:100px;} #middle{ width:200px; height:200px;} #bottom{ width:100px; height:200px;} .bg-red{ background:red;}
好的，对比上面两种写法，我们可以发现有两点主要区别
一种就是我们除了定义了三个id之外，还定义了一个class
在css中我们可以看到，在这个class类名前面多加了一个点
这个点就代表后面是一个类名
和井号代表后面是一个id是一样的道理
此外由于我们可以自己定义id和class的名字
所以我们的id和class的名字也不是一拍脑子想出来的div1 div2 div3
而是根据元素的位置来命名，所以写成了top middle bottom
这样即使将来需要修改，我们一看名字就知道哪个对应页面上哪个东西
当然我们这里是按照位置来定义名字的，实际开发中
每个公司和每个公司规定不太一样，大家按照公司要求来就行
好的，名字的问题现在简单扯了扯
如果希望界面风格变的话直接将bg-red类里面的background样式的值改成pink即可
如果老大发神经又要改回来，就给他改回来就好了
好的，以上我们讨论的是若干块儿颜色一样，而尺寸不一样的情况
接下来考虑一种尺寸一样，风格一致的情况
例如我们打开优酷，打开淘宝的首页看一下
会发现优酷里面又很多视频列表，那一块儿一块儿的，长的特别像
淘宝里面的商品列表，一块儿一块儿的，长的也特别像
按照我们现在已有的东西，要创建这样一个列表需要写成
HTML：
<div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div>
css：
.item{ width:200px; height:100px; border:1px solid black;}
注意这里，我们又看到了一个新的样式——border边框
虽然是新样式，但是大家想必也能看懂，粗细为1px，solid就代表实线，线的颜色为黑色
这次为什么没有写background呢？大家不妨改成background再预览看看怎么回事
这次我给大家贴一张浏览器中显示的图出来
看到这样的结果可能你会说，挺好啊，用了一个公共类item来控制list的风格，是，没错
现在我需要实话实说的告诉大家
把本套课程学完之后，一个页面理论上只需要div一种标签就能将所有的东西都能非常完美的展现出来，通过加上各种id class等等
但是大家可以想到这样的页面将会多么壮观
看一看源代码，全都是div
如果网页上某个地方是一排连续的块儿，里面放着各种各样的内容，当我希望修改一下这排连续块儿的样式的时候
找到这些块儿上面的class，再去修改，现在问题来了，所有的标签都是div，这么多标签，该从哪儿找起呢？
所以我们写html页面的时候通常就会这样来：
页面的大标题用h1或h2标签，页面里面如果有一段一段文字，就用p(paragraph)标签，如果有链接，就用a标签
如果是和我们这里一样的很多尺寸一样，但是内容不同，好像列表一样的一系列块儿，就用ul和li
ul的意思就是unordered list，li的意思就是list，这对儿标签的具体用法如下：
html:
<ul class="video-list"> <li>video1</li> <li>video2</li> <li>video3</li> <li>video4</li> </ul>
css：
.video-list li{ width:200px; height:100px; border:1px solid #000;}
好的，上面的css我们看见了一个和之前不一样的写法.video-list li
什么意思呢？就是.video-list下面的li
说道这里的话，也不得不多说几句了
元素选择器之间，可以有包含关系，例如选择div下所有的p，那就是div p{...}
class选择器之间也可以有包含关系，例如.parent .children{...}
但是id选择器呢？#parent #children{...}能写成这样吗？
在这里要介绍一个很重要的知识点，那就是一个页面id必须是唯一的，绝对不能重复
重复了之后会有什么后果呢？页面显示很正常，没什么的
但是当我们学了Js之后你就知道为什么禁止有两个重名的id了
现在只需要遵守这个规则
既然这样的话，类似#parent #children，还有.parent #children，以及div #parent这种把id写到后面的选择器虽然不能说是错的，但是没有什么意义
因为一个页面里面只有一个id，所以人家不需要你缩小在.parent或者是div的范围去找
好了，这节课一不小心又多说了一些废话，希望大家见谅
大家不妨思考一个问题，既然有这么多选择器，如果多种选择器都选了同一个元素，那优先级的问题是什么呢？
这就是css层叠样式表中层叠的概念，我们下节课再说
标签：
原文地址：http://www.cnblogs.com/zhaohuiziwo901/p/4631640.html
