CSS基础

---

CSS：层叠样式表 。增强了页面的显示效果，而且HTML和CSS的分离，就是页面内容和样式的分离，这样可以降低耦合性，增加代码的可维护性。

CSS和HTML的三种结合方式（耦合度从高到低）：
1.在每个html标签中都有一个属性style，可以在这里把html和css结合在一起。

#这种方式耦合度极高，样式和内容完全没有分离，一般不使用
<div style="background-color:red">

2.html中有一个<style>标签，可以写在head里面。

#这种方法实现了单个文件和css的解耦，但还是不够
#试想这样一个情况
#大量页面需要同时修改样式，就得挨个打开html文件修改
<style>
   div {
        color: red;
   }
</style>

3.使用可以写在head里的<link>标签，直接引入外部的css文件

#这种使用方式下，html和css完全解耦
<link rel="stylesheet" type="text/css" href="..." />

选择器

---

基本选择器

1.标签选择器：使用标签名作为选择器。

div{
 color: red;
}

2.class选择器：使用html中的标签都带有的属性class去标记要选择的内容。

/*
可以用标签.class这样的前缀指定某一标签的某一class
直接.class则指定所有class为这个的标签
*/
.class_content{
  color: red;
}

3.id选择器：使用html中的标签都带有的属性id去标记要选择的内容。

/*
可以用标签#id这样的去指定某一标签的某一id
也可以直接#id指定所有id为这个的标签
*/
#id_content{
  color: red;
}

4.优先级：id选择器 > class选择器 > 标签选择器

扩展选择器

看文档

盒子模型

---

什么是盒子模型？在写第一个作业的时候，只使用html做一个页面，一个很大的问题就是如何对页面进行布局排版。此时我考虑到的是使用表格来对页面进行布局，将页面分成很多块。
而盒子模型就是利用div+css来进行布局。在布局前，先将数据封装到一块一块的区域内，这个区域就被称为盒子。然后接下来的布局就很简单了，只要控制盒子的大小形式和把盒子拖到合适的位置即可。