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 缩写,希望在以后制作实践中多多使用和多多总结。

时间: 2024-10-13 10:20:29

CSS优化压缩的相关文章

DIV CSS优化 CSS压缩技巧教程

DIV CSS优化 DIVCSS5为大家介绍简单的CSS优化.涉及优化内容:CSS代码优化.CSS重用优化.缩短字符.删除换行等处优化 目录 CSS样式单词简写优化 标点符号优化 删除换行 CSS重用优化 CSS代码优化简写总结 一.CSS样式属性单词代码简写优化 - TOP 1.border(CSS边框)简写: 1).4个边边框宽度为1px,颜色为#000 border-color:#000; border-style:solid; border-width:1px 可以简写为:体感音乐放松椅

css3 转换 、 过渡 、 动画 、 CSS 优化

1. 转换的原点 默认在中心点: 修改原点:transform-orign: 值: 1.x坐标 y坐标 当前物体左上角为x:0px y:0px; 2.宽度百分比 高度百分比 0%  0%  左上点 50% 50% 中心点 3.关键字: top bottom left right center 中间 默认 left top 左上点 4.如果只给一个值,x坐标和y坐标相同: 两     x坐标 y坐标 三     x坐标 y坐标 z坐标 2.转换 2d 形状 尺寸 位置 transform: 旋转:

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

关于CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些  合并压缩css文件等 语法性能:优化语法  合并css语句 CSS压缩 就是把我们CSS中没用的空白符等删去,达到缩减字符个数的目的 .test{ background-color:#ffffff; background-image:url(a.jpg); } 经过压缩后会变成这样 .test{ background-color:#fff; background-image:u

开源作品-PHP写的JS和CSS文件压缩利器-SuMinify_PHP_1_5

前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件.外部资源文件有一些是第三方插件,有一些是自己写的业务功能脚本,项目引用这些外部文件,需要把没有压缩过的第三方插件压缩后再引用,而自己的业务功能脚本,有的做成插件形式,引用一个功能脚本,需要同时引用若干个脚本文件,因此需要把这些脚本文件合并成一个压缩文件再引用,这样可以减少HTTP请求次数,减少这些外

css优化,提高性能

CSS 优化主要是四个方面: 加载性能比如不要用 @import 等等,@import会影响css文件的加载速度,考虑加载性能时,主要是从减少文件体积.减少阻塞加载.提高并发方面入手,任何 hint 都逃不出这几个大方向. 选择器性能selector 对整体性能的影响现如今其实可以忽略不计了,selector 的考察更多是规范化和可维护性.健壮性方面,很少有人在实际工作当中会把选择器性能作为重点关注对象的,但知道总比不知道好,(合理选用选择器,没必要用id选择器的情况下,尽量少用). 渲染性能渲

CSS在线压缩

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

css优化的几点建议

写了太久的css,从来没有总结过,所有有必要总结一下css的代码优化方式. 第一:在css外联文件上传到服务器前,压缩css文件,可以使用网上的一些css压缩工具.这样做的好处是,当我们在css的时候,为了代码的可读性跟可维护性,多出来了很多空格.这样的话,浏览器解析css时候,会多一部分精力来去除这些空格,造成时间上的浪费,所以有必要用压缩工具把这些空格去掉,最小化css文件. 第二:使用简写方式.如果要同时改变字体大小,行高,粗体.各自的属性有,font-size,font-weight,l

css优化篇

平时总说如何如何优化,今天就详细的写一下css如何优化,嘿嘿. 首先,CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都能实现某些效果,但并不是所有的方式效果都相同,我们看过不少关于JavaScript方面的语法优化知识,其实CSS里面也有一些 合写CSS :能合写的属性不要分开写,部分例子如下 background属性 .test{  background: #000 url(image.jpg) left top

gulp之css,js压缩合并加密替换

为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然,这里还有个附加的需要就是,静态资源需要自行优化(压缩合并). 下面是我gulpfile.js的代码: var gulp = require('gulp'), //基础库 clean = require('gulp-clean'), //清空文件夹 minify = require('gulp-mi