本篇文章适合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 ;}

  例2:

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

  精简后代码:

     .div {
  margin:10px 20px ;
  }

  例3:
  

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

  精简后代码:
 

     .div {
  margin: 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 -)(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:#;
  }

  精简后代码:

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

   例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,-)(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=% %)
  }

  精简后代码:
 

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

  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:# to #
  Blue:#0000ff to # 00f
  Dark Grey:# to #
  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

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

去掉CSS赘余代码,CSS可以更简洁的更多相关文章

  1. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  2. CSS初始化示例代码

    CSS初始化示例代码 /* css reset www.admin10000.com */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code, ...

  3. 用AOP来让你的JS代码变得更有可维护性吧

    此文已由作者吴佳祥授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 好吧我承认这是篇任务. 最近看到个消息,ES2017已经定稿了,心想,我去,还完全没了解ES2016呢,ES ...

  4. HTML+CSS学习笔记 (13) - CSS代码缩写,占用更少的带宽

    标签:HTML+CSS 盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在m ...

  5. 【web性能】让css更简洁、高效

    用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?   看1个简单的CSS: DIV#divBox p span.red{color:red;},按习惯我们对这个CSS 的 ...

  6. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  7. CSS VS JS动画,哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  8. 更简洁的 CSS 清理浮动方式

    CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代 ...

  9. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

随机推荐

  1. <每日一题>题目7:简单的学生管理系统V1.0

    ''' # 学生管理系统v1.0 # 添加学生的信息 # 删除学生的信息 # 修改学生的信息 # 查看学生的信息 #遍历学生的信息 #退出系统 ''' import json #1 显示操作功能 de ...

  2. sqlserver2005分页存储过程

    Create proc [dbo].[sp_AbiTableLoad] ---------------------------------------------- -- 单表多表分页存储过程 -- ...

  3. PKU 百炼OJ 奖学金

    http://bailian.openjudge.cn/ss2017/A/ #include<iostream> #include <cmath> #include <m ...

  4. [转]使用RDLC报表

    使用RDLC报表(一) 1       建立数据源 启动VS2005新建一个窗体项目,命名为TestProj 在左边的窗体内选择“添加新数据源”或在菜单上操作“添加新数据源”: 选择后出现对话窗体,选 ...

  5. Android中Activity和AppcompatActivity的区别(详细解析)

    转载 https://blog.csdn.net/today_work/article/details/79300181 继承AppCompatActivity的界面. 如下图所示: copy界面代码 ...

  6. 基于PtrFrameLayout实现自定义仿京东下拉刷新控件

    前言 最近基于项目需要,使用PtrFrameLayout框架实现了自定义的下拉刷新控件,大体效果类似于京东APP的下拉刷新动态效果.在这里和大家分享一下具体的思路和需要注意的地方,以便帮助有类似开发和 ...

  7. request.getSession().getServletContext().getRealPath("upload/" ); 获取不到 tomcat 服务器目录

    上传一个文件,找不到该文件的位置 设置上传的文件是在项目中的话 可以通过查找项目的路径锁定上传的文件路径 解决步骤: 可以通过jsp页面 打印获取项目的物理路径 控制台即可输出项目路径 这只是找了了上 ...

  8. apache支持多主机头,并防止恶意空主机头的配置实现

    首先,需要启用 LoadModule vhost_alias_module modules/mod_vhost_alias.so # Virtual hostsInclude conf/extra/h ...

  9. Ubuntu 18.04 美化

    Ubuntu 18.04 美化 sudo apt install gnome-tweak-tool sudo apt install gnome-shell-extensions sudo apt i ...

  10. 【python之路29】python生成器generator与迭代器

    一.python生成器 python生成器原理: 只要函数中存在yield,则函数就变为生成器函数 #!usr/bin/env python # -*- coding:utf-8 -*- def xr ...