CSS Web发学习实录.doc

1.外部链接CSS样式表 1.1.导入样式表： style type=”text/css” @import “test.css”; /style \\ 在style元素里使用@import语句将外部的CSS样式表文件导入。 1.2.链入样式表： link rel=”stylesheet” type=”text/css” href=”test.css” \\ 链入样式表是在head元素中使用link元素将其引入，外部样式表文件的名称作为link元素的href属性的值设置即可。 1.3导入样式表和链入样式表的区别： link元素属于HTML级的，而@import属于CSS级的。在页面运行的时候，浏览器获得HTML代码先运行HTML标签的分析，HTML代码在遇到link标签时会去加载link标签所链接的资源文件，并不会去顾及这个元素的内容。而在执行HTML文档的时候，浏览器会直接执行link元素链入的样式表的内容；到执行style元素的时候，才发现需要导入外部CSS样式表文件，这是浏览器才会异步请求CSS样式表文件，并同时向下执行HTML文档的其他样式。 这样在使用@import的时候，在网络比较慢的时候加载页面样式经常会有些延迟，所以一般页面开始的样式非常混乱难看，过一会儿才会恢复本来的样子。 2.CSS的语法 CSS也是一种语言，一种标识页面样式的标记语言，所以它也有自己的语法。 在CSS样式代码中，一条CSS样式声明的语言可以由两部分组成：选择符和样式列表。当然，这里要将使用元素内嵌的样式排除在外。 选择符是定义使用该样式列表的HTML元素的标识符，它可以是一个类（HTML元素的class属性）、一个元素id或者HTML元素的标记名称。 样式列表是一个集合，这里使用一对花括号来表示一组样式。一个样式的设置是由一个样式属性名称和一个属性值组成的，它们之间用冒号隔开。一个样式集合中多个样式之间使用分号分隔。 CSS样式表定义语句的格式如下： body{ text-align:center; padding-top:70px; font-family:”Monotype Corsiva”; } 3.注释 注释是对代码的一种说明性的标记，可以使用它对程序代码进行说明，使其更加易读易懂。 在CSS中可以使用斜杠“/”和星号“*”的组合来标记CSS文件的注释。 /*这是一行注释*/ body{ text-align:center; /* 设置元素中文本对齐方式为center（居中）*/ padding-top:70px; /* 设置元素顶部填充空间为70px（像素） */ } 4.CSS优先级 所谓CSS优先级，既是指CSS样式在浏览器中被解析的先后顺序。作为页面设计人员，了解这一点是十分重要的，因为这直接关系到页面最终展示的效果。 要了解CSS样式的优先级，我们必须知道CSS样式规则的一个很重要的特性--------继承性。 div{ color:red; color:blue; } 上面代码先后两次为div标记设置了文本颜色属性，在页面中展示出来的将是最后一次设置的值（这里是蓝色’blue’）。 另外，不同CSS样式的引入方式也可能会对该原则造成影响，这一点主要体现在引入外部CSS样式表文件中。 引入外部CSS样式表文件有两种方式，使用起来各有差异，详细说明如下。 @import语句导入：该语句导入的CSS样式表文件内容会自动加入到当前style元素的顶端执行，也就是说导入的样式先与当前style元素中配置的任何CSS样式执行。如果当前style元素中导入多个CSS样式表文件，那么它们之间则按导入的先后顺序进行解释执行。当然多个style元素互相之间就没有什么影响了。 link元素链入：该元素的使用比较简单，它只在使用link元素链入样式表文件的位置进行解析，先后顺序以link标签的顺序为准。这一点没有什么异议。 4.1.CSS的继承性 继承是”recolor” 当前元素的内容 div 子元素中的内容 div 下一级子节点（孙子级节点）中的内容 /div /div /div 然后为其添加样式： style type=”text/css” #recolor{ color:red; } /style 这样页面中的所有文本的样式都被设置为红色(red)了。 当然，也不是所有的CSS样式都能被继承。 CSS提供了智能分析的功能，一些我们一定不想被继承的样式，则不会被子元素继承，比如border、margin、padding、background等。因为一旦这些样式被继承，则会对页面的样式产生非常大的影响，这些是我们不想看到的。 比如刚才的页面代码，我们为其添加一个边框样式，代码如下： style t