（四）前端基础之CSS层叠样式表

一.CSS简介

CSS层叠样式表，

内联样式：只对当前的元素中的内容起作用，不方便使用，属于结构与表现的耦合，不方便后期的维护

内部样式：只能在当前页面中使用，可以使页面和表现分离

外部样式：通过link标签引入，进一步使表现和结构分离，可以利用浏览器的缓存加快用户访问的速度，提高了用户体验

firefox插件：tirt-3d-1.0.1-fx.xpi可以查看网页的3d效果

二.块级元素和内联元素

块级元素：页面布局，div，p，blockquote，ul，li等等

内联元素：选中文本设置样式 span ,q（短引用，浏览器会加“”，IE7不会）

一般情况下，只使用块元素包含内联元素，而不使用内联元素包含块元素

a中可以放任意元素除了它本身（块，内联元素都可以），p中不可以包含任何其他的块元素，（如果不按照规范来，网页不会报错，查看源码时，发现浏览器会努力修正页面）

h5中已经取消块级元素和内联元素，而是用“内容模型”来解释块，内联元素

三.选择器（主要列举一些特殊的选择器）

1）注意：移动端浏览器内核与PC端浏览器内核并不一样，移动端理论内核一般为UC，chrome

分组选择器：逗号

后代选择器：空格

子元素选择器：>（IE5,6不支持子元素选择器）

title属性：可给任何标签指定，当鼠标移入到元素上时，元素中的title属性将会作为提示文字提示

2）伪类选择器：专门用来表示元素的一种特殊状态，“：”表示

a:link:正常连接，

a:visited:访问过的链接，由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色

a:hover 鼠标滑过的链接（也可为其他元素设置，但IE6不支持初a以外的元素的伪类样式）

a:active 鼠标正在点击的链接（也可为其他元素设置，但IE6不支持初a以外的元素的伪类样式）

浏览器是通过历史记录来判断一个超链接是否被访问过

:foucs获取焦点，

：before指定元素之前，表示元素最前边的部分，一般before都需要结合content这个样式来使用

：after指定元素之后

：：selection选中的元素，火狐不支持

3）伪元素：使用伪元素表示元素中的一些特殊位置

如：给段落定义样式

4）属性选择器：根据元素中的属性或属性值来选取指定的元素

[属性名]：选取含有指定属性的元素，p[title]{}

[属性名=‘属性值’] 指定属性值的元素p[title=‘abc’]{}

[属性名^='属性值']:选取属性值以指定内容开头的元素p[title^='a']{}

[属性名$='属性值']:选取属性值以指定内容结尾的元素p[title$='a']{}

[属性名*='属性值']:选取指定内容的元素p[title*='ab']{}

5）其他子元素选择器  子选择器.> p >span  后代选择器：空格

:first-child:前面可指定p（元素）也可不指定，但作用域不一样

:last-child:

：nth-child:  even表示偶数，odd表示奇数

选择指定类型的子元素

:first-of-type

:last-of-type

:nth-of-type

兄弟元素选择器“+”，前一个+后一个，可选择一个元素后紧挨着的指定的兄弟元素

                          “~”，前一个~后边所有，选中后边所有的兄弟元素

6）否定伪类

：not（）{}

p:not（.abc）{}给所有p除class=abc的设置样式

四.样式的继承性

祖先元素上的样式也会被它的后代元素所继承，利用继承可将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动机场，但以下几种不会被继承

1）背景相关的样式都不会被继承background-

2) 边框相关的样式不会被继承

3）定位相关的样式也不会被继承

五、选择器优先级（权重）

1)!important 在样式后加这个，它的样式优先于所有的样式，开发中尽量避免

2）内联样式优先级：1000  ID选择器优先级：100   类和伪类优先级10  元素选择器优先级 1  

    通配符*优先级0   继承的样式没有优先级

注：选择器优先级计算不会超过它最大的数量级，110个class不会大于1个ID

并集选择器的优先级是单独计算

五.长度单位

1）px像素，一个像素就相当于屏幕中的一个小点，屏幕实际上由这些像素点构成的，

   不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小

2）百分比 % 浏览器会根据其父元素的样式来计算该值

      在创建一个自适应的页面时，经常 使用百分比

3）em  em和百分比类似，它是相对于当前元素字体大小来计算，1em=1font-size，浏览器中一般默认的文字大小都是16px，

font-size：30px设置的并不是文字本身的大小，字都是在看不见的格中，font-size实际上设置格的高度，并不是字体大小，（一般文字比格要小，有时也会大）

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里

六.颜色单位

RGB（红色的浓度，绿的浓度，蓝色的浓度）0-255  0表示没有

十六进制的RGB值表示颜色，#ff0

颜色单位：

1）在CSS中可直接使用颜色的单词表示不用的颜色

2）RGB值

七.字体分类

在网页中将字体分为5大类，serif（衬线字体），sans-serif（非衬线字体），monospace（等宽字体），cursive（草字字体），fantasy（虚幻字体）当设置为大分类时，浏览器会自动选择指定  大类放在font-family的最后。样式font

不同值之间使用空格隔开，但文字的大小和字体必须写，且字体最后，大小倒数第二，

简写性能好，浏览器只需解析一次，font：30px/50px  "微软雅黑"；/行高，

line-height：来设置行高应放font后面