“小白昨天给你的布局练习做的怎么样了？”
“已经做好了，朱哥，你看一下！”
代码如下：
“不错嘛，做的很好。不过小白，你有没有发现把css代码直接写到div的style属性上面看着很乱。我们现在这才写了一个容器的样式，如果一个页面上有上百个容器，整个页面css代码的量是很恐怖的！我们可以把css样式写到一个单独的css文件中，或者写到head里面的style标签里面！我们为了学习方便，从现在开始暂且把css写到head的style标签里面。”
“css代码如果写到别的位置，我们怎么能确定每个css代码控制的哪个容器的样式呢？”
“这就要说到css的选择器了，最常用的选择方式有三种：通过标签名进行选择、通过id进行选择、通过class进行选择。我们先说通过标签名进行选择，假如页面中有四个div容器，两个p容器，代码是这样的：”
p是段落标签，因此上下会有间距
“我现在希望让页面中的所有div容器背景色为红色，文本颜色为白色，所有p容器背景色为灰色，文字大小20像素，可以这样来写：”
“在这里通过：标签名{样式}的方式可以告诉网页不同容器的css样式。不过这种方法虽然方便，也有弊端，因为它会一次性把网页中所有的同一标签样式做更改，往往我们在实际设计中可能每一个div的样式都不一样，所以容器的class属性这时就派上用场了。class属性的值是一个或者多个样式，比如一个div的class='reddiv'那么这个div的样式就是style中的reddiv样式，有时一个class的值会有多个，这个时候把每个值用空格隔开就可以了，如class='reddiv bigfont'，在style标签中class的样式名前面需要加上一个'.'用来区分它与标签样式的区别。例如还是前面的那四个div和两个p，我们现在希望第一个、第四个div和第一个p容器的背景为红色，文本颜色为白色，就可以自建一个reddiv类，并把对应的那三个容器的class值设置为reddiv，代码是这样的”
“除了使用class属性我们还可以通过容器的id进行样式控制，通过id控制样式的时候，在style里面需要在id名前面加个#号，现在我们回到昨天写的那个页面上，你试着把页面改成通过id控制样式。”
小白信心满满的打开昨天的文件，用了两分钟时间就改好了。“改好了，朱哥，你看一下！”
“很好，其实通过style来写css主要就三种方法，一种是直接通过标签名控制、一种是通过class类控制、一种是通过id控制，通过这三种方法我们就可以把页面中的布局和样式分开，这样对于代码的维护是非常有利的。”
“对了，朱哥，有个问题我请教一下，既然用了class为什么还要用id呢？”
“你应该还不知道id是干嘛的吧？在我们布局页面的时候要养成一个好习惯，给每一个容器起个名字，这个名字我们把它放到id属性上面，这个名字必须是唯一的，不能跟页面中其他容器的名字冲突。为什么要用到id呢？这是为了方便我们通过js找到这个容器。这个在后面我们用到jQuery的时候你就知道有多方便了。”
小白摸着头说道：“好吧！不管怎样我先把这三个方法记住！”
“另外，咱刚说的这三个方法完全可以达到对页面中所有容器的样式控制，不过为了更精确的控制可能会用到选择器的嵌套，这些我们以后涉及到的时候再说吧！你要时候时间也可以自己去查查相关的资料了解一下。因为我们现在要用最短时间开始用html+css+js方式进行综合学习，所以稍复杂点的知识我就先不说了。”
小白若有所思的说道：“哦，我知道了，那我什么时候可以开始学js？我已经迫不及待的学习js了。”
“明天就可以开始，不过因为我们现在不是在学校上学，我的时间也紧，所以很多基础知识还需要你自己去看，我只能大概说一下重点要学的内容。你有时间把js的数据类型、函数这些知识看一下，明天我们说一说js相关的入门知识！”
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白H5成长之路》的动力！
网友评论