首页 > 教程 > 关键词 > CSS最新资讯 > 正文

10个CSS简写技巧让你永远受用

2009-05-18 10:21 · 稿源:bingo929.com

CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小,其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。

今天,暴风彬彬整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS,使得代码过于臃肿。不过没关系,看过本文之后,你一能能掌握CSS代码优化的技巧,今后让你的每一个CSS样式表都看起来整洁而简短吧。

属性值为0

书写原则是如果CSS属性值为0,那么你不必为其添加单位(如:px/em),你可能会这样写:

padding: 10px 5px 0px 0px;

试试这样吧:

padding: 10px 5px 0 0;

移除选择器

选择器是你在为一些元素应用CSS样式时的基本方法,比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。

div#logowrap

尝试扔掉多余的选择器吧:

#logowrap

在这个例子中所谓的那个选择器就是div

*总爱和你开玩笑

要明智的使用*而避免它在整个CSS样式表中乱开玩笑,*是个通配符,你可以使用它来为你的设计部分或全部进行一系列CSS声明。例如:

* {

margin: 0;

}

这个声明会将所有元素的margin值设置为0,同样的,为了严谨起见,你可以尝试这样设置:

#menu * {

margin: 0;

}

这样的声明是指将#menu下的所有元素的margin设为0。

背景

背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数,你可能会写成:

background-image: url(”logo.png”);

background-position: top center;

background-repeat: no-repeat;

其实可以写成:

background: url(logo.png) no-repeat top center;

颜色

颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数,他的简写方式是如果颜色值由成对儿出现的三对而数字组成,你可以省略掉没对中的一个数字。

#000000 可以写成 #000, #336699 可以写成 #369

这种简写技巧只适用于成对出现的颜色值,其它颜色值不适用这种技巧,比如:

#010101, #223345, #FFF000

Margin(外边距/空白边)

声明CSS magin值得时候通常会写成这样:

margin-top:0px;

margin-right:10px;

margin-bottom:0px;

margin-left:10px;

让我们试试把值为0的单位去掉,并把4条声明合并成一条声明:

margin:0 10px 0 10px;

当你生命padding、margin、border(还有一些其他属性)时,记得要把按照顺时针的方向来声明属性值,也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法,看看属性中上和下、左和右是否值是相等的,如果是那么就可以进一步优化了,你可以省略掉后两个值,剩下的两个值前者指上下,后者指左右:

margin:0 10px;

它是指左右的值为10px,上下的值为0;

Padding(内边距)

padding的简写技巧等同于margin:

padding-top:0px;

padding-right:10px;

padding-bottom:0px;

padding-left:10px;

可以写成:

padding: 0 10px;

Borders(边框)

边框的简写方式相比其它生命来说会比较复杂,很多CSSer一开始都容易记混它的简写顺序,如果你想声明一个1像素宽的实线黑色边框,可能会写成:

border-width:1px;

border-style:solid;

border-color:#000;

其实可以写成:

border:1px solid #000;

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。

我们还可以为四个边设置不同的宽度:

border-top-width:1px;

border-right-width:2px;

border-bottom-width:3px;

border-left-width:4px;

可以简写成:

border-width:1px 2px 3px 4px;

最后,我们还可以只设置右和下边框的样式:

border-right:1px solid #000;

border-bottom:1px solid #000;

虽然并没减少多少代码,但暴风彬彬建议写成这样:

border:1px solid #000;

border-width:0 1px 1px 0;

先设置四个边的默认风格,然后声明具体的哪个边要显示。

文字

文字属性也有很多可能会用到的属性值,像背景一样,你可能会声明这种复杂的文字样式:

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:150%;

font-family:宋体, Arial, sans-serif;

其实可以优化成一行:

font:italic small-caps bold 1em/150% 宋体, Arial, sans-serif;

列表

list-style-type:square;

list-style-position:inside;

list-style-image:url(filename.gif);

可以写成:

list-style:square inside url(filename.gif);

希望暴风彬彬总结的这10个CSS缩写技巧能对你的CSS书写有所帮助,如果有任何看法欢迎给我留言,如果你需要下载CSS的简写技巧的快速参考,这一点击这里下载

原文地址:http://blog.bingo929.com/10-css-shorthand-tips.html

