05 【CSS引入方式 CSS的元素显示模式】
05 【CSS引入方式 CSS的元素显示模式】
1.CSS的引入方式
1.1 CSS的三种引入方式
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（外链式）
1.2 行内样式表
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式。
<div style="color: red; font-size: 12px;">
青春不常在，抓紧谈恋爱
</div>
style其实就是标签的属性- 在双引号中间，写法要符合 CSS 规范
- 可以控制当前的标签设置样式
- 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
- 使用行内样式表设定 CSS，通常也被称为
行内式引入
问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）
1.3 内部样式表
将样式编写到head中的style标签里然后通过css的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用
<style type="text/css">
div {
color: red;
font-size: 12px;
}
</style>
<style>标签理论上可以放在 HTML 文档的任何地方，但一般会放到文档的<head>标签中- 目前的浏览器已经支持省略
type属性 - 通过此种方式，可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但是并没有实现结构与样式完全分离
- 使用内部样式表设定 CSS，通常也被称为
嵌入式引入，这种方式是我们练习时常用的方式
问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用
1.4 外部样式表
实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用。
引入外部样式表分为两步：
- 新建一个后缀名为：
.css的样式文件，把所有的 CSS 代码都放入此文件中 - 在 HTML 页面中，使用
<link>标签引入这个文件
<link rel="stylesheet" type="text/css" href="css文件路径">
| 属性 | 作用 |
|---|---|
rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为 "stylesheet"，表示被链接的文档是一个样式表文件 |
type | 定被链接文档的 MIME 类型，该属性最常见的 MIME 类型是 "text/css"，该类型描述样式表，目前的浏览器已经支持省略 "type" 属性 |
href | 定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径 |
**注意：**使用外部样式表设定 CSS，通常也被称为 外链式 或 链接式引入，这种方式是开发中常用的方式。
外部样式表需要通过
link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
1.5 CSS引入方式总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表（行内式） | 书写方便，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表（嵌入式） | 部分结构和样式分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表（外链式） | 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制多个页面 |
2.CSS 的元素显示模式
2.1 什么是元素显示模式
**作用：**网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式 就是元素（标签）以什么方式进行显示，比如 <div> 自己占一行，比如一行可以放多个 <span>。
HTML 元素一般分为 块元素 和 行内元素 两种类型。
2.2 块、行内、行内块
2.2.1 块元素
常见的块元素有 <h1> ~ <h6>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<table>、<tr>、<form> 等，其中 <div> 标签是最典型的块元素。
块级元素的特点：
- 比较霸道，自己独占一行
- 高度，宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的 100%
- 是一个容器及盒子，里面可以放行内或者块级元素
注意：
- 文字类的块级元素内不能放置块级元素，会发生语法错误
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>- 同理，
<h1> ~ <h6>等都是文字类块级标签，里面也不能放其他块级元素
2.2.2 行内元素
常见的行内元素有 <a>、<span>、<em>、<strong> 等，其中 <span> 标签是最典型的行内元素，有的地方也将行内元素称为内联元素。
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素（a 除外）
注意：
- 链接里面不能再放链接
- 特殊情况链接
<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
2.2.3 行内块元素
在行内元素中有几个特殊的标签：<img>、<input>、<th>、<td>，它们同时具有 块元素 和 行内元素 的特点，有些资料称它们为 行内块元素。
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）
2.3 元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性 比如：想要增加链接 <a> 的触发范围。
- 转换为块元素：
display: block;（由于经常需要设置宽高，所以通常会将行内元素转换为块元素） - 转换为行内元素：
display: inline; - 转换为行内块：
display: inline-block;（常用）
2.4 元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度和高度 | 容器的 100% | 容量级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度和高度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
学习元素显示模式的主要目的是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。
