CSS的发展历程
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
结构臃肿混乱，有的可以直接改样式有的不能直接改，傻傻分不清楚。
如：h1标签中更改字体颜色就改不了，需要在中间嵌套font标签。
CSS 网页的美容师
CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。
CSS的最大贡献就是： 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。 而样式交给 CSS 后，你完全可以放心的早点洗洗睡了！
而且。。。。。 CSS 做的很出色，如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师，不信，你看:
你跟Angelababy只差了一个妆容的距离
没有不好看的网页，只有不会CSS的前端。
网页添加 CSS和不添加CSS 的对比：
带有CSS的页面
没有CSS的页面
CSS初识
CSS(Cascading Style Sheets)
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
CSS样式规则
使用HTML时需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
样式规则
在上面的样式规则中:
- 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
- 属性和属性值以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性和属性值之间用英文“:”连接。
- 多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示。
开发者工具（chrome）
此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：
“按F12”或者是 “shift+ctrl+i” 打开 开发者工具。
菜单： 右击网页空白出---查看
开发者工具调试
小技巧：
- ctrl+滚轮 可以 放大开发者工具代码大小。
- 左边是HTML元素结构 右边是CSS样式。
- 右边CSS样式可以改动数值和颜色查看更改后效果。
CSS注释
CSS规则是使用 /* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 /* 标记开始注释，在内容的结尾使用 */结束。
p {
font-size: 14px; /* 所有的字体是14像素大小*/
}
引入CSS样式表（书写位置）
1. 行内样式表（内嵌）
2. 内部样式表
3. 外部样式表（外链）
4. 导入样式表（@）
行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type="text/CSS" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>
注意： link 是个单标签哦!!!
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
标签显示模式（display）
网页的标签非常多，在不同地方会用到不同类型的标签，以便更好的完成我们的网页。
标签的类型(显示模式)：
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
- 总是
从新行开始- 高度，行高、外边距以及内边距
都可以控制。宽度默认是容器的100%。- 可以
容纳内联元素和其他块元素。
行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
- 和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或则其他行内元素。（
a标签 特殊）
注意：
- 只有文字才能组成段落 因此
p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。 - 链接里面不能再放链接。
块级元素和行内元素区别
块级元素的特点：
1. 总是从新行开始
2. 高度，行高、外边距以及内边距都可以控制。
3. 宽度默认是容器的100%
4. 可以容纳内联元素和其他块元素。
行内元素的特点：
1. 和相邻行内元素在一行上。
2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
3. 默认宽度就是它本身内容的宽度。
4. 行内元素只能容纳文本或则其他行内元素。
行内块元素（inline-block）
在行内元素中有几个特殊的标签: <img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
- 和相邻行内元素（行内块）
在一行上，但是之间会有空白缝隙。- 默认宽度就是它
本身内容的宽度。- 高度，行高、外边距以及内边距
都可以控制。
标签显示模式转换 display
块转行内：
display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display: inline-block;
此阶段，我们只需关心这三个，其他的是我们后面的工作。
网友评论