首頁 >web前端 >html教學 >div+css (重点回顾)_html/css_WEB-ITnose

div+css (重点回顾)_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 12:27:39972瀏覽

 

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 {  } 

           // 不能是数字 ID选择器       #a{  } 

                // ID要唯一 交集选择器   h1,h2{  } 并集选择器(父类选择器) p a{  } 伪类选择器    锚连接                  LoVe   Hate CSS2 - :first-child 伪类   p:first-child { font-weight: bold; } 通用选择器             *{   }

  注意:

    一个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 属性普遍的认识.

   
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn