CSS基础_02

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

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

　　1、CSS简介

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

　　div+css的优势：

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

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

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

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

　　

　　2、CSS样式表的创建

　　

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

　　

 

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

　　

 

　　三、引用外部样式表文件　

　　外部样式表的使用涉及两个步骤，一是创建，二是调用。创建的话即为建立一个.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在工做中运用较少。）

　　3、CSS样式表的优先级

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

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

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

　　4、CSS语法

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

　　

　　

　　说明：

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

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

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

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

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

　　　　舒适提示：Hbuilder编辑器中 Ctrl+Shift+F能够将选中代码格式化，HTML和CSS均可以格式化，若是对格式问题不清楚，可按照IDE上的缩进对齐方式去培养本身的编码格式习惯。

　　5、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学习之路，与君共勉。