前端学习历程3

css

什么是CSS:

CSS（cascading style sheets）层叠样式表 WEB标准中的表现标准语言，表现标准语言在网页中主要对网页信息的显示进行控制，简单来说就是如何修饰网页信息的显示样式。用来表现XHML或者XML等样式文件的计算机语言。

CSS语法：

(1)每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；

(2)属性必须放在花括号中，属性与属性值用冒号连接。

(3)声明用分号结束。

(4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。

(5)在书写样式过程中，空格、换行等操作不影响属性显示。

CSS写法：

外部样式表

创建步骤：第一步，创建对象；第二步，新建一个CSS文件；第三步，利用link或者import引入CSS文件

<div></div>
<link rel="stylesheet" type="text/css" href="css文件路径路径">
注：relaction定义关联性 stylesheet样式表
@import url("css文件路径")

link和import的区别：

①本质的差别，link属于XHTML标签，而@import完全是CSS提供的一种方式。

②加载顺序的差别，当一个页面被加载的时候（就是被浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部下载完载被加载。所以有时浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

③兼容性的差别，@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

行内样式表

<style="color:"></style>

CSS样式表的优先级：(就近原则)行内>内部>外部，!important最优先

标签选择器：

为什么要用选择器？要对CSS对HTML页面中的元素实现一对一，一对多或多对一的控制，这就需要用到CSS选择器。

元素选择符/类型选择符（element选择器）如 div{width:100px;height:100px;background:red}

class选择器/类选择器

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

id选择器

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

*通配符选择器

语法：*{属性：属性值;}
说明:通配符选择器的写法是"*",其含义就是所有元素。
*{margin:0;padding:0}代表清楚所有元素的默认边距值和填充值；

群组和后代选择器

群组选择器

语法：选择符1，选择符2，选择符3....{属性：属性值} 例：#top1，#nav1，h1{width：960px}
说明：当多个选择符应用的声明时，可以将选择符用","分隔的方式，合并为一组。
margin：0 auto;实现盒子的水平居中

包含选择器/后代选择器

语法：选择符1 选择符2{属性：属性值;}
说明：含义就是选择符1中包含的所有选择符2;
用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如：结构：<ul class="list">
           <li></li>
           <li></li>
           <li></li>
         </ul>
    样式：.list li{background:red;}

伪类选择器

语法：
a:link{属性：属性值;}超链接的初始状态；
a:visited{属性：属性值;}超链接被访问后的状态；
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态；
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态；
Link--visited--hover--active
说明：
A)当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a:link,a:visited,a:hover,a:active错误的顺序有时会使超链接的样式失效；
B）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color:red;},a:hover{color:green;}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。

选择器的权重

个数	选择器	权重，CSS中用四位数字表示权重，权重的表达式如：0，0，0，0
1	类型（元素）选择器	0001
2	class选择器（类选择器）	0010
3	id选择器	0100
4	包含选择符	为包含选择符的权重之和
5	内联样式	1000
6	！important	10000
CSS选择器解析规则1：		当不同选择符的样式设置有冲突的时候，高权重选择的样式会覆盖低权重选择符的样式
CSS选择器解析规则2：		相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式