CSS优化压缩
顾名思义缩写有简写意思,那就总结一下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优化压缩的更多相关文章
- 常用CSS优化总结——网络性能与语法性能建议
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...
- CSS的压缩 方法与解压
为什么要压缩CSS? 1.大网站节约流量 2.加快访问速度 工具:Dreamweaver(手工替换,个人感觉任何文本编辑器都可以)不过DW可以还原 CSS压缩与CSS代码压缩还原方法,CSS压缩工具有 ...
- (转)常用CSS优化总结——网络性能与语法性能建议
原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)
ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...
- 关于js优化和css优化
css优化: 1.css代码的压缩. 2.css文件的合并. 3.不滥用float,因为float在渲染时计算量比较大,所以尽量减少使用float. 4.避免在html标签中写style属性. js优 ...
- 教你如何写出高效整洁的 css 代码——css优化(转载)
css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...
- CSS, JavaScript 压缩, 美化, 加密, 解密
CSS, JavaScript 压缩, 美化, 加密, 解密 JS压缩, CSS压缩, javascript compress, js在线压缩,javascript在线压缩,css在线压缩,YUI C ...
- 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作
前端自动化(三) 合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...
- js、css动态压缩页面代码
1.js.css动态压缩页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
随机推荐
- jQuery Ajax请求后台数据并在前台接收
1.ajax基本语法 <script> $(function(){ $('#sub').click(function(){ var username=$('#username').val( ...
- 汇编:将指定的内存中连续N个字节填写成指定的内容
1.loop指令实现 ;=============================== ;循环程序设计 ;将制定内存中连续count个字节填写成指定内容(te) ;loop指令实现 DATAS SEG ...
- Windows下安装最新版的MongoDB
最近学习爬虫需要用到MongoDB来存储数据,在安装过程遇到了一些坑,在这里总结一些. 安装环境:Windows 10 安装步骤: 1.下载安装文件 下载地址:https://www.mongodb. ...
- C#在textBox中输出一个数组
//将数组输出到文本框测试 for(i=0;i<arr.Length-1;i++){ this.textBox1.Text=this.textBox1.Text+arr[i]; }
- centOS下yum报错
CentOS下yum报错 备注:当我们在CentOS下使用yum命令的时候,会报一些错误,一下是我总结的几个解决问题的方法.(保证自己的服务器可以上网) 一.关于Loaded plugins: fas ...
- oracle 11g XE 学习版添加scott用户方法全步骤
安装企业版的orcale是不是太费时费力了?若只是学习用途的话,不妨试试轻便版的XE版本,同样是官网下载的,但是这个安装起来比完整版简便多了. 首先,你得先安装好orcale 11g XE 版本:(这 ...
- web框架与爬虫
所有的web框架 http://www.cnblogs.com/wupeiqi/articles/5341480.html 爬虫技术 http://www.cnblogs.com/wupeiqi/ar ...
- luogu4172 [WC2006]水管局长
就是用 lct 维护最小生成树 ref #include <algorithm> #include <iostream> #include <cstdio> #in ...
- 【MVC】 小问题
[MVC] 小问题 1. url 传参中文乱码 : encodeURIComponent 转码 2. RedirectToAction 重定向 : ajax 调用无效, 直接 url 访问有效 3. ...
- C++学习003-#define 自定义宏
C++中可以用#define来定义自定义的宏 也可以用使用#define来定义常量 但是#define只是简单的替换,在定义常量的时候没有语法检测 所以在C++定义常量可以使用 Const修饰 #d ...