CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容,为用户展现较具观赏的外表的。以下是小编来在优化网站时遇到的CSS一些小知识点。
CSS样式常见知识点

  1. 边距清空:
    1
    2
    3
    4
    5
    6
    body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldse,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
    body{font-size:12px;}
    img{border:none;}
    li{list-style:none;}
    input,select,textarea{outline:none;}
    a{text-decoration:none;}
  2. 清除浮动 :
    1
    2
    .clearfix:after{conter:"";display:block;clear:both;}
    .clearfix{zoom:1;}
  3. 浏览器当做编辑器:
    浏览器地址栏输入代码,可直接将浏览当做编辑器

    1
    data:text/html,<html contenteditable>
  4. 鼠标隐藏:
    1
    *{cursor:none!important;}
  5. 文字模糊效果:
    1
    p{color:transparent;text-shadow:#111 0 0 5px;}
  6. 居中样式 :

    垂直居中样式(translate css3需IE9)

    1
    .center-vertical{position:relative;top:50%;transform:translateY(-50%);}

    水平居中样式(translate css3需IE9) :

    1
    .center-horizontal{position:relative;left:50%;transform:translateX(-50%);}
  7. 多重边框 :
    1
    div{box-shadow:0 0 0 6px rgba(0,0,0,0.2),0 0 0 12px rgba(0,0,0,0.2),0 0 0 18px rgba(0,0,0,0.2),0 0 0 24px rgba(0,0,0,0.2);height:200px;margin:50px auto; width:400px;}
  8. 实时编辑css (IE6无效)
    1
    2
    3
    4
    5
    6
    7
    8
    <!DOCTYPE html>
    <html>
    <body>
    <style style="display:block" contentEditable>
    body{color:blue}
    </style>
    </body>
    </html>
  9. 文本框灰置
    有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使

    1
    <input type="text" name="input1" value="中国">

    的内容,”中国”两个字不可以修改。实现的方式归纳一下,有如下几种。

    方法1: onfocus=this.blur() 当鼠标放上就离开焦点

    1
    <input type="text" name="input1" value="中国" onfocus=this.blur()>


    方法2:readonly

    1
    2
    <input type="text" name="input1" value="中国" readonly>
    <input type="text" name="input1" value="中国" readonly="true">


    方法3: disabled

    1
    <input type="text" name="input1" value="中国" disabled="true">

  10. css3 移动web样式媒体查询的变化

    外联 :当屏幕等于小于480px调用new_file.css

    1
    <link type="text/css" rel="stylesheet" href="css/new_file.css" media="only screen and (min-width:480px)" />

    内联 :当屏幕大于480px调用使用本样式

    1
    2
    3
    4
    5
    6
    7
    <style>
    @media screen and (max-width:480px){
    body {
    background: blue;
    }
    }
    </style>

    一定要注意and后面的空格

网站资源来自用户分享,如有侵权行为请联系网站客服处理。
二月繁华 » CSS样式常见知识点

发表评论

提供最优质的资源集合

立即查看 了解详情