CSS层叠样式表.docx

第 4 页 共 4 页CSS层叠样式表什么是样式表：CSS 是 Cascading Style Sheet 的缩写。译作层叠样式表单。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。首先推荐一个学习网址：/css/css_intro.asp其次建议下载一份 CSS手册。下面只总结比较容易忽略的一些问题：1.样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 d 拥有最高的优先权。a 浏览器缺省设置 b 外部样式表 c 内部样式表（位于 标签内部） d 内联样式（在 HTML 元素内部） 2.盒模型元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。术语翻译:element : 元素。 padding : 内边距，也有资料将其翻译为填充。 border : 边框。 margin : 外边距，也有资料将其翻译为空白或空白边。 把 padding 和 margin 统一地称为内边距和外边距。3.一个非常关键的属性positionCSS中有不少属性是用来定位的，这也为我们采用DIV+CSS 布局，取代 古老的tabel布局提供了基础支持。bottom： 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 clip： 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 left： 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 overflow： 设置当元素的内容溢出其区域时发生的事情。 position： 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 right： 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 top： 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 vertical-align： 设置元素的垂直对齐方式。 z-index： 设置元素的堆叠顺序。如：项目中的应用; 而这其中非常关键和最容易搞混的概念就是 position 属性。static 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。 relative 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 left:20 会将元素移至元素正常位置左边 20 个像素的位置。 absolute 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 left、top、right 以及bottom 属性来规定。fixed 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 left、top、right 以及bottom 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。 这些属性是DIV布局的奠基石。由于浏览器的不同，盒模式中也有差异，比如说对于宽度盒高度，在不同浏览器中定义是不同的，IE6是包含边框 、内边距，而FF的只是指内容的宽度。细节上的差异，往往是我们在日常工作中能总结出来的。所以也不必太在意。当你的CSS写的不兼容时候，你自然就会想起这些内容。其实最常见还有clear 和 float属性:float就是浮动的意思，比如，默认的，我们知道，div是占满一行的，现在我们想把两个div显示在一行上，那怎么办呢111112222这样我们就设置了两个div，一个宽度100px,一个宽150px,可预览一下，我们的div仍在两行上，那么怎么把它改到一行上呢，这儿就需要float，设置第一个div的float为left111112222再预览，就可以看到，它们到一行上了。 clear是清除的意思，它有三个值，left，right，both很好理解，如果设置了clear:left，它就不怕它的左边有float，同理clear:right,clear:both，是左右都不让有float举个例子，还是上面的我们设置第二个div的clear:left,也就是不让它左边有float111112222我们预览一下，就可以看到，尽管第一个div已经float:left了，这两个div仍然在两行上，就是由于第二个div不让它左边有float因为css的定义是后面的可以覆盖前面的。4.对于javascript 操作 CSS属性一般在手册或者前面提供的那个网址中，对应的CSS属性有对应的js方法。但是有一点是很多程序员都会犯的错误。就是操作（特别是获取外联CSS文件中的相应属性）外联特指b 外部样式表 c 内部样式表（位于 标签内部） 往往有取不到值的情况发生：外部CSS文件内容：.aawidth:100px;height: