CSS基础
- CSS全称层叠样式表（Cascading Style Sheets）
CSS的几种引入方式
-
行间样式(写在html标签的style属性里)
<input type="text" style="color:#ccc;width:120px"> -
内部样式（写在<head></head>里面，以<style>...</style>标签包裹。比）
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<style>
p {
font-size: 20px
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html> -
外部样式：也称链接样式，写在<head></head>里面。以link定义，（rel="stylesheet"和tbye="text/css"为规范必写，详细原因现在的我也不知道）， css样式写在另一个文件夹取名为style（文件名可以随便取但推荐是英文）。比如：
<link rel="stylesheet" type="text/css"> -
@import 引用CSS(放在<style></style>之间)
<style type="text/css"> @import url(引入的样式表的路径); </style>
link 和@import的区别
链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。
-
差别1：ink属于HTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 - 差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完才被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
- 差别3：兼容性的差别。由于@import是CSS2.1提出的，所以低版本浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
-
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
从上面的分析来看，还是使用link标签比较好。
以下这几种文件路径分别用在什么地方，代表什么意思?
css/a.css 相对路径：当前文件夹内CSS目录下的a.css文件
./css/a.css 相对路径：当前文件夹内CSS目录下的a.css文件
b.css 相对路径：当前目录下的b.css文件
../imgs/a.png 相对路径：当前目录的上级目录内的images目录下的a.png文件
/Users/hunger/project/css/a.css 绝对路径：本地/Users/hunger/project/css/目录下的 a.css文件
/static/css/a.css 网站路径：当前服务器根目录下的/static/css的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png 网络路径：通过该路径可以找到cdn.jirengu.com域名下kejian1目录下的8-1.png文件
如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
- 可以直接将图片上传到服务器，在页面使用这张图片
- 如果这个图片本来就存在网络上其他的服务器上，可以直接使用图片的网络绝对路径链接的方式在页面上添加url引用这张图片
HTML和 CSS的书写规范
HTML:
- 标签名必须使用小写字母。
- 对于无需自闭合的标签，不允许自闭合。
- 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。
- 一次缩进2个空格，不要使用 tab 或者混合 tab 和空格的缩进。
- class 必须单词全字母小写，单词间以 - 分隔。
- 标签的使用应该遵循标签的语义。
- 标签的使用应尽量简洁，减少不必要的标签。
- 属性值必须用双引号包围。
- 布尔类型的属性，建议不添加属性值。
- 引入 CSS 时必须指明 rel="stylesheet"。
下面是常见标签语义
- p - 段落
- h1,h2,h3,h4,h5,h6 - 层级标题
- strong,em - 强调
- ins - 插入
- del - 删除
- abbr - 缩写
- code - 代码标识
- cite - 引述来源作品的标题
- q - 引用
- blockquote - 一段或长篇引用
- ul - 无序列表
- ol - 有序列表
- dl,dt,dd - 定义列表
CSS
- 选择器与 { 之间必须包含空格。
- 属性名与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
- 在可以使用缩写的情况下，尽量使用属性缩写。
- 属性书写顺序
建议同一rule-set下的属性在书写时应按功能进行分组，并以Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）的顺序书写，以提高代码的可读性。 - 数值为0时不带单位
- 复合样式使用缩写
- 统一使用小写
注释：
- Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
- Box Model 相关属性包括：border / margin / padding / width / height 等
- Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
- Visual 相关属性包括：background / color / transition / list-style 等
