something about css（1）
CSS的全称是什么?
Cascading Style Sheets 层叠样式表
CSS有几种引入方式? link 和@import 有什么区别?
-
行内样式
<div class="username" style="color: red;"> -
内部样式表
<head> <meta charset="UTF-8"> <title>Title</title> <style> @import url("hello.css"); @import "world.css"; h1 { color: red; } </style> </head> -
链入外部样式
<link href="mystyle.css" rel="stylesheet" type="text/css">
@import 和link 的区别
-
语法结构差别 link属于HTML标签，只能放入html源代码中使用，而@import是CSS提供的一种方式，只能加载CSS了。
-
加载顺序的差别。link引用的CSS会在一个页面被加载的时候（就是被浏览者浏览的时候）同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）。
-
兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
-
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
区分几种文件路径
| 路径 | 位置 |
|---|---|
| css/a.css | 当前目录下css文件夹里的a.css |
| ./css/a.css | 当前目录下css文件夹里的a.css |
| b.css | 当前目录下b.css文件 |
| ../imgs/a.png | 上级目录下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 | 网站中的图片地址。 |
如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
-
把图片上传到服务器上，把图片和html文件放在同一级或者上一级的img文件夹中，使用相对路径引用。
-
直接使用网络上的地址引用。
一些html和 css 的书写规范
-
标签全部小写
-
尽量不使用行内样样式
-
属性值为0省略单位
-
可以将注释插入html代码中，这样可以提高其可读性。````
-
class和id名称使用"-",替代下划线
-
页面必须包含 title 标签声明标题。title 必须作为 head 的直接子元素，并紧随 charset 声明之后。
-
在标签中添加属性时，始终为属性值添加引号，最好中间空出一个字节更加美观
chrome 开发者工具的功能区
image.png
Elements
审查浏览器页面的DOM元素，在style那栏可以调试你的css元素
image.png
Network
分析网站请求的网络情况，查看某一个请求的请求头和响应头还有响应内容，特别是AJAX类请求的时候，点开可以查看详细的http请求情况。
image.png
Console
JavaScript控制台，显示各种警告与错误,console.log和console.debug的信息会显示在这里。
image.png
Sources
查看页面加载的资源文件，可以在这里打断点调试js。
