• 常用css简写


    CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小,其实还有很多其他益处。臃肿而杂乱的CSS样
    式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。

    font(字体)
    ==========
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:arial,verdana;
    
    简写成顺序:font-style | font-variant | font-weight | font-size/line-height | font-family
    
    font:italic small-caps bold 12px/1.5em arial,verdana;
    Borders(边框)
    =============
    border-1px;
    border-style:solid;
    border-color:#000;
    
    简写成顺序:border-width | border-style | border-color(先设置四个边的默认风格,然后声明具体的哪个边要显示。)
    
    border:1px solid #D5D5D5;
    border-0 0 1px 0;
    background背景
    ==============
    background-image: url(“logo.png”);
    background-position: top center;
    background-repeat: no-repeat;
    
    简写成顺序:background-color | background-image | background-repeat | background-attachment | background-position
    
    background:#FFF url(logo.png) no-repeat top center;
    Margin(外)
    Padding(内)
    ===========
    margin-top:0px;
    margin-right:10px;
    margin-bottom:0px;
    margin-left:10px;
    
    简写成顺序:top | right | bottom | left
    
    margin:0 10px 0 10px;
    list-style
    ==========
    list-style-type:square;
    list-style-position:outside;
    list-style-image:url(bullet.gif);
    
    简写成顺序:list-style-type | list-style-position | list-style-image
    
    list-style:square outside url(bullet.gif);
  • 相关阅读:
    深入浅出:了解前后端分离优势、前后端接口联调以及优化问题
    深入浅出:了解JavaScript中的call,apply,bind的差别
    Vue2.0 搭建Vue脚手架(vue-cli)
    深入浅出:promise的各种用法
    深入浅出:了解常见的设计模式(闭包、垃圾回收机制)
    sql server xml 功能
    sqlite 用法
    PowerDesigner使用
    asp.net 开发注意的几点
    vue template
  • 原文地址:https://www.cnblogs.com/chixiaojin/p/3266318.html
Copyright © 2020-2023  润新知