web前端学习（2）

1.1、css基本知识

1.1.1、外部引用css

第一种：

<link rel="stylesheet" href="css文件路径">

第二种：

<style>
 	@import/*文件导入*/ url("css文件路径")
</style>

扩展知识点: link和import之间的区别?
差别1: 本质的差别: link属于XHTML标签，而@import完全是CSS提供的一种方式2差别2:加载顺序的差别: 当一个页面被加载的时候(就是被浏览者浏览的时候)，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式 (就是闪烁)，网速慢的时候还挺明显
3差别3: 兼容性的差别: @impot是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题

即：尽量使用link标签引用

1.1.2 嵌入式样式

1.例如：

<div style= ”width:200px;height: 20px;">我是div</div>

1.1.3 css优先级

就近原则，谁离得近就听谁的
注意：

如果有！important就是听他的

2.1 选择器

2.1.1 class选择器

语法:·class名属性: 属性值}
说明:
A)当我们使用class选择符时，应先为每个元素定义一个class名称
B) class选择符的语法格式是
如: <div class="top"></div> .toplwidth:200px;height:100px;background:green;}
用法: class选择符更适合定义一类样式

2.1.2 id选择器

语法: #id名属性: 属性值;)
说明
A)当我们使用id选择符时，应该为每个元素定义一个id属性
如: <div id="box"> </div>
B)id选择符的语法格式是“#”加上自定义的id名
如: #boxwidth:300px; height:300px;}
C)起名时要取英文名，不能用关键字:(所有的标记和属性都是关键字)
如: head标记
D) 一个id名称只能对应文档中一个具体的元素对象。(唯一性)

2.1.3 通配选择器

*{ }一般是用于去除默认样式

2.1.4 群组选择器

主要是用于相同属性的组合
即：

p,.box2l,div{
	height:100px;
	color:red;
}

2.1.5 后代选择器

div包着的p标签被附上属性
div p { color:red;}

注意：
在寻找的时候，是先从后面的标签找。

2.1.6 伪类选择器

语法︰

a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{l属性:属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;Link–visited–hover–active。

2.1.7选择器权重

3.1属性

3.1.1 文本属性

3.1.2 列表属性

3.1.3 背景属性

3.1.4 浮动

见自己的css学习（2）