CSS层叠样式表
优势:使页面结构和表现分离1.引入方式: 1)行内样式:<h2 style="color:#0F0">Hello World</h2> 2)内部样式:<style type="text/css"> h2{ color:#F00; } </style> 3)外部样式:<link href=“a.css” type=“text/css” rel=“stylesheet”/> 推荐 <style type="text/css"> @import url("a.css"); // @import “a.css”; </style> 问题:link和@import的区别: Link和@import的区别: 1.隶属上的差别 link是一个html的一个标签,而@import是css的一个标签 2. @import次数限制 听说在IE下只能导入61个CSS样式文件 3.加载顺序的不同 当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS文件会同时被加载, 而@import引用的CSS 会等到页面全部被下载完再被加载。 4.兼容性上的差别 由于@import是CSS2.1提出的,@import只有在IE5以上的才能识别,而link标签无此问题 5.使用DOM控制样式时的差别 当使用javascript控制DOM(document.styleSheets)去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。 优先级问题:行内样式 > 内部样式 > 外部样式 就近原则
2.CSS选择器
1)语法格式:选择器{属性:属性值;} 举例:h2{color:#0F0;}
2) 常见选择器标记选择器 h2{ } 类选择器 .a { }
注意:
一个HTML元素只能有一个ID选择器,但是可以有多个类选择器。
?<h1 id = “a” id = “b”></h1> 错误
?<h1 class = “a b c”></h1> .a{ } .b{ } .c{ } 正确 3. 盒子模型(边距)
border,margin,padding.
boder:表盒子的边框。
margin:表盒子与外界的距离
padding:表盒子边界与盒子内内容的距离。
border:1px 表示上下左右边框都为1px
boder:1px 2px 表示上下边框为1px,左右边框为2px
border:1px 2px 3px 4px 表示边框的顺序为上,右,下,左。
单独设置边框:底部边框:border-bottom: 2px solid #cccccc;
头部边框: border-top: 2px solid #cccccc;
margin,padding跟border类似。
IE6/IE7/firefox最终宽度=左外边距+左边框宽+左内边距+宽度+右内边距+右边框宽+右外边距。
4.CSS浮动
浮动概念:
在使用div布局的时候,发现每个div都是按照块的方式出来的,不利于页面的布局,所以CSS就提出元素的浮动技术,可以使得块元素在浮动的情况下在同一行中出现。
特点
元素在浮动的时候遇到父容器的边框就会卡住
如果子元素和父元素同时向相反的方向浮动,那么先浮动父元素,然后子元素在父亲元素的内部浮动
如果父元素没有浮动而且包含了浮动的子元素,那么浮动的元素就会脱离文档流(重点)
1:网页布局方式:浮动式布局,定位布局。都脱离文档流(上下关系)的控制。
2:浮动清理:clear
3:何时选用浮动定位
注意:当网站有较强的分辨率及内容大小的适应能力时,需要浮动。距中布局,横向宽度可百分比缩放,需要借助margin,padding,border等属性。
层设置浮动后,该层会脱离文档流,后面的层会流进该层里面,但是文字不会流进该层。它没完全脱离文档流
绝对定位会使该层完全脱离文档流,置其他对象之上,这个时候的层具有z-index属性。z-index属性的值越大,这个层越显示在上层。postion有常用的2个值: absolute和 relative,前者表示绝对定位,不占空间。后者表示相对定位,会占用空间。默认不设置为static
z-index
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对z-index 属性普遍的认识.