HTML+CSS 学习第一天
注意先看完火狐官方的文档或者是其他类似的介绍html+css等学习资料等，再继续学习下一步，第一个你必须知道的就是html和css的作用分别是什么，在血虚html+css+JavaScript的时候，会有很多无从下手的时候，这个时候建议就是先把html看完，在菜鸟教程或者是w3school等，先看完html之后，就会有大致的了解了，看完之后不需要记住很多的标签，因为到后面要和JavaScript及css一起使用，到那时才是真正用标签的时候，如果可以记住的话是最好的，但是记不住也没关系。
1.步骤记录
在了解了HTML之后，就可以同时的加入CSS的学习，通过CSS来美化界面是常用的操作，只有JS+HTML+CSS三个融合应用才是真正的网页。
(常见的缩进用法有& emsp;)
这个section div选择器只针对section里的div，而不是所有的div标签
注意的是这个空格的变化，当加了一个空格之后，这行代码的意义就变了，变为找到section元素（父标签）内部所有含有这两个类的所有元素（子标签），即子标签会继承父标签的性质，当指定特定的内容的时候。(缩进用& emsp;)
Important work：
尝试写出这样一个界面
2关注css选择器
有空格的时候就是表示左边元素的所有右边
具体来说就是在看到空格的时候，那么右边就是属于左边的内部区域。
但是，要注意和 逗号， 的区别，在空格和逗号一起使用的时候，会出现很多令人迷惑的事情，首先在写选择器的时候，主要不要随便添加空格。
第二，可以看到下图，在选择器中一起使用逗号和空格的时候，记住是逗号两边是不同的元素，无论左边还是右边，都是独立的，简单的说就是有逗号的时候，右边的元素就不是左边元素的子元素了。逗号可以看成是一个分割器，分割左右两个元素
这也就说明了，如果你想写一个元素的内部元素有相同的属性，那么就必须是：
body main div, body main p {.....}
而下面这句就是表示一个子元素和一个全局的选择器；
body main div, p{......}
3.选择器
在使用选择器的时候，或者是说在使用html与css进行连接的时候，注意调用css样式的用法是什么。多一个空格就表示多一个类，
class=“ ....”
在设置类的时候，在css中的写法是：
元素.类名 像 section.feature-box{......}
也可以具体的指定哪一个
元素.类名 子元素 像 section.feature-box div{......}
上面一句的代码就是表示：
含有类feature-box的section元素中的div元素才会增加这个样式，和上面写section.feature-box是不一样的，section.feature-box表示含有类feature-box的section会显示这个样式。
注意在上面的代码中类和元素之间都没有空格
当有空格的时候，像
元素 .类名 像 section .feature-box div{......}
元素 .类名 像 section .feature-box{......}
代码的意思就是：
找到section元素中所有有这两个类的元素，不再是div了。
如果不需要设置section中含有这两个类的所有子元素的样式，那么就必须删除这个空格。
同时注意到：
在写选择器中两个类的时候，没有的空格的，同时只是在类后面连上就可以了。
还有一点要注意的是：
可以去掉类前面的元素名称，这个可以不受到限制。
简单的理解就是在类前面写了元素名称后，只有类前面的元素才可以使用，这个类的样式。其他的元素是不可以用的，但是我们所需要做的就是减少代码的无效量，也就是说
当在类前面不写元素名称的时候，这个类可以给全部元素使用而不受到限制。这样也不会影响其他的元素，因为只有当元素的开始标签中写了class为这个类的时候，这个样式才会在这个元素中生效。如果没有写这个类，那么就不生效。
代码举例：
1.不限制元素的类型：
.feature-box{
color:red;
background-color:white;
}<div>HelloWorld</div>
<div class=".feature-box">HelloWorld</div>上面一个div没有写出class，所以在使用的时候不会有任何样式
但是下面一个写了class，所以在使用的时候就会有feature-box的样式。
2.不限制父元素，但是限制子元素的类型：
.feature-box div{
color:red;
background-color:white;
}<div class="feature-box">
<p>HelloWorld</p>
<div>HelloWorld</div>
</div>最重要的是这个，在写代码的时候，有很多灵活的应用，
上面的代码就是不限制父类元素，当父类元素写有这个类的时候，就会将子元素div渲染成feature-box的样式。
再看另外一个类型：
.feature-box.slaes{
color:red;
background-color:white;
}<div class="feature-box sales">
<p>HelloWorld</p>
<div>HelloWorld</div>
</div>不限制父元素，子元素的类型，都会有feature-box的类型。
另外一个类型：
.feature-box.slaes div{
color:red;
background-color:white;
}<div class="feature-box sales">
<div>HelloWorld</div>
<div>HelloWorld</div>
</div>不限制父元素，限制子元素的类型。