html、css、js入门-9：CSS样式

 

CSS 样式

 

CSS 单位 -尺寸

  %  : 百分比
  in : 英寸
  cm : 厘米
  mm : 毫米
  pt : 磅(1pt等于1/72英寸)
  px : 像素(计算机屏幕上的一个点)
  em : 1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍

 

CSS 单位 - 颜色

. rgb(x,x,x): RGB值，如 rgb(255,0,0)

. rgb(x%,x%,x%): RGB百分比值，如rgb(100%,0%,0%)

. #rrggbb : 十六进制数，如 #ff0000

. #rgb : 简写的十六进制数，如#f00

 

尺寸属性

  . width 和 height
  . overflow:当内容溢出元素框时如何处理

       -- visible
       -- hidden
       -- scroll
       -- auto

 

 

边框属性

  . 简写方式

       -- border:width style color;

  . 单边定义
    
       -- border-left/right/top/bottom:width style color;

  . border-width
 
       -- border-left/right/top/bottom-width

  . border-style
 
       -- border-left/right/top/bottom-style
 
  . border-color

       -- border-left/right/top/bottom-color

 

 

 

边框属性

     input.btn
     {
        height:30px;
        width:80px;
        color:black;
        background:#f0f0f0;
        border-left:2px solid #fff;
        border-top:2px solid #fff;
        border-right:2px solid #6a6a6a;
        border-botttom:2px solid #6a6a6a;
        background:#c0c0c0;
     }

 

 