网友热搜:

  • 相关推荐
  • 大家在看
  • 纸人2全部boss打法攻略 杨依兰夫人等boss打法教程

    纸人2中的boss不是特别多,但是有的boss还是需要一定的技巧才能过关的,今天就来为大家带来殷凌、殷洪​、杨依兰等boss战的打法攻略,希望对大家有所帮助。

  • 合作共赢 文思海辉为日企AUTOBACS重构网上商城

    8 月 1 日,由Pactera Technology日本株式会社(文思海辉,以下简称"Pactera")、JSOL株式会社(以下简称"JSOL")、SAP日本株式会社(以下简称"SAP")、AB System Solution株式会社(以下简称"ABSS")为AUTOBACS7 株式会社(以下简称"AUTOBACS")共建的新的汽车用品网上商城成功上线。新的AUTOBACS网上商城可在所有接触点提供个性化购物,显著改善客户购买体验,助力AUTOBACS公司深化线上布局,构建竞争壁垒。Pactera基于丰富的实

  • Jurassic World中的赚钱机会

    LandLab发布的第 1 款游戏神龙岛已经大获成功,其第 2 款游戏Jurassic World即将在 7 月 15 日正式内测,作为具有极具创新性的驯养类区块链游戏,Jurassic World必将给用户带来全新的游戏体验。游戏与区块链技术的结合能够创造大量潜在的金融红利,而且所有人都能平等地参与到利益分配中,早期用户更是可以近水楼台先得月,那Jurassic World中有哪些赚钱机会呢?JT(Jurassic Token)是Jurassic World的游戏通证,总量恒定 10 亿,

  • 魔兽世界怀旧服安其拉神殿全boss攻略 TAQ超详细9个boss打法教程

    魔兽世界怀旧服的安其拉神殿(简称TAQ)在7月底就要正式开放了,很多玩家还不清楚安其拉神殿的9个boss怎么打,下面就来为大家分享一下魔兽世界怀旧服安其拉神殿的全boss攻略。

  • 在线预览更完善,3分钟看懂永中DCS升级新模样

    永中DCS文档在线预览软件是通过解析常用办公文档格式,支持不同文档格式间的相互转换,为用户提供常用文档的阅读等服务,自上线以来,屡获政府部门、央企单位、邮箱客户、OA办公系统、招聘网站、教育等众多客户的好评。与此同时,团队始终坚持以用户为本,不断优化、升级产品。 近日,永中DCS发布了V4. 0 新版本,新版在文档转换质量、用户体验及文档安全方面都带来了重大提升,永中软件致力为用户打造更贴合业务场景的在线预览产

  • 录屏的方法有哪些?手把手教你录屏小技巧

    进行电脑录屏的时候,你有遇到过没有声音的情况呢?今年线上答辩有不少学校要求同学录下自己的答辩过程以作备份,但答辩结束后有不少同学发现自己录制的视频或是没有自己的声音,或是没有老师点评的声音,这样就很麻烦了。下面为你带来两种录屏方法的详细讲解,希望能够在录屏中帮助到你。一、win10 系统自带的Xbox录屏这是微软官方应对越来越多用户玩电脑游戏而推出的游戏录制功能,也可录制应用界面屏幕操作。打开某个应用,使用

  • 销售易受邀出席CSIC 2020第五届SaaS应用大会

    近日,企业级新型CRM开创者销售易受邀出席 CSIC2020 第五届SaaS应用大会,并在大会“云领奖” 评选中 ,销售易创始人兼CEO 史彦泽荣获【年度 SaaS 行业杰出人物】殊荣。 据悉,本届大会由Top智汇、上海市软件行业协会主办,以“共识价值 全面数字化”为主题,聚焦企业数字化变革,CIO选型,智能办公,HR科技,营销与财务数字化等热点话题,来自600+ 企业CEO、CIO、CTO、HRD、CFO、CDO等数字化、信息化负责人及SaaS领军企业,投资?

  • 海柔创新入选LogisticsIQ全球TOP50仓储自动化公司

    近日,国际权威物流与供应链研究&咨询公司LogisticsIQ发布最新版《 2020 年仓储自动化市场图谱》,海柔创新入选“AGV/AMR”(自主移动机器人)板块,并被评为全球TOP50 仓储自动化公司。 LogisticsIQ TOP50 仓储自动化公司 该榜单将自动化公司分为四个主要类别:物料搬运设备提供商或系统集成商,自主移动机器人(AMR),自动识别和数据捕获(AIDC)和仓库管理系统(WMS)。海柔创新(HAI ROBOTICS)是AMR类别中的 18 家公司之一,这是对海?

  • 取标题的七种技巧,24个案例剖析

    天天在看10W+的标题,却用不到自己的文章上?看了很多干货,却学不会取标题的技巧?小公举几年前就总结过取文章标题的几个规律,今天拿出来再分享一下。

  • 区块链游戏Jurassic World即将正式内测

    游戏向来被认为是区块链最佳的落地场景之一,包含Microsoft、Google、腾讯和网易等不少我们耳熟能详的传统互联网巨头都已对该领域进行了深度的战略布局,如何将传统游戏藉由区块链技术而创造新价值与玩法?区块链游戏公司LandLab给出了答案,继其第 1 款游戏神龙岛正式内测 1 个月后,其第 2 款游戏Jurassic World(侏罗纪世界)也已开发完成,即将正式开始内测。Jurassic World(侏罗纪世界)是以侏罗纪时代为背景基于区块链技术的

  • 陆游房车牵手ACSI(中国) 为旅行爱好者带来超全房车旅游攻略

    不久前,“陆游房车”所属公司洪泰文旅与ACSI(中国)签署战略合作协议,就野奢露营及非标生态度假领域进行深度合作,共同推动中国房车租赁产业的高质量发展。ACSI,即Auto Camper Service International,译为国际汽车露营服务有限公司,是一家与“飞跃”、“凤凰”、“红双喜”同年代的老品牌。ACSI成立于1965年,致力于为用户打造露营线路和户外旅行体验,是目前欧洲露营行业的领军品牌。由于起步较早,露营文化在欧美国家已极其普遍,截至2

  • 京东智联云智能视联网荣获CSDN“AI优秀案例实践”奖

    近日,由CSDN主办的第三届AI开发者大会(AI ProCon 2020)通过线上直播举行。CSDN"百万人学AI"评选活动结果在会上重磅揭晓。作为“可信赖的AI”又一个落地案例,京东智联云秸秆焚烧监测系统用AI防患于未“燃”,凭借在农业的数字化探索和环境的可持续发展方面的举措,入选权威科技媒体CSDN的“AI优秀案例实践奖TOP30”。CSDN是中国最大的开发者社区和服务平台,覆盖 3000 万开发者,其中有约 230 万与AI相关的开发者。2018 年,CSDN?

  • 进行抖音数据分析后,我发现了这些涨粉技巧

    抖音“直播带货”无疑是当下最热门的销售模式。仅需要一部手机,选好直播间要推荐的商品之后,人人都可以在抖音直播带货。并且直播带货跟传统直播不同,除了通过粉丝打赏音浪收入,通过带货增加商品的销售量,也能收获一笔不菲的销售额。除了带货主播,现在不少实体店商家也纷纷加入了线上直播带货。虽然直播带货的人越来越多,但想要做好,却不是件易事。今天,飞瓜数据整理了 6 个抖音直播带货的攻略,希望能帮助到大家在这条路?

  • 电动牙刷哪个牌子好用?选购必看的三大干货技巧

    口腔健康对于人体健康来说是很重要的一个环节,口腔问题可能会引发各种人体的安全隐患,比如心血管疾病、呼吸道感染等等。现在人们的口腔护理意识也在逐渐提高,选择用电动牙刷进行日常的口腔清洁,但是电动牙刷哪个牌子好用呢?很多人并不知道,而且一些低价牙刷清洁效果并不好,因此,这篇文章就教大家怎么挑选适合自己的电动牙刷!1、选择可以深度清洁的牙刷清洁不到位,是普通电动牙刷的通病,在此推荐大家一定要选择动力足,?

  • 光遇皮皮虾怎么躲 皮皮虾详细躲避技巧

    ​Sky光遇中皮皮虾是非常难处理的东西,很多玩家还不清楚怎么躲避皮皮虾,下面就来为大家详细的介绍一下皮皮虾的处理方式。

  • DNF刨冰达人活动全攻略 刨冰达人活动技巧推荐

    ​DNF刨冰达人活动马上就要正式上线了,很多玩家还不清楚这个刨冰达人的活动怎么玩,下面就来为大家分享一下DNF刨冰达人活动全攻略。

  • DNF手游怎么刷装备 快速获取全装备技巧攻略

    DNF手游中最重要的大家都知道是装备,这也是DNF的核心要素,在手游中获取装备的途径还是很多的,一些小伙伴还不清楚在DNF手游中怎么刷装备,下面就来为大家详细的介绍一下。

  • 独特设计之选——评价ISSEY MIYAKE三宅一生新品手表

    随着审美追求的变化,在衣物之外的饰品开始越来越多元化,直到腕表的出现,一块小小的腕表既是功能性器械,又起到装饰作用,它可以是珠宝,也可以是彰显个性的挂件,就那样戴在人的手腕上,不显突兀的同时又极具存在感。手表所能表达的意义已经极大的发展,越来越呈现多元化的趋势,有点表现品味与个性思维的道具的意思了,如果现在的人出门手上没有一块手表,看起来都好像缺了点什么,它好像已经成为了我们互相了解的重要一环。 ?

  • 深圳市风向标信息作为AppDynamics服务商,提供 3 个许可证免费+技术支持

    年初的疫情,在给全球经济发展带来巨大考验的同时,也催动“新基建”成为当下最强劲的产业风口之一。“新基建”是服务于数字经济的新型基础设施,浪潮之下,数字业务已经成为企业增长与业务创新的着力点,对企业的重要性愈加显现。而是否拥有领先的应用性能管理平台,已经成为企业数字化转型成功的关键。助力企业数字业务:“ 3 个许可证免费+免费技术支持”近期,服务商深圳市风向标信息技术有限公司(以下简称「风向标信息」)推出?

  • 电动牙刷什么牌子好用?三大选购技巧,选对适合你的牙刷!

    传统的刷牙方式不太容易把口腔最深处的臼齿刷干净,而且使的力气稍大了,也很容易导致牙龈出血。而电动牙刷的工作原理是以震动频率对牙齿做清洁。一般来说,可以清洁到牙齿的每一个角落。那么电动牙刷什么牌子好呢?为了避免买到不靠谱的产品,白白浪费钱,还损害健康,小编整理了三个选购技巧,助力选购!1、不伤牙龈的电动牙刷才是好牙刷其中很重要的一点就是要看电动牙刷刷毛圆磨率,圆磨率好的刷毛顶端比较规整,没有毛刺和切?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签