预览加载中，请您耐心等待几秒...

CSS层叠样式表.docx

预览
1/4
2/4
3/4
4/4

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

第页共NUMPAGES4页 CSS层叠样式表 什么是样式表： CSS是CascadingStyleSheet的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 首先推荐一个学习网址：HYPERLINK"http://www.w3school.com.cn/css/css_intro.asp"http://www.w3school.com.cn/css/css_intro.asp 其次建议下载一份CSS手册。 下面只总结比较容易忽略的一些问题： 1.样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字d拥有最高的优先权。 a浏览器缺省设置b外部样式表c内部样式表（位于<head>标签内部）d内联样式（在HTML元素内部） 2.盒模型 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 术语翻译:element:元素。padding:内边距，也有资料将其翻译为填充。border:边框。margin:外边距，也有资料将其翻译为空白或空白边。把padding和margin统一地称为内边距和外边距。 3.一个非常关键的属性position CSS中有不少属性是用来定位的，这也为我们采用DIV+CSS布局，取代古老的tabel布局提供了基础支持。 bottom：定义了定位元素下外边距边界与其包含块下边界之间的偏移。clip：设置元素的形状。元素被剪入这个形状之中，然后显示出来。left：定义了定位元素左外边距边界与其包含块左边界之间的偏移。overflow：设置当元素的内容溢出其区域时发生的事情。position：把元素放置到一个静态的、相对的、绝对的、或固定的位置中。right：定义了定位元素右外边距边界与其包含块右边界之间的偏移。top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。vertical-align：设置元素的垂直对齐方式。z-index：设置元素的堆叠顺序。 如：项目中的应用; <!--收藏start--> <divstyle="position:absolute;width:193px;height:50px;left:85px;top:565px;"id="favoliten"><img src="images/default/favoliten.png"border="0"/></div> <divstyle="position:absolute;width:193px;height:50px;left:85px;top:565px;visibility:hidden;"id="favolitenfocus"> <imgsrc="images/default/favolitenfocus.png"/></div> <!--收藏end--> 而这其中非常关键和最容易搞混的概念就是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显示在一行上，那怎么办呢<divstyle="width:100px;">11111</div><divstyle="width:150px">2222</div>这样我们就设置了两个div，一个宽度100px,一个宽150px,可预览一下，我们的di