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文件
	网站中的图片地址。

把图片上传到服务器上，把图片和html文件放在同一级或者上一级的img文件夹中，使用相对路径引用。
直接使用网络上的地址引用。

一些html和 css 的书写规范

标签全部小写
尽量不使用行内样样式
属性值为0省略单位
可以将注释插入html代码中，这样可以提高其可读性。````

class和id名称使用"-",替代下划线
页面必须包含 title 标签声明标题。title 必须作为 head 的直接子元素，并紧随 charset 声明之后。
在标签中添加属性时，始终为属性值添加引号，最好中间空出一个字节更加美观

chrome 开发者工具的功能区

image.png

Elements

审查浏览器页面的DOM元素，在style那栏可以调试你的css元素

image.png

Network

image.png

Console

JavaScript控制台，显示各种警告与错误,console.log和console.debug的信息会显示在这里。

image.png

Sources

查看页面加载的资源文件，可以在这里打断点调试js。