1.外部样式
<link rel=“stylesheet” href=“lounge.css” type="text/css"/>
2.内页样式
<style type=“text/css”>
body{
background-color:red;
margin-left:20%;
}
</style>
3.行内标签样式
<div style="50px">设置此div标签宽度为50px</div>
优先级：
1.后出现的选择器优先级比先出现的高，会覆盖前一个
2.具体的选择器优先于一般的选择器， h1 vs *
3.!important写在选择器中时，会优先该样式
选择器方式
1.类选择器
.classname{color:greem;}
p.classname{color:red;}
p.classname1,a.classname2{color:gray;}
2.派生选择器
li strong{xxx} //不论他们之间有没有嵌套其他元素
3.id选择器
#sidebar{}
#sidebar p{}
4.属性选择器
[title]
{}
5.子元素选择器
li>a {} //应用于所有直接父元素为<li>的<a>元素
6.相邻兄弟选择器
h1+p {} //应用于<h1>元素之后的第一个<p>元素
7.普通兄弟选择器
h1~p {} //如果有两个<p>元素均为<h1>元素的兄弟元素，则都起作用
8.其他选择器
p[class]应用于所有包含class特性的p元素
p[class="dog"]应用于class为dog的p元素
p[class~="dog"]应用于class包含空格+dog的p元素
p[attr^"d"]应用于某个特性值以字母d开头的p元素
p[attr*"do"]某个特性值中含有do的p元素
p[attr$"g"]特性值以g结尾的p元素
网页在不同浏览器中的表现：
BrowserCam.com
BrowserLab.Adobe.com
BrowserShots.org
CrossBrowserTesting.com
解决CSS问题的网站：
PositionIsEverything.net
QuirksMode.org
层叠
样式表中可能会含有多个针对同一元素的式样
你想知道h1元素的color属性
1.作者本身针对h1元素写了样式表
2.浏览器允许用户为html创建自己的样式
3.浏览器本身会维护一组默认样式
1.收集所有样式表
2.找到所有匹配的声明
3.按照作者、读者、浏览器的顺序排序
4.按照特定性找到最合适的样式（000是否包含id 是否包含类 是否包含元素名）
Tips：在css属性上加!important,排序时优先级为最优
增加字体的方式
@font-face{
font-family:”Emblema One”;
src:url(“http://xxxxxxxxxxxx/aa.woff”),
url(“http://xxxxxxxxxxxx/aa.ttf”);
}
放到head中