CSS层叠样式表
学习目标：
1. 了解样式表的概念
2. 掌握样式表的分类及编写规则的语法
3. 掌握CSS样式表的使用
要点导航：
1. 样式表简介
2. 样式表的规则
3. 样式表中的属性
4. 样式表的引用
案例 带样式表的网页
步骤1：通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本。
步骤2：在记事本的编辑面板中输入如下代码代码，创建了使用样式的页面css1.html
样式表举例
这段文字将显示为红色
这段文字的背景色为黄色
这段文字将以黑体显示
步骤3：运行结果见下图
案例说明：上面案例中引入了更加灵活的样式规则定义页面的现实方式，这只是层叠样式表中的一种应用。从中也可以看出层叠样式表最大的优点就在于把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式。
内容介绍：
一 样式表简介：
CSS(Cascading Style Sheet,层叠样式表)技术上一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。
CSS的分类 一般情况下，层叠样式表可以分为三种：内联式样式表、嵌入式样式表和外部样式表通过连接或者导入方式使用外部样式表）。
1 内联式样式表
内联式样式表是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中，比如下面的例子：
内联式样式表
这种样式表只会对使用它的元素起作用，而不会影响HTML文档中的其他元素。也正因为如此，内联式样式表通常用在需要特殊格式的某个网页对象上。
2 嵌入样式表
嵌入式样式表通常包含在HTML，文档的头部，即HEAD元素中，并且有一个专门的元素style来标记这种样式表。它的书写格式通常为：
在这个格式中，style元素的type属性必须设为"text/css"，表示这定义的是一个层叠样式表。这样一来，当不支持层叠样式表的浏览器读到这个属性时，会自动忽略这个样式表。
第２６卷第３期
２０１０年５月 昆明冶金高等专科学校学报 Ｊｏｕｒｎａｌ ｏｆ Ｋｕｎｍｉｎｇ Ｍｅｔａｌｌｕｒｇｙ Ｃｏｌｌｅｇｅ Ｖ０１．２６ Ｎｏ．３ Ｍａｖ．２０ｌ１０
ｄｏｉ：１０．３９６９／ｊ．ｉｓｓｎ．１００９—０４７９．２０１０．０３．００２
用层叠样式表ＣＳＳ技术实现网页特效
丁海燕 ，邹 疆ｈ，邱 莎
（１．云南大学信息学院，云南昆明６５００９１；２．昆明学院ａ．现代教育技术中心；ｂ．计算机系，云南昆明６５００３１）
摘要：ＣＳＳ是为了弥补ＨＴＭＬ在样式编排上的不足所制定的一套扩展样式标准。ＣＳＳ技术在ＨＴＭＬ中不仅可以 美化网页，还可以改善ＨＴＭＬ文档的结构，减少格式重复代码，增强ｗｅＩ】编程的灵活性，提高程序源码的可读 性和执行效率。阐述了ＣＳＳ样式的概念，对比了ＣＳＳ与ＨＴＭＬ样式，介绍了ＣＳＳ的几种定义和引用方法，最后
用实例展现了ＣＳＳ典型网页效果： 关键词：ＣＳＳ：滤镜；网页特效 中图分类号：ＴＰ３９３．０９ 文献标识码：Ａ 文章编号：１００９—０４７９一（２０１０）０３—０００５—０４
Ｗｅｂｐａｇｅ Ｓｐｅｃｉａｌ Ｅｆｆｉｃａｃｙ ｂｙ Ｕｓｉｎｇ ＣＳＳ Ｔｅｃｈｎｏｌｏｇｙ
ＤＩＮＧ Ｈａｌ—ｙａｎ ，ＺＯＵ Ｊｉａｎｇ ，ＱＩＵ Ｓｈａ
（１．Ｆａｃｕｌｔｙ ｏｆ Ｉｎｆｏｒｍａｔｉｏｎ Ｓｃｉｅｎｃｅ，Ｙｕｎｎａｎ Ｕｎｉｖｅｒｓｉｔｙ，Ｋｕｎｍｉｎｇ ６５００９１，Ｃｈｉｎａ；２．Ｕｎｉｖｅｒｓｉｔｙ Ｋｕｎｎｆｉｎｇ ａ．Ｍｏｄｅｒｎ Ｅｄｕｃａｔｉｏｎ ａｎｄ Ｔｅｃｈｎｏｌｏｇｙ；ｂ．Ｄｅｐａｒｔｍｅｎｔ ｏｆ Ｃｏｍｐｕｔｅｒ Ｓｃｉｅｎｃｅ，Ｋｕｎｍｉｎｇ ６５００３ １，Ｃｈｉｎａ）
Ａｂｓｔｒａｃｔ：Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔ（ＣＳＳ）ｉｓ ａ ｓｅｔ ｏｆ ｓｔｙｌｅ ｓｔａｎｄａｒｄｓ ｅｓｔａｂｌｉｓｈｅｄ ｂｙ Ｗ３ Ｃ ｔｏ ｍａｋｅ ｕｐ ｔｈｅ
原⽣JavaScript（JS）修改添加CSS样式表（更好的性能）
如要增加⼀个 CSS
body {
overflow: hidden;
}
低性能⽅案
⽹络⼀般流传的都是：通过操作 DOM 的style 属性来简洁改变 CSS 的⽅法
但有⾁眼可见的延迟（在后⾯加个过渡动画你就知道）
document.querySelector("body").style.overflow= "hidden";
⾼性能⽅案
但是其实有⼀种直接操作 CSS 的⽅法
这种性能⽐第⼀种要好到不知哪⾥去，⾁眼感觉不到延迟
insertRule 函数代码⽰例
var css0 = document.styleSheets[0];
css0.insertRule("body {overflow: hidden;}", css0.rules.length);
注： insertRule() 最后的参数是 Index, 值为 0 时表⽰放在样式表的最前⾯（最前⾯的样式会被后⾯的样式效果覆盖，所以推荐写 css0.rules.length）
所以样式排序稍微⿇烦点，但你可以很轻松地想出办法定位的。
更多⽤法，⾃⼰把 css0 打印出来就知道了，我只是搞后端的，你问我我也不懂。效果在来个⽰例1
⽰例2（添加到CSS表的最后，优先级最⾼）
⽰例3（在最后⼀个CSS表的末尾添加，优先级MAX？，但速度最慢，因为要等前⾯CSS解析完）
// CSS0
var css= document.styleSheets;
var css0 = css[css.length-1];
var css0Last = css0.cssRules.length;
css0.insertRule("body {overflow: hidden;}", css0Last+0);
css0.insertRule("div#loading, a[name=top] { background-color: #f0f0f0; z-index: 1099; position: fixed; }", css0Last+1);
前端内容之CSS层叠样式表
CSS（Cascading Style Sheet层叠样式表）
把HTML认为是⽹页的⾻架
那么CSS就是⽤于对HTML⾻架进⾏修饰,⽐如加背景⾊、显⽰⽅式、位置等等属性
CSS语法形式：
⼀个完整的CSS样式需要具备选择器、声明两⼤部分，括号内的⼀条语句就是⼀个声明
CSS三种引⼊⽅式
1、 第⼀种：⾏内折叠括号内修饰：
管理员
普通⽤户
在 内的 style="background: #4ed6ff" 即对其进⾏的CSS样式定义
这种通常不建议⼤规模使⽤，代码繁琐且维护起来困难2、第⼆种：HTML在内定义，如：
Title
今天天⽓很好！
3、第三种：外部样式⽂件引⼊，通过在中使⽤link标签进⾏引⼊
Title
今天天⽓很好！
CSS之选择器：
1、基本选择器元素选择器
ID选择器
类选择器
图中 u1 是class的值 不是ul
***⽤类选择器时，类名不应定义为数字开头， 浏览器兼容性问题可能会导致某些浏览器不识别
***标签中的class属性如果有多个，要⽤空格分隔
通⽤选择器
2、组合选择器
后代选择器
⼉⼦选择器
毗邻选择器
弟弟选择器
3、属性选择器
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有⼀个值为hello的元素：*/
[title~="hello"] {
color: green;
}
模糊匹配的属性选择器
4、分组与嵌套 分组 当多个不同标签的元素需要设定相同的样式时，我们不需要为每⼀个都定义⼀个样式表，我们可以在多个选择器间⽤英⽂逗号分隔来使两个标签具有相同的样式
