CSS基础_02

　　先来说一下什么是css吧，cascading style sheets中文翻译为层叠样式表，就是用来控制页面布局样式的技术，在你熟悉了web编写之后会发现，其实css是一件很繁琐且没有逻辑的工作，甚是枯燥乏味，入门较易，精通极难。

　　鉴于css的都是比较星散的知识点，所以大概梳理一下本文将要介绍的几个点：css简介，css样式表的建立，css样式表的优先级，css语法，css选择器。

　　一、CSS简介

　　老样子，个人推荐学习任何知识都要先适当了解一下有关知识的历史，演变，发展前景。CSS是什么？WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。 用来表现XHTML或者XML等样式文件的计算机语言。 1998年5月21日由w3C正式推出的css2.0，目前推荐遵循的是W3C发布的CSS3.0.。

　　div+css的优点：

　　　　缩减页面代码，提高访问速度;

　　　　代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验会更好；

　　　　结构清晰，有利于seo - 有利于搜索引擎优化 - 缩短改版时间 - 对网站的重构有很好的支持 - 弥补html语言的不足。

　　其次，样式表能实现内容与样式的分离，方便团队开发，提高团队配合的效率，css同样也可以实现样式的复用，方便建站后期的维护和迭代工作等等。

　　

　　二、CSS样式表的建立

　　

　　1、内部样式表（嵌套到页面中）

　　

 

　　2、内联样式（行间样式，行内样式，嵌入式样式）

　　

 

　　3、引用外部样式表文件　

　　外部样式表的使用涉及两个步骤，一是建立，二是调用。建立的话即为创建一个.CSS的文件，调用则有两种方法。（工作中做项目，在排除特殊情况的前提下，是不允许使用内联样式的书写方式，因为这样会消耗很大的性能不利于用户体验，其次不符合编码的行为习惯。）　

　　

　　

　　link和import导入外部样式的区别：

　　差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。

　　差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。　

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

　　差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。（基本上现在都会用link，import在工作中运用较少。）

　　三、CSS样式表的优先级

　　1.内联样式表的优先级别最高

　　2.内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。

　　优先级其实还是一个比较常用的知识点，由于工作中会存在大量的迭代，更新，和需求的变动，所以有时我们需要在别人的样式基础上去修改和覆盖一些样式，当项目比较庞大时，重构他人的css代码最好的办法就是新建一个表然后去覆盖相关项的样式，这个时候就要搞清楚优先级的顺序了，当然，如果改动部分比较小，在考虑不浪费开发时间的前提下，也可以直接找到对应Dom去修改内联样式，某种意义上讲这也是最直接粗暴简单的办法。

　　四、CSS语法

　　css语法，由两部分组成：选择符+声明。     =》选择符{属性：属性值；属性：属性值；}

　　

　　

　　说明：

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

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

　　　　3）每条声明用分号结束。

　　　　4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。

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

　　　　温馨提示：Hbuilder编辑器中 Ctrl+Shift+F可以将选中代码格式化，HTML和CSS都可以格式化，如果对格式问题不清楚，可按照IDE上的缩进对齐方式去培养自己的编码格式习惯。

　　五、CSS选择器（CSS选择符）

　　选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。 CSS选择符包括4大类：类型选择符、id选择符、class选择符、和特殊选择符。

　　常用的选择符有十种左右：类型选择符（标记选择器）/ 类选择符 （class选择符）/ ID选择符 （id选择器）/ 伪类选择器 / 群组选择符（集合选择器）/ 通配符（*）/ 伪对象选择符 / 包含选择符（后代选择器）

　　1） 元素选择符/类型选择符（element选择器 ) 语法：元素名称{属性：属性值；}  

　　说明： a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p、img、em、strong、span......等。 b)所有的页面元素都可以作为选择符; 用法： 1)如果想改变某个元素得默认样式时，可以使用类型选择符；2)当统一文档某个元素的显示效果时，可以使用类型选择符；

　　2) id选择器 语法：#id名{属性：属性值;}

　　说明： 1）当我们使用id选择符时，应该为每个元素定义一个id属性， 如：<div id="top"></div> 2）id选择符的语法格式是“#”加上自定义的id名 如：#box{width:300px; height:300px;} 3)  起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字) 如：head标记 4）一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。 5)   最大的用处：创建网页的外围结构。

　　3）class选择器 语法：.class名{属性：属性值;}

　　说明： 1）当我们使用类选择符时，应先为每个元素定义一个类名称， 2）类选择符的语法格式是："如：<div class="top"></div>" 用法：class选择符更适合定义一类样式；

　　4) * 通配符 语法：*{属性：属性值；}

　　说明：通配选择符的写法是“*”，其含义就是所有元素。用法：常用来重置样式。

　　5）群组选择器 语法：选择符1,选择符2,选择符3{属性：属性值;}

　　说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。 做页面居中设置 ：选择符{margin:0 auto;}

　　6） 包含选择器 语法：选择符1    选择符2{属性：属性值;} 选择符父级 选择符子级{属性：属性值;}

　　说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;

　　7） 伪类选择器(伪类选择符) 语法 ：

　　　　a:link{属性：属性值;}超链接的初始状态;

　　　　a:visited{属性：属性值;}超链接被访问后的状态;

　　　　a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;

　　　　a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;

 

　　　涉及到不同的选择器，就会引入一个比较重要的概念，就是权重。（权重其实可以理解为每个选择器的价格，越高的就越贵，类比理解。至于每个选择器的权重是多少就只能去机械记忆了。）

　　　权重的相关规则：

　　　　1.当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。

　　　　2.相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。（注意：是样式中定义该选择符的先后，而不是html中使用先后）

　　　　选择符的权重：

　　　　 css中用四位数字表示权重，权重的表达方式如：0，0，0，0

　　　　 类型选择符的权重为0001 /class选择符的权重为0010 /id选择符的权重为0100 /子选择符的权重为0000 /属性选择符的权重为0010 /伪类选择符的权重为0010 /伪元素选择符的权重为0010 /包含选择符的权重：包含的选择符权重值之和  /内联样式的权重为1000 /继承样式的权重为0000

　　　　(工作中书写CSS，遵循一个原则即为低权重原则。因为权重越高，代码改写起来就会越困难，越不利于项目的迭代和跟进修改，故而我们要养成良好的习惯，完成需求的同时尽量降低css的权重。)

　　　　

　　　　

 

　　　　路漫漫其修远兮，css中的学问也是十分深刻奥妙的，和HTML一样，也是需要经过大量的练习，在实战中成长，切莫急于求成，填坑的道路上多看多学多总结方为正解，CSS学习之路，与君共勉。