css
css全称：Cascading Style Sheets层叠样式表，用于给网页添加样式。（html式结构；css是样式；js是行为）
css的引入方式：
- 内联样式：直接写在html的标签里
<h1 style="color: red; font-size: 20px;"></h1> - 内部样式：写在head中的<style type=“text/css”></style>中
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style> - 外部样式：两种方法
第一种：用<link>引入css
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
第二种：用@import引入样式放在css中，注意分号
<style>
@import url("hello.css");
@import "world.css";
</style>
link和@import的区别
- <link>时XHTL标签除了加载css样式外还可以定义RSS等其他事物；@import属于css的语法，只能夹在css样式。
- <link>在引用css时，页面载入的同时加载css样式；@import则是完全载入页面后再去加载css样式
- <link>时XHYML标签，没有兼容问题；@import是css2.1提出的，过低版本的浏览器不支持
- <link>可以用JS控制DOM去改变样式；@import不可以
注：每一个浏览器都有自己默认的样式，在写css时一般先清空默认样式。
文件路径
相对路径
css／a.css当前文件夹下的css文件夹下的a.css文件
./css/a.css同上
b.css当前文件夹下的b.css文件
../imags/a.png上一级文件夹下的imags文件夹下的a.png文件
绝对路径
／users／hunger／project／css／a.css users文件夹下的hunger文件下的project文件夹下的css文件夹下的a.css文件
网页路径
/static/css/a.css主域名下的文件路径
http：//cdn.jirengu.com/kejian1/8-1.png网站中的路径，是一个绝对路径
本地文件在网站上展示
将本地图片上传后会得道一个路径然后再img标签中的src属性引用这个路径
也可以用其它网站上图片的网络绝对路径在img中的src里引用这个绝对路径
html书写规范
统一文档h5声明<!DOCTYPE html>
编码表<meta charset=“utf-8”>
因浏览器加载问题，js文件放在html下面
属性值用双引号包裹
引入css要指明rel=“stylesheet”
css的书写规范
语法不区分大小写，一般统一用小写
不使用内联式写法
id和class属性的值尽量语义化，可以用分隔符“_”
属性值为0省略单位块内容缩进，缩进使用tap进行缩进
属性名冒号后加一个空格
编码规范https://github.com/fex-team/styleguide/blob/master/css.md
chrome开发者工具
打开页面，在页面任意位置右键点击检查就打开了开发者工具
Elements：查看和编辑页面中的元素，elements下看到的是html的结构
下面的styles里的内容是css样式可编辑一般用于调试css样式，styles右边是和模型结构。
Elements左边蓝色部分点击可切换网页端或移动端
Console：是后台打印结果，用于调试js;查看全局变量;在开发期间，可以使用控制面板记录和诊断信息，或者使用它作为shell在页面上与JavaScript交互
Sources：在源代码面板中设置断点来调试JavaScript，或者workspace连接本地文件来使用开发者工具的实时编辑器。在左侧的脚本代码编号，鼠标点击即可添加断点，添加断点后，刷新网页，程序运行到断点即可看到断点调式的状态了。
Network：可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；
Resources里可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及Cookies。
