css层叠样式表(英文全称：Cascading Style Sheets)

引入方式

行内式

直接在标签上加style属性，例如：<div style="color:red;">内容</div>

内嵌式

该方式通常放在head里，title下方

外链式

所有的样式都写到一个单独的css文件里（文件后缀是 .css）,通过在<head></head>内部用<link rel="stylesheet" href="css文件路径">来引入该css文件

导入式

所有的样式都写到一个单独的css文件里，通过在style或者css内部用@import url("css文件路径");或者@import "css文件路径";来导入外部样式。

优先级

遵循后来者居上原则，最后加载的标签会覆盖先加载的标签，一般行内样式优先级最高。

link和@import的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

选择器

标签选择器
   标签名{
   样式属性名 : 属性值 ;.
   }

类选择器
   .类值{
   样式属性名 : 属性值
   }

id选择器
   #id值{
   样式属性名 : 属性值 ;
   }

包含选择器
选择器E 选择器F{
   样式属性名 : 属性值 ;
   }

css颜色表达

直接使用颜色的英文单词

使用三色的数值，rgb（）

使用三色数值的十六进制

css长度单位

px em

字体相关样式

字体大小 font-size

(单位px，em)

字体系列 font-family

设置多个字体时，多个字体间用逗号隔开。
如果设置的字体名字里有空格的，必须用引号引起来。设置多个字体，按照电脑上有哪个优先使用哪个，否则就浏览器自动选择。

字体风格 font-style

normal 正常不倾斜

italic 斜体

oblique 倾斜

字体粗细 font-weight

normal 正常不加粗

bold 加粗

bolder 粗体

lighter 细体

100-900 9个层次数值越大，字体越粗 100-300细体 400-500正常 600-900粗体

行高 line-height

.数值+单位

数值（无单位）表示倍数

字体样式缩写

font : font-style值 font-weight值 font-size值 / line-height值 font-family值 ;

src和href的区别

1.href
Hypertext Reference的缩写，中文是超文本引用。指向一些网络资源，用来建立和当前文档或者元素的链接关系。
在加载该资源时，不会阻塞当前文档的处理。在a,link标签常用。

<a href="http://www.baidu.com"></a>
<link href="style.css" rel="stylesheet"/>

当浏览器加载到link标签时，会识别这是CSS文档，并行下载该CSS文档，但并不会停止对当前页面后续内容的加载。这也是不建议使用@import加载CSS的原因。

2.src
source的缩写。表示对资源的引用，指向的内容会用来嵌入到其所在的标签，也就是替换元素。
由于src的内容是页面必不可少的一部分，因此浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。常用在script、img、iframe标签中，我们建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。

<img src="..."/>
<script src=""><script>

总结：href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。

css 3.2