上节课我们说到了标签以及标签的属性
比如一个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层叠样式表中层叠的概念,我们下节课再说