CSS2简写代码(优化)
【1】如果CSS属性值为0,那么你不必为其添加单位(如:px/em);
下面是你可能的写法:
padding: 10px 5px 0px 0px;
但是你可能这样写:
padding: 10px 5px 0 0;
【2】背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数;
下面是你可能的写法:
background-image: url(“logo.png”);
background-position: top center;
background-repeat: no-repeat;
但是你可以这样写:
background: url(logo.png) no-repeat top center;
【3】颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数,他的简写方式是如果颜色值由成对儿出现的三对而数字组成,你可以省略掉没对中的一个数字。
#000000 可以写成 #000, #336699 可以写成 #369
这种简写技巧只适用于成对出现的颜色值,其它颜色值不适用这种技巧,比如:
#010101, #223345, #FFF000
【4】magin值通常你会写成这样:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
让我们把值为0的单位去掉,并把4条声明合并成一条声明:
margin:0 10px 0 10px;
具体的你可以看下图:
这种方法同样适用于padding和border-width属性。
【5】border边框的简写方式相比其它生命来说会比较复杂,很多CSSer一开始都容易记混它的简写顺序,你可以想象是声明[一个1像素宽的实线黑色]边框;
下面是你可能的写法:
border-width:1px;
border-style:solid;
border-color:#000;
但是你可以这样写:
border:1px solid #000;
【6】文字属性也有很多可能会用到的属性值,像背景一样,你可能会声明这种复杂的文字样式:
那么你可以参考下图:
注:如果没有定义某个属性值的话,将继承副级元素的定义或使用默认值。
【7】移除选择器:选择器是你在为一些元素应用CSS样式时的基本方法,比如h1, h2, h2, div, strong, pre, ul, ol等等... 如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。
下面是你可能的写法:
div#wrap
但是你可以这样写:
#wrap
在这个例子中所谓的那个选择器就是div(大家以后可以尝试扔掉多余的选择器了)。
【8】(通配符):要明智的使用而避免它在整个CSS样式表中乱开玩笑,你可以使用它来为你的设计部分或全部进行一系列CSS声明。
下面是你可能的写法:
* {
margin:;
}
这个声明会将所有元素的margin值设置为0,同样的,为了严谨起见,你可以尝试这样设置(定义部分):
#menu * {
margin:;
}
这样的声明是指将#menu下的所有元素的margin设为0。
【9】列表
下面是你可能的写法:
list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);
但是你可以这样写:
list-style:square inside url(filename.gif);
CSS2简写代码(优化)的更多相关文章
- 10个CSS简写及优化技巧
CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: ...
- android 世界各国英文简写代码 资源文件
今日又用到这段代码,忽然感觉到如果是第一次用的人肯定也会很麻烦.故在此上传一份.后人再用就不必重复做此工作.跟体育老师学过语文,见谅. 提供下载地址 http://download.csdn.net/ ...
- VS中自定义C#快速简写代码
首先在VS中找到工具——代码片段管理器——语言选择(CSharp)——Visual C#——赋值路径——根据路径找到对应的代码片段用VS打开 修改: Title——标题 ShortCut——缩写 D ...
- 简写代码:当变量为false时['',false,null,undefined,0,NaN]时,返回默认值
当变量为'',false,null,undefined,0,NaN时,返回默认值 var a='' a || 'hello world' "hello world" var a ...
- JavaScript 代码 优化笔记
1. 判断某个元素是否在数组中. setCheckNodes : function (zNodes, checkIds){ var that = this; that.setAllNodesUnche ...
- java 性能优化:35 个小细节,让你提升 java 代码的运行效率
前言 代码 优化 ,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没 ...
- (转)每位设计师都应该拥有的50个CSS代码片段
原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...
- 很实用的50个CSS代码片段
原文:50 Useful CSS Snippets Every Designer Should Have 面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...
- 闲谈Tomcat性能优化
Tomcat在各位JavaWeb从业者常常就是默认的开发环境,但是Tomcat的默认配置作为生产环境,尤其是内存和线程的配置,默认都很低,容易成为性能瓶颈. 幸好Tomcat还有很多的提升空间.下文介 ...
随机推荐
- Linux编辑器的选择使用
在执行 crontab -e的时候 发现编辑器不对 用的是nano 立刻 sudo select-editor 然后终端返回 Select an editor. To change later, ru ...
- GUI(图形用户界面)
一.GUI(图形用户界面) GUI Graphical User Interface(图形用户接口) 用图形的方式,来显示计算机操作的界面,这样更方便更直观 CLI Command line User ...
- iOS 视频播放的简单使用
最近工作中有用到视频播放的内容,分享一些简单的用法给大家(由于网速问题,本例中使用的是本地的资源进行播放,要播放网络上的修改一些URL即可) 1.iOS9之前的视频播放 首先需要导入MediaPlay ...
- iOS 7 新版微信 URL 不支持跳转 App Store 的解决方案
今天早上刚到公司,就收到反馈说公司前端页面的下载按钮在 iOS 7 的微信内置浏览器里面点击无效,经过确认之后,前端代码是正常的,问题出在了微信上,然后谷歌之,原来腾讯在***. 是 BUG 还是刻意 ...
- Android Dev
[2015-04-22 13:30:37 - branch_1.5.1_WelcomeActivity] R.java was modified manually! Reverting to gene ...
- android常见错误-Installation error: INSTALL_FAILED_INSUFFICIENT_STORAGE
在andorid进行调试的过程中,出现下面的错误: 解决方法: 修改一下应用程序描述符: <manifest xmlns:android="http://schemas.android ...
- NuGet的使用心得
前言 上星期发布了NuGet的使用和服务搭建后,同时NuGet在部门里也使用了起来.经过这些天的使用,总结了些小技巧和注意点,希望和大家分享下. 问题提出 使用了NuGet的朋友们估计都知道,在签入代 ...
- 两款Mac下的视频下载利器
1 iSkysoft iTube Studio 2.jaksta mac
- Java基础知识强化之集合框架笔记49:键盘录入5个学生信息(姓名,语文成绩,数学成绩,英语成绩)按照总分从高到低输出到控制台
1. 键盘录入5个学生信息(姓名,语文成绩,数学成绩,英语成绩)按照总分从高到低输出到控制台: 分析: A: 定义学生类 B: 创建一个TreeSet集合 C: 总分从高到底如何实现 ...
- Entity Framework性能优化
AsNonUnicode 执行如下语句,并用SqlProfiler监控其SQL: var list = WMFactory.ReChargeMobile.Queryable().Where(w =&g ...