小白H5成长之路5：CSS需要全学么？

“小白，CSS样式看的怎么样了？”第二天老朱找到小白问道。

小白郁闷的说道：“过了一遍，不过CSS样式太多了，看的有点晕。”

“嗯，过一遍就可以了，我来跟你说一下CSS怎么用吧！你还是打开昨天的文档。”

查看源码

“打开了！”

“好的！CSS样式最常见的就是控制一个容器（div、p、span、li等这些都是容器）的文字样式、高宽度、背景、间距、边框等，比如width:100px就代表这个容器的宽度是100个像素。写CSS样式的时候你可以直接写到容器的style属性上。”

“朱哥，我打断一下，什么事容器的属性呢？”

“你学过面向对象编程么？如果学过你应该知道对象吧！在html标签里面，每个标签都是一个对象，而对象都有他们自己的属性、事件和方法，在你之前做的那个最基础的页面里面，id就是div的一个属性，至于事件和方法我们以后再说，你现在可以尝试的往div上面添加一个style属性。”

“是这个样子么？”

“嗯，是的，你太棒了，另外跟你说个小知识点，style是容器的默认属性，有时候我们为了方便控制，可能会给容器添加一些自定义的属性，比如xiaobai='菜鸟'，哈哈，开个玩笑！你先在先给div容器里面加点文字内容，然后我告你几个常用的css用法！”

“好了，加上了”。

“OK，现在我告你几个CSS里面常用的样式控制，你目前只需要记住这几个样式就可以足够你完成绝大多数网页布局了。第一个就是容器的高度（width）和宽度（weight），我习惯给他们像素值，比如style="width：200px;height:100px;"，通过width和height就可以改变容器的高度和宽度，高度和宽度通常情况下只对块级容器起作用！”

“那什么是块级容器呢？”

“网页里面最常见的两种容器一种是块级元素一种是行内元素，哦对了！很多人都叫div啊p啊这也标签块级元素，可是我习惯称它们为容器或者块级容器。这个看个人喜好，我只是觉得容器更能体现他们含义，或者更容易通过对象的方式来理解它。回归正题，块级容器前后有换行符，用白话讲就是每个块级容器在页面里面默认显示的时候它的左右不能有其他元素，举个简单的例子你可以把每个元素看作一个word中的文字，如果文字前后都有换行符是不是这个样子的？”

“还有一种就是行内元素，这个更容易理解，行内元素就是前后没有换行符，比如span就是行内元素。关于行内元素和块级元素我们后面会详细分析他们的原理，这个你有个大概印象就可以了。现在我们继续说CSS吧！下一个要记住的就是文字样式的几个控制，他们分别是文字的颜色（color）、大小(font-size)、加粗(font-weight)、行距(line-height)，比如让你文本颜色为红色(color:#f00)、大小是14px(font-size:14px;)、加粗(font-weight:bold;)、行距(line-height:30px;)就是下面的效果。”

“下一个要理解的是边框（border），边框对应的四个拓展就是上边框、右边框、下边框、左边框，边框常用的属性分别是边框的宽度、颜色、样式（实线、虚线、双实线等等），比如让一个div的左边框宽度6像素，颜色蓝色，实线（border-left:#0000ff 6px solid;）”。

"今天最后一个是容器的内边距(padding)和外边距(margin)，他们也是各有上下左右四个扩展，外边距就是容器外面的距离，比如你是一个容器，我是一个容器，咱俩的距离就是外边距。内边距可以看作你的表皮的厚度。更简单点就是一个箱子我们从外表看他并不知道它能装多少东西，只有知道他的厚度才能了解。内边距通俗理解就是厚度。"

“好了就我今天说的这四个方面的css样式，你自己看书或者去网上看他们的用法，自己练习练习，你应该可以完成这样一个页面布局，明天我看你的代码~~”

查看源码​​​​​​​

关注老炉传说我们一起成长