★文章内容学习来源：拉勾教育大前端就业集训营
【14】CSS基础（1）——认识CSS
一、产生背景
从HTML产生开始，样式属性就是存在的；随着HTML发展、设计者页面要求的增多、HTML又添加了很多样式属性、功能（比如文本格式化标签点击查看），但是HTML页面也变得越来越“臃肿”。
CSS便产生了，HTML结构与样式分离，不再混乱。
二、概念
（一）含义
1.CSS：cascading style sheet层叠样式表，是一种用来表示HTML样式的计算机语言；
2.作为前端三层（点击查看）中的样式层，从美观的角度描述页面样式；
（二）作用
1.静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化；
示例：没有css的网页（部分）
示例：有css的网页（部分）
三、组成
（一）cascading层叠式
CSS中贯穿始终的加载特性：层叠性 、继承性；
（二）style样式
定义如何显示HTML元素（比如：文字文本、背景、盒模型、浮动、定位、其它）。
四、语法
（一）CSS规则概述（第三部分会详解）
选择器，以及一条或多条声明：
如下图
（二）代码书写位置
1.内联式
（1）含义及举例：
①内联式，也被习惯叫做行内式;
②书写位置：在 HTML 标签之上的style 属性中书写 CSS样式;
所有的 CSS样式属性总体组成标签的style属性的属性值。
如下示例
<div style="width:500px;height:500px;color:red;font-size:14px;">
内联式/行内式书写位置如上在HTML的div标签内
</div>
（2）实际应用情况：
★实际工作不会使用内联式（行内式）编写CSS代码，原因如下：
内联式（行内式）缺点：
①内联式必须写在标签上，没有完全脱离 HTML 标签；
② css 样式代码让标签结构繁重，不利于 HTML 结构的解读；
③一个内联式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同样的 css 代码需要书写多次，增加代码量。
2.内嵌式
（1）含义及举例：
①书写位置：在 HTML 文件中，<head>标签内部有一个<style>标签；
<style> 标签书写在< title> 标签后面，所有 CSS代码书写在<style>标签内部 ；
<style> 标签有一个标签属性叫做type，属性值是 “text/css”。
如下示例
HTML常用标签中制作表格相关标签，合并单元格部分，迷宫图例子中<style>部分
点击查看迷宫图完整代码及浏览器显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
table {
width :810px;
height :810px;
}
td {
text-align:center;
}
</style>
</head>
（2）实际应用情况：
★写单个文件练习的时候可以使用，比较方便，但是在写大项目的时候不便使用。原因如下：
内嵌式特点
①优点
a、实现了结构和样式的初步分离， css 只负责样式，HTML 负责结构;
b、多个标签可以利用一段代码设置相同的样式，节省代码量。
②缺点
a、结构和样式并没有完全分离，代码依旧书写在 HTML 文件的<style>标签内部；
b、css 样式只能给一个 HTML 文件使用，不能够被多个 HTML 文件同时利用；
c、在 HTML 中如果 css 代码太多，会造 成文件头重脚轻。`
3. 外联式
（1）含义及举例：
外联式 •外联式 CSS，也可以叫做外链式 CSS、外部 CSS。 •书写位置：在一个单独的扩展名为 .css 的文件中。 •书写语法：内部代码与内嵌式样式表中
（2）实际应用情况：
外联式优点 ①实现了 HTML 和 css 完全分离。 ②多个 HTML 文件可以共用一个 css 文件，便于提取公共 css，减少代码量。 ③可以实现一个 css 变化，多个 HTML 页面同时变化，减少工作量。 ④一个 HTML 文件可以引入多个 css 文件，可以实现同一个页面中 css 代码分层。
4.导入式
（1）含义及举例：
导入式 •书写位置：在内嵌式样式表
（2）实际应用情况：
导入式问题 •导入式样式表的作用与外联式样式表基本相同。 •但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果 网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。 •实际工作中，较少使用导入式，推荐使用外联式样式表。
★书写位置总结
实际应用 •小型案例：可以使用内嵌式 CSS。 •实际工作、大型网站项目：推荐使用外联式 CSS。
（三）CSS规则详解
1.以内嵌式为例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
table {
width: 810px;
height: 810px;
}
td {
text-align: center;
}
</style>
</head>
（1）所有的 css 代码都必须书写在<head>标签内部的一对 <style>标签内;
（2）css 在给某个标签设置样式前，必须使用选择器先选中标签;
（3）css 样式的属性，属性名和属性值的键值对写法为k:v;；
（4）给每个选择器添加的样式属性都必须写在一对大括号 {}之内;
（5）给一个标签添加的所有需要的样式，都要在 {} 内部一一罗列出来。
2. 注意事项
（1）分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误；
（2） css 中所有属性与属性之间对空格、换行、缩进不敏感。
以下二者等价
p { width: 300px; font-size: 14px; }
p { width: 300px;
font-size: 14px; }
（四）CSS注释语法
1.语法格式：
/*中间部分为注释内容*/
（五）习惯的代码风格
代码风格是实际开发中的书写方式，并非强制标准。
1.CSS样式格式
①展开格式：开发过程使用，代码可读性强，便于调错。
<styLe>
div {
width: 200px;
height: 200px;
background-color: skyblue;
margin-bottom: 10px;
}
</styLe>
②紧凑格式：上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。
<styLe>
div{
width:200px;height:200px;background-color:skyblue;margin-bottom:10px;}
</styLe>
2.英文大小写
CSS 中的英文可以使用大写，也可以使用小写；
★建议：css 中的选择器和样式属性名、属性值等都使用小写英文，特殊情况除外。
<styLe>
/*大写*/
Div {
width: 200px;
height: 200px;
}
</styLe>
<styLe>
/*小写*/
div {
width: 200px;
height: 200px;
}
</styLe>
3.空格规范（方便阅读）
①选择器与大括号 { } 之间保留一个空格；
② 冒号后面，属性值前面，保留一个空格。
<style>
selector(空格){
k:(空格)v;
}
</style>
<style>
p {
color: blue;
}
</style>
下篇继续:CSS基础（2）——选择器