CSS基础

Web相关概念：
1、W3C制定的结构和表现的标准
W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。(制定了结构和表现的标准，非赢利性的。)
2、WHATWG
网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
3、ECMA制定的行为的标准
欧洲电脑场商联合会。

HTML相关概念的介绍：
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
HTML5指的是HTML的第五次重大修改（第5个版本）
XML可扩展标记语言。（主要用于数据的处理与表达）了解。

Web标准：
结构（xhtml、xml） 表现（CSS） 样式（Javascript）

扩展知识点：post和get的区别
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程 。
3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
4. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
两种引入外部样式表link和import之间的区别
差别1、本质的区别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2、加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完后再被加载。所以有时候就看到@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3、兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，而@import只有在IE5以上的才能识别，而link标签无此问题。
差别4、使用dom（document object model文档对象模型）控制样式时的差别：当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
样式表的优先级：
A、内联样式表的优先级别更高
B、内部样式表与外部样式表的优先级和书写的先后顺序有关，后书写的级别高。
图片整合的优势：
1.通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。
2.通过整合图片来减小图片的体积。
样式：
1.内部样式
2.外部样式
rel（relation）:用于定义文档关联，表示关联样式表
type：定义文档类型
3.内联样式

盒模型的概念：
盒模型是CSS的基石，它规定了网页元素如何显示以及元素间相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

渐进增强和优雅降级
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同事保证其根基处于安全地带。

五大浏览器内核及其代表作
1.Trident （MSHTML） (三叉戟；三叉线；三齿鱼叉) 代表作品：IE、腾讯、360浏览器、Theworld世界之窗、Maxthon(遨游)
2.Gecko （壁虎） 代表作品：Mozilla Firefox、Netscape 6以后版本；最大优势是跨平台，能够在各大系统上运行；
3.Presto （迅速的） 代表作品：Opera（前内核），Presto 是由Opera Software开发的浏览器排版引擎，世界上公认的渲染速度最快的引擎。
4.Webkit （Safair内核，Chrome内核原型） 代表作品：Safari、Chrome、遨游浏览器3
5.Blink （由Google和Opera Software开发的浏览器排版引擎。） 2013年4月发布。

选择器
1）伪类选择器（伪类选择符）
a:link{属性：属性值;}超链接的初始状态；
a:visited{属性：属性值;}超链接被访问后的状态；
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态；
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态；
正常顺序：a:link– a:visited– a:hover–a:active
2）CSS选择符
css中用四位数表示权重，权重的表达方式如：0,0,0,0
类型选择符 0001
伪类选择符 0001
class选择符 0010
id选择符 0100
内联选择符 1000
包含选择符的权重：为包含选择符的权重之和
*当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。
*相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。（注意：是css样式中定义该选择符的先后，而不是html中使用先后。）

CSS3的概念：
CSS是层叠样式表，是一种样式语言，是用来告诉浏览器如何渲染页面的。
CSS3的优势：
1、让页面效果看起来更加炫酷，用户体验更高。
2、有利于开发和维护，还能提高网站的性能，增加网站的可访问性，可用性。
3、使网站能适配更多的设备，利于seo网站优化，提高网站的搜索排名。
CSS3选择器——属性选择器
CSS选择器的优势：可以帮助开发人员在开发中减少对html类名和id名的依赖，以及对html结构的依赖，使编写代码更加简单轻松。
1、E[attr]：只使用属性名，但没有确定任何属性值；
2、E[attr=”valur”]：指定属性名，并制定了该属性的属性值；
3、E[attr~=”valur”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“~”不能不写
4、E[attr^=”valur”]：指定属性名，并且具有属性值，属性值是以value开头的；
5、E[attr$=”valur”]：指定属性名，并且具有属性值，而且属性值是以value结束的；
6、E[attr*=”valur”]：指定属性名，并且具有属性值，而且属性值中包含了value；

CSS3选择器——属性选择器
1）UI元素状态伪类
1：enabled匹配所有用户界面（form表单）中处于可用状态（没有被禁用的）的元素。
2：disabled匹配所有用户界面（form表单）中处于不可用状态（禁用）的E元素。
3：checked匹配所有用户界面（form表单）中处于选中状态的元素。
2）CSS3的：序列选择器
1.同级别的第几个
：first-child选中同级别中的第一个标签
：last-child选中同级别中的最后一个标签
：nth-child（n）选中同级别中的第n个标签
：nth-last-child选中同级别中的倒数第n个标签
：only-child选中父元素中唯一的标签（比如有两个p标签，一个在div里面。一个随便在其他地方，使用）
2.同类型的第几个
：first-of-type 选中同级别中同类型的第一个标签
：last-of-type 选中同级别中同类型的最后一个标签
：nth-of-type（n）选中同级别中同类型的第n个标签
：nth-last-of-type（n） 选中同级别中同类型的倒数第n个标签
：only-of-child 选中父元素中唯一类型的某个标签
3）否定选择器（：not）
input:not([type=”sumbit”]){border:1px solid red;}（除了它没有边框外，其他input属性都有红色边框）
4）：root选择文档的根元素
：root{background：green；}将样式绑定到页面的根元素中，是指位于文档中最顶层结构的元素，在HTML页面中就是指包含着这个页面的html部分。

CSS3选择器——层次选择器
1）后代选择器（E F）
后代选择器也被称作包含选择器，所起作用就是可以选择某元素的后代元素，比如说E:F,前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，无论F在E中有多少层关系，都将被选中：
.demo li{color:blue;}
上面表示的是，选中div.demo中所有的li元素
所有的浏览器都支持的后代选择器。
2）子元素选择器（E > F）
子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E F）不一样，在后代选择器中F是E的后代，而子元素选择器E > F，其中F仅仅是E的子元素而已。上在代码表示选择ul下的所有子元素li。
ul>li{background:green;color:yellow;}
IE6不支持子元素选择器。
3）相邻兄弟元素选择器（E + F）
相邻兄弟选择器可以选中紧跟在另一元素后的元素。不能选中被隔开的元素。
IE6不支持这个选择器
4）通用兄弟选择器（E ~ F）
通用兄弟元素选择器：给指定选择器后面的所有选择器选中的所有标签加样式。无论后面元素有没有被隔开都可以选中。

CSS3私有属性
CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式，它暗示该CSS属性或规则尚未成为W3C标准的一部分。
几种常用前缀：-webkit- 谷歌 -moz- 火狐 -ms- IE浏览器 -o- 欧朋