zoukankan      html  css  js  c++  java
  • WEB前端 -- CSS

    一、CSS介绍

        css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
        
        存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
        
        语法:style = 'key1:value1;key2:value2;'
        
            在标签中使用 style='xx:xxx;'
            在页面中嵌入 < style type="text/css"> </style > 块
            引入外部css文件
        
        必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的。

    二、CSS的基本概念

          层叠样式表
          CSS样式表

    三、CSS的书写的方式

    3.1、行内样式

          <div style="color:yellow"></div>

    3.2、内部样式

    head标签中
      <style>
          标签选择器
              div{
                  color:red;
              }
          ID选择器
              #id{
                  font-size:12px
              }
          类选择器
              .class{
                  font-size:12px  
              }
          组合选择器
            
          包含选择器
              div span{
                
              }
            
              <div>
                  <span>
                  </span>
              </div>
          分组选择器
              div,span{
                
              }
          * --通用选择器
              *{
                  color:red;
              }
          伪类选择器
              a:hover{
                  color:red;
              }
              a:active{
                  
              }
              a:visited{
                  
              }
              a:link{
                
              }
    </style>

    3.3、外部样式

        <head>
            <link href="a.css" />
        </head>

    3.4、CSS文字段落基本属性

        1、height:设置div的高度
        2、width:设置宽度
        3、line-height:设置文字的居中(设置与height同样)
            <div>123</div>
        4、text-align:left rigth center
        5、border:1px solid red;

    3.5、CSS背景

        background:
                background-img:url("1.jpg")
                background-repeat-x:
                background-repeat-y:
              background-position-x:
              background-position-y

    3.6、CSS的布局

        float:浮动
            left;
            right;
        清楚浮动:
            <div style="clear:both"></div>

    3.7、SS的盒子模型

        margin: 设置外边距
        padding:设置内边距

    3.8、CSS的定位

        position:
            1、fixed
                top right left bottom
            2、relative
                单独使用没有任何意义,需要结合absolute
            3、absolute
                定位方式:如果父级有定位方式,则以父级定位,如果没有,则以body定位。  

    3.8、z-index:

        设置div浮动,置顶

    3.9、opcatiy:

        透明度
        
    四、ie6的bug:
      http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201371611543769/

  • 相关阅读:
    JavaScript Web页面内容导出到Word、Excel (转载)
    合并多个声音文件
    龙舟记
    c#获取应用程序目录
    ADO.NET数据库连接池研究(一) 查看连接池数 (转)
    UpdatePanel 内控件 更新“外的”控件【转】
    web客户端播放wav文件
    解决DataList控件无缝滚动图片(转)
    关闭sleeping连接进程在Sql Server2000数据库存储过程中(转)
    win7下没有注册类别 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))
  • 原文地址:https://www.cnblogs.com/cxcx/p/6543620.html
Copyright © 2011-2022 走看看