CSS的全称
CSS的全称是Cascading Style Sheets，层叠样式表。是一种样式表语言，用于为HTML文档定义布局。
CSS的引入方式
CSS有4种引入方式。
- 内联式
<h1 style="color:red; font-size: 20px;">...</h1>
- 内部式
CSS代码写在<style type="text/css">...</style>内，一般置于<head>标签中。
<style type="text/css">
h1 {
color:red;
font-size:20px;
}
</style>
- 外部式
把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内，使用<link>标签将css样式文件链接到HTML文件内。
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
- 导入@import
<style>
@import url(a.css);
@import "b.css";
</style>
JS Bin效果展示.png
link 和@import 的区别
- 语法结构的区别：link属于HTML标签，只能放入html源代码中使用，而@import是CSS提供的一种方式，只能加载CSS了。
- 加载顺序的区别：link引用的CSS会在一个页面被加载的时候（即被浏览者浏览的时候）同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（闪烁）。
- 兼容性的区别：由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
- 使用dom控制样式时的区别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
路径
- 相对路径（即相对当前文件所在位置而言的路径）
假设当前文件为index。 - css/a.css——index所处目录下的css文件夹中的a.css文件
- ./css/a.css——同上，“./”表示当前文件所处目录
- b.css——index所处目录下的b.css文件
- ../imgs/a.png——index的上级目录中imgs文件中的a.png文件
- 绝对路径（电脑中的完整的路径，不以任何为参考）
- /Users/hunger/project/css/a.css——本地绝对（完整）路径中的a.css文件
- /static/css/a.css——表示某网站目录下static目录中css目录下的a.css文件
- http://cdn.jirengu.com/kejian1/8-1.png ——绝对意义上的网站中kejian1目录中的图片
如何在网站上展示图片
- 图片上传到网上（如某某相册），获得地址，利用标签：
<img s-r-c="XXX">(省略掉“-”)
- 上传到服务器，获取相对路径（适用于本地调试）
HTML 和 CSS 的书写规范
- HTML
- 用两个空格来代替制表符（Tab）
- 嵌套元素应当缩进一次（即两个空格）。
- 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
- 不要省略可选的结束标签（closing tag）（例如
</li>或</body>）。 - 统一使用小写（包括标签、属性、命名id class等）。
- id class命名使用有意义的单词，尽量使用缩写，分隔符用 “-”。
- 使用注释，方便阅读。
- CSS
- 为选择器分组时，将单独的选择器单独放在一行。
- 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
- 声明块的右花括号应当单独成行。
- 每条声明语句的 : 后应该插入一个空格。
- 为了获得更准确的错误报告，每条声明都应该独占一行。
- 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
- 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
chrome 开发者工具的功能区
开发者工具.png
- **Elements: **查看、编辑页面上的元素，并可在浏览器得到反馈。
- Console: 记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
- Sources: 主要显示网页加载的脚本文件，如CSS、JS等。
- Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。
- Application: 记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
- **Security: **判断当前网页是否安全。
- ** Audits: **可以优化前端页面，加快网页加载速度。
- Style:可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的。
- Computed:可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的。
