CSS基础

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="width: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中