1.标签
标签又称元素、盒子。是承载文档流的容器，所有的文本信息都必须写在标签中。
2.1标签划分
1.根据有无闭合标签可以分为双标签和单标签。
2.根据页面渲染结果可分为块标签和行标签。
1.1双标签
| 双标签 | 样式 | 标签 | 解释 |
|---|---|---|---|
| html | <html></html> | 页面根标签 | 所有的页面代码都写在html标签中 |
| head | <head></head> | 头部标签 | 设置网页基本信息的标签 |
| body | <body></body> | 内容标签 | 所有页面内容都在body中编写 |
| title | <title></title> | ------ | 设置网站标题 |
1.2单标签
| 单标签 | 样式 | 解释 |
|---|---|---|
| meta | <meta> | 用来设置网页的具体信息 |
2.行元素和块元素
2.1块标签
- 独占一行，每个标签都会导致文本流换行
- 可以设置宽高，高度由内容撑开
- 可以嵌套块元素和行元素。拟人化的称之为”父子关系“。
父子关系样式如下：
<div>
<div></div>
</div>
2.2行标签
- 可以在一行之前排列，但是如果超过父盒子的宽度则会换行。（如果是单个行标签超出高度此情况不换行）
- 不能设置宽高。 宽高由内容撑开
- 可以嵌套块标签 （不推荐使用）
3.css引入方式
| 引入方式 | 概念 | 优点 | 缺点 |
|---|---|---|---|
| 行间样式 | 在标签中通过style属性来写css代码 | 优先级高、方便 | 不利于维护、显得页面太过杂乱 |
| 内联样式 | 将css代码写在页面的style标签中 | 可复性高、代码整洁、利于维护 | 会使页面变得很长，小型项目推荐使用内联样式 |
| 外联样式 | 在外部创建一个.css文件，并在HTML文件中header标签内title标签下使用link标签引入 | 逻辑清晰、页面整洁、利于维护、可复用性高 | 加大了项目所占内存 |
4. 样式优先级
行间样式>内联样式>外联样式
行间样式：
<div style="width:400px;height:400px;background:green"></div>
内联样式：将style标签写在head闭合标签上面。
<head>
<style>
div{
样式名：值；
}
<style>
</head>
外联样式:使用link标签 href属性内写入要引入文件css的文件路径。
<link rel="stylesheet" href="文件路径">
文件路径的编写
本层文件：./文件名.后缀名；上层文件：../../文件名.后缀名
上上层文件：../../文件名.后缀名；下层文件：文件夹名/文件名.后缀名
5.css选择器
5.1命名规范
按照W3C规范命名有一下几种原则（包括文件及文件夹命名等所能遇到的所有命名）
- 命名中只能存在字母、数字、下划线。
- 命名必须以字母开头
- 命名必须遵守语义化（好理解容易记）
- 不要用拼音及拼音缩写 尽量使用单词
5.2命名格式
- 驼峰命名
例如：商品列表 商品=>goods 列表=>list =>goodsList（小驼峰）=>GoodsList（大驼峰） - 地中海命名（匈牙利命名）
例如：商品列表 商品=>goods 列表=>list =>goods_list
5.3选择器
5.3.1 类选择器
类选择器又称class选择器。当同种标签过多时我们可以使用标签中的class属性给标签起个名字（类名），然后在css中使用类名的方式选择具体的标签并编写样式。
一个标签可以有多个类名，类名之间以空格隔开，一个类名可以重复使用
<div class="Box"></div>
<style>
.Box{
样式名：值；
}
</style>
5.3.2标签选择器
直接在style标签中使用标签名方式来选择具体标签。多个标签用空格隔开
<style>
div{
样式名：值；
}
</style>
5.3.3id选择器
需要在标签内使用id这个属性来设置id名，然后再style标签中使用#id名的形式选择具体标签。
<div class="B1" id="first"></div>
<style>
#first{
样式名：值；
}
</style>
id具有唯一性，整个页面中id不能重复。通常情况下一个标签只能由一个id。
5.3.4通配符选择器
通配符选择器*是代表所有标签的样式，可以设置所有标签的css
<style>
*{
background:green;
}
</style>
5.3.5群组选择器
可以嵌套或者配合class标签id等选择器一起使用。多个选择器用，隔开。
<div class="d1 d2 d3"></div>
div,.d1{
background: red;
}
5.3.6组合选择器
详细的描述一个标签的属性或标签名。有几个class就写几个class写的越详细优先级越高
组合选择器中间不能有空格
<h1>这是标题<h1>
<p class=”hahaha">这是一个带class的p标签</p>
<style>
p.hahaha{
background:red;
}
</style>
5.3.7 后代选择器
父选择器与子孙选择器之间以空格隔开
<div class="d1 d2 d3"></div>
<div class="d1 d3"></div>
<style>
.d1 .d2 .d3{
background: gray;
}
</style>
5.3.8子集选择器
父选择器与子选择器之间以>隔开
直属子元素不能选择后代元素
<div class="f1">
<div class="f2">
<div class="f3"></div>
</div>
<div class="f3"></div>
</div>
<style>
.f1>.f3 {
background: yellow;
}
</style>
