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=" ...
随机推荐
- NFS网络文件系统详解
第1章 NFS基本概述 1.1 什么是nfs NFS是Network File System的缩写及网络文件系统. 主要功能是通过局域网络让不同的主机系统之间可以共享文件或目录. NFS系统和Wind ...
- js 关于字符串转数字及数字保留位数的控制
1.parseInt()和parseFloat()两个转换函数,将字符串转换成相应的数字. 1.parseInt() parseInt进行转换时,将字符串转成相应的整数.浮点数以后的数字都不要了. p ...
- dedecms添加/编辑文章如何把附加选项去掉默认勾选状态
1.去掉添加时默认勾选状态. 在 系统->系统基本参数->其它选项 中,如图中的三个选项选择否即可. 设置完后可以看到添加时已经默认不勾选,但是编辑文章时还是默认勾选状态. 2.去掉编辑时 ...
- Python基本数据类型(二)
数字类型: 数字的定义: 1.数字不可变,不可迭代 在python3里面所有的整形都是 int 在python2里面数字叫整型,整数类型,有int 有long 数字的方法: 数字的方法: 1.--- ...
- Node.js 学习笔记 (一) 安装配置
Node.js 安装配置 本安装教程以Node.js v4.4.3 LTS(长期支持版本)版本为例 Window 上安装Node.js 你可以采用以下两种方式来安装. 1.Windows 安装包(.m ...
- tarnado源码解析系列一
目录 tarnado tarnado源码安装 tarnado测试程序 application类的解析 一. tarnado简介 最近在学习Python,无意间接触到的tarnado,感觉tarnado ...
- Leecode刷题之旅-C语言/python-70爬楼梯
/* * @lc app=leetcode.cn id=70 lang=c * * [70] 爬楼梯 * * https://leetcode-cn.com/problems/climbing-sta ...
- Android开发——View绘制过程源码解析(二)
0. 前言 View的绘制流程从ViewRoot的performTraversals开始,经过measure,layout,draw三个流程,之后就可以在屏幕上看到View了.上一篇已经介绍了Vi ...
- 高德API+Python解决租房问题(.NET版)
源码地址:https://github.com/liguobao/58HouseSearch 在线地址:58公寓高德搜房(全国版):http://codelover.link:8080/ 周末闲着无事 ...
- SQL的鸡肋:“视图”
不知道当年SQL定义者们设计视图时是出于什么样的考虑.实际效果是,视图夹在SQL指令和表之间,形成了一个三明治的结构.在这种结构下做检索,SQL指令每次都要通过视图转换,才能作用到表上.如果不 ...