首页 > 代码库 > 去掉CSS赘余代码，CSS可以更简洁

去掉CSS赘余代码，CSS可以更简洁

2024-07-06 10:37:24   224人阅读

本篇文章适合css新手学习，对于已经掌握了css的朋友们也可以通过本片文章来复习知识。　　

作者通过实践，认为在有些情况下css的代码是可以更加简洁的，多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的。

精简的代码对于网页是有莫大的好处的，对于浏览者访问速度会有一定的提升，另外对于搜索引擎也更加可以抓取网页关键内容。废话不说了，下面就看看笔者总结的可以精简的代码:

　　1.Margin & Padding

　　例1：

    .div {
    　　margin-top:10px;
    　　margin-right: 5px;
    　　margin-bottom:30px;
    　　margin-left:0px;
    　　}

　　精简后代码如下：

.div { margin:10px 5px 30px 0;}

 

 

　　例2：

    .div {
    　　margin-top:10ox;
    　　margin-right:20px;
    　　margin-bottom:0;
    　　margin-left:20px;
    　　}

 

　　精简后代码：

    　.div {
    　　margin:10px 20px 0;
    　　}

 

　　例3：
　　

        .div {
        　　margin-top:0;
        　　margin-right:auto;
        　　margin-bottom:0;
        　　margin-left:auto;
   　　 　　}

　　精简后代码：
　

    　.div {
    　　margin:0 auto;
    　　}

 

　　例4：

    　.div {
    　　margin-top:50px;
    　　margin-right:50px;
    　　margin-bottom:50px;
    　　margin-left:50px;
    　　}

 

　　精简后代码：

    　.div { margin:50px; }

 

　　2.border的缩写

　　例1：

    .div {
    　　border-width:5px;
    　　(thin,thick,medium,set vaule)(default=medium)
    　　border-style:dotted;
    　　(solid,dashed,dotted,double,etc)(default=none)
    　　border-color:blue;
    　　(named,hex,rgb or 0-255)(default=value of elements/elements parent color property)
    　　}

 

　　精简后代码：

    .div {
    　　border:5px dotten blue;
    　　}

　　
　　例2：

    .div {
    　　border-right-width:2px;
    　　border-right-style:solid;
    　　border-right-color:#666666;
    　　}

 

　　精简后代码：

    　.div {
    　　border-right:2px solid #666;
    　　}

 

 

　　　例3：

　.div {
　　border-top-width:3xp;
　　border-right-width:2px;
　　border-bottom-width:3px;
　　border-left-width:2px;
　　}

 

　　精简后的代码：
　

    .div {
    　　border-width:3px 2px;
    　　}

 

　　3.Background缩写

 
    .div {
    　　background-color:#CCCCCC;
    　　(named,hex,rgb,0-255)(default=transparent)
    　　background-image:url(images/bg.gif);
    　　(url or none)(defaule=none)
    　　background-repeat:no-repeat;
    　　(repeat,repeat-x,repeat-y or no-repeat)(default=repeat)
    　　background-attachment:scroll;
    　　(fixed or scoll)(default=scroll)
    　　background-position:top left;
    　　(top,right,left,bottom or center)(default=0% 0%)
    　　}


　　精简后代码：
　

    　.div {
    　　background:#CCC url(images/bg.gif) no-repeat 0 0;
    　　}

 

　　4.font

 
    .div {
    　　font-family:Verdana,Arial,Helvetica;
    　　font-size:12px;
    　　font-weight:bold;
    　　font-style:italic;
    　　font-variant:normal;
    　　line-height:1.5;
    　　}

 

　　精简后代码：
　

    　.div {
    　　font:italic bold 12px/1.5 Verdana,Arial,Helcetica;
    　　}

 

　　5.list缩写

 
    .div {
    　　list-style-image:url(images/bullet.gif);
    　　list-style-position:inside;
    　　list-style-tupe:squere;
    　　}


　　精简后的代码：

    　.div {
    　　list-style:square inside url(images/bullet.gif);
    　　}

　

　　6.颜色的缩写
　　

  　　  Aqua:#00ffff to #0ff
    　　Black:#000000 to #000
    　　Blue:#0000ff to # 00f
    　　Dark Grey:#666666 to #666
    　　Fuchsia:#ff00ff to #f0f
    　　Light Grey:#cccccc to #ccc
    　　Lime:#00ff00 to #0f0
    　　Orange:#ff6600 to #f60
    　　White:#ffffff to #fff
    　　Yellow:#ffff00 to #ff0

　　以上元素多属性，因此在某些时候可以遵从一定的规律对它们进行缩写。
　　更多精彩内容正在整理中，欢迎继续浏览。


联系
我们