框模型

   . 框模型 (Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式

   

框模型

   . width 和 height 指内容区域的宽带和高度

   . 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的综尺寸

    例如:
           
                  #box
                   {
                      width:70px;
                      margin:10px;
                      padding:5px;
                   }

 

 

 

内边距

    . 内边距:  和内容元素之间的距离
         -- padding:value;

    . 单边设置

         -- padding-top/right/botton/left:value;

    . 简写方式

         -- padding: value1 value2 value3 value4;
                    
                      top   right  bottom  left

 

外边距

    . 外边距: 与下一个元素之间的空间量
        -- margin:value;

    . 单边设置
 
        -- margin-top/right/bottom/left:value;

    . 简写方式

        -- margin：value1 value2 value3 value4;
                    top   right  bottom  left

 

 

外边距

    . margin 可取值为auto, 由浏览器计算外边距

       div{
         width:100px;
         height:100px;
         border:1px solid black;
         margin:0 auto
       }

      <div></div>

        <!--设置div页面上居中-->

 

项目案例:

  NetCTOSS ------
    admin_list  页面布局

 

 

背景属性

   .  背景色 background-color

   .  背景图像

        background-image:url();
        background-repeat:repeat/repeat-x/repeat-y/no-repeat;
        background-position:left top;
        background-attachment:scroll/fixed;

   .  组合设置：

        background:#9dcdfe url("Tulips.jpg") no-repeat fixed left top;

 

项目案例

    NetCTOSS -----
     admin_list 页面背景

 

文本格式化

   . 指定字体: font-family:value1,value2;
   . 字体颜色: color:value;
   . 字体大小: font-size:value;
   . 字体加粗: font-weight:normal/bold;
   . 文本排列: Text-align:left/right/center;
   . 行高: line-height:value;
   . 文字修饰: text-decoration:none/underline;
   . 文本缩进: text-indent:value;

 

项目案例：

    NetCTOSS-----
     admin_list 页面文本

 

 

表格样式

   .  垂直对齐

         vartical-align:top/middle/bottom;
 
   .  边框合并

         border-collapse:separate/collapse;

   .  边框边距

         border-spacing:value;

 

 

项目案例:

            NetCTOSS----
            admin_list 页面表格

 

 

浮动定位

    . 浮动定位是指
        -- 将元素排除在普通流之外
        -- 将浮动元素放置在包含框的左边或者右边
        -- 浮动元素依旧位于包含框之内

    . 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框
        的边框为止。

 

 

float 属性

    . 浮动是指，将元素排除在普通流之外
    . 并将元素放置在包含框的左边或者右边，
        -- 浮动的框可以向左或向右移动，直到其外边缘碰到
             包含框或另一个浮动框的边框为止

    . 设置浮动
 
           float:none/left/right;

 

 

clear 属性

     . clear 属性用于清除浮动所带来的影响
     . clear:none/left/right/both;
            -- 定义了元素的哪边上不允许出现浮动元素

        
      <div style="float:left;border:1px solid black;">div text</div>

    
例如：
     <p>p text</p>            <p style="clear:left">p text</p>

页面显示:
 
 div text    p text                   div text
                                      p   text     

 

 

 

项目案例:
 

           NetCTOSS ----
           admin_list logo图片  

 

 

 

显示方式   display

  . 块级元素: 如 <div>、<h1>或<p> 等元素

  . 行内元素/内联元素:如<a>、<span> 等元素

  . 使用display 属性来修改元素框的显示方式，即改变生成的框的类型

 
             display:none/block/inline   

 

 

显示方式    display

     a {
          border:1px solid black;
          width:70px;
          height:30px;
          background-color:silver;
     }

     
      <a href="#">链接1</a>
      <a href="#" style="display:block;">链接2</a>
      <a href="#" style="display:none;">链接3</a>
      <a href="#">链接4</a>

 

 

列表样式

       list-style-type:none/disc/circle/等 ;
       list-style-image:url();

   例如：

          li {list-style-type:none;}
          li a {text-decoration:none;}

         
             ul.parent li{
                  list-style-image:url(dh.gif);
             }

             ul.parent li ul li {
                  list-style-image:url(ph.gif);
             }

          <ul class="parent">
             <li>账户
                <ul>
                    <li>
                       <a href="#">基本信息</a>
                    </li>
                    <li>
                       <a href="#">修改密码</a>
                    </li>
                </ul>
             </li>
             <li>相册
                <ul>
                    <li>
                       <a href="#">上传照片</a>  
                    </li>
                    <li>
                       <a href="#">我的相册</a>
                    </li>
                </ul>
             </li>
          </ul>

 

项目案例:

       NetCTOSS -------
         admin_list 导航栏

 

 

 

定位概述

      .   普通定位

           --  页面中的块级元素框从上到下一个接一个地排列
           --  每一个块级元素都会出现在一个新行中
           --  内联元素将在一行中从左到右排列水平布置

      .   浮动

      .   相对定位

 

 

定位属性

     .  position 属性 : 更改定位模式为相对定位、决定定位或者固定定位

            -- position : static/relative/absolute/fixed;
 
     .  偏移属性:实现元素框位置的偏移

            -- top/bottom/right/left: value;

     .  堆叠顺序

            -- z-index:value;

 

 

相对定位

       . 元素仍保持其未定位前的状态
       . 原本所占的空间仍保留
       . 元素框会相对与它原来的位置偏移某个距离

 
       div{
          width:100px;
          height:50px;
          border:1px solid gray;
        }

 
      <body>
           <div></div>
           <div style="position:relative;left:20px;top:10px;"></div>
      </body>

 

绝对定位

       . 将元素的内容从普通流中完全移除

       . 并使用偏移属性来固定该元素的位置
             -- 相对于最近的已定位祖先元素
             -- 如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，
                 比如 body 元素

 

绝对定位

      div.parent{
          width:100px;
          height:70px;
          border:1px solid gray;
      }

      div.child{
          width:80px;
          height:30px;
          border:1px solid black;
          background-color:silver;
      }

      <body>
           <div class="parent">
               <div class="child">1</div>
               <div class="child"                    style="position:absolute;top:10px;left:20px;">2
               </div>
           </div>
      </body>

 

 

绝对定位
   
    div.parent{
       width:100px;
       height:70px;
       border:1px solid gray;
       position:relative;
    }

    div.child{
       width:80px;
       height:30px;
       border:1px solid black;
       background-color:silver;
    }

   
    <body>
        <div class="parent">
            <div class="child"></div>
            <div class="child" style="position:absolute;top:10px;left:20px">
            </div>
        </div>
    </body>

 

项目案例：

     NetCTOSS ------
     admin_list 操作提示框