顾名思义缩写有简写意思,那就总结一下CSS缩写知识点。
为什么要让CSS属性缩写?
1、简化代码。一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节。加快网页下载速度和网页加载速度。
2、优化CSS目的。其中CSS优化之一即是简化代码缩写CSS属性代码。
一、CSS样式属性单词代码简写优化
(1)CSS文本:

font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
line-height:22px;
即可简写缩写成:
font:12px/22px bold Arial,Helvetica, sans-serif;

(2)CSS背景:

background-color:#F00;
background-image:url(图片地址);
background-position:bottom;
background-repeat:no-repeat;
即可将背景CSS属性缩写为:
background:#F00 url(图片地址) no-repeat bottom;

(3)CSS内补距(CSS padding):

padding-top:5px;
paddding-right:20px;
padding-bottom:10px;
padding-left:15px;
即可缩写为:
padding:5px 20px 10px 15px; 或者
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
缩写为:
padding:5px 10px;

(4)CSS外边距(CSS margin):

margin-top:5px;
margin-right:20px;
margin-bottom:10px;
margin-left:15px;
即可缩写为
margin:5px 20px 10px 15px; 或:
margin-top:5px;
margin-bottom:5px;
margin-left:10px;
margin-right:10px;
缩写为:
margin:5px 10px;

(5)、CSS 边框:

border-top:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
即可缩写为:
border:1px solid #000;

总结:总结常用的CSS 缩写,希望在以后制作实践中多多使用和多多总结。

CSS优化压缩的更多相关文章

  1. 常用CSS优化总结——网络性能与语法性能建议

    在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...

  2. CSS的压缩 方法与解压

    为什么要压缩CSS? 1.大网站节约流量 2.加快访问速度 工具:Dreamweaver(手工替换,个人感觉任何文本编辑器都可以)不过DW可以还原 CSS压缩与CSS代码压缩还原方法,CSS压缩工具有 ...

  3. (转)常用CSS优化总结——网络性能与语法性能建议

    原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...

  4. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

  5. 关于js优化和css优化

    css优化: 1.css代码的压缩. 2.css文件的合并. 3.不滥用float,因为float在渲染时计算量比较大,所以尽量减少使用float. 4.避免在html标签中写style属性. js优 ...

  6. 教你如何写出高效整洁的 css 代码——css优化(转载)

    css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...

  7. CSS, JavaScript 压缩, 美化, 加密, 解密

    CSS, JavaScript 压缩, 美化, 加密, 解密 JS压缩, CSS压缩, javascript compress, js在线压缩,javascript在线压缩,css在线压缩,YUI C ...

  8. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

  9. js、css动态压缩页面代码

    1.js.css动态压缩页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...

随机推荐

  1. jQuery Ajax请求后台数据并在前台接收

    1.ajax基本语法 <script> $(function(){ $('#sub').click(function(){ var username=$('#username').val( ...

  2. 汇编:将指定的内存中连续N个字节填写成指定的内容

    1.loop指令实现 ;=============================== ;循环程序设计 ;将制定内存中连续count个字节填写成指定内容(te) ;loop指令实现 DATAS SEG ...

  3. Windows下安装最新版的MongoDB

    最近学习爬虫需要用到MongoDB来存储数据,在安装过程遇到了一些坑,在这里总结一些. 安装环境:Windows 10 安装步骤: 1.下载安装文件 下载地址:https://www.mongodb. ...

  4. C#在textBox中输出一个数组

    //将数组输出到文本框测试 for(i=0;i<arr.Length-1;i++){ this.textBox1.Text=this.textBox1.Text+arr[i]; }

  5. centOS下yum报错

    CentOS下yum报错 备注:当我们在CentOS下使用yum命令的时候,会报一些错误,一下是我总结的几个解决问题的方法.(保证自己的服务器可以上网) 一.关于Loaded plugins: fas ...

  6. oracle 11g XE 学习版添加scott用户方法全步骤

    安装企业版的orcale是不是太费时费力了?若只是学习用途的话,不妨试试轻便版的XE版本,同样是官网下载的,但是这个安装起来比完整版简便多了. 首先,你得先安装好orcale 11g XE 版本:(这 ...

  7. web框架与爬虫

    所有的web框架 http://www.cnblogs.com/wupeiqi/articles/5341480.html 爬虫技术 http://www.cnblogs.com/wupeiqi/ar ...

  8. luogu4172 [WC2006]水管局长

    就是用 lct 维护最小生成树 ref #include <algorithm> #include <iostream> #include <cstdio> #in ...

  9. 【MVC】 小问题

    [MVC] 小问题 1. url 传参中文乱码 : encodeURIComponent 转码 2. RedirectToAction 重定向 : ajax 调用无效, 直接 url 访问有效 3. ...

  10. C++学习003-#define 自定义宏

    C++中可以用#define来定义自定义的宏 也可以用使用#define来定义常量 但是#define只是简单的替换,在定义常量的时候没有语法检测 所以在C++定义常量可以使用  Const修饰 #d ...