4. CSS基础

CSS的全称

CSS的全称是Cascading Style Sheets，层叠样式表。是一种样式表语言，用于为HTML文档定义布局。

CSS的引入方式

CSS有4种引入方式。

• 内联式

...

• 内部式
  CSS代码写在内，一般置于标签中。

• 外部式
  把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内，使用标签将css样式文件链接到HTML文件内。

• 导入@import

使用实例（参考其他学员）
JS Bin地址

JS Bin效果展示.png

link 和@import 的区别

1. 语法结构的区别：link属于HTML标签，只能放入html源代码中使用，而@import是CSS提供的一种方式，只能加载CSS了。
2. 加载顺序的区别：link引用的CSS会在一个页面被加载的时候（即被浏览者浏览的时候）同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（闪烁）。
3. 兼容性的区别：由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4. 使用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目录中的图片

如何在网站上展示图片

• 图片上传到网上（如某某相册），获得地址，利用标签：

(省略掉“-”)

• 上传到服务器，获取相对路径（适用于本地调试）

HTML 和 CSS 的书写规范

• HTML
• 用两个空格来代替制表符（Tab）
• 嵌套元素应当缩进一次（即两个空格）。
• 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
• 不要省略可选的结束标签（closing tag）（例如
或 ）。
• 统一使用小写（包括标签、属性、命名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:可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的。