`

CSS的简写

    博客分类:
  • CSS
css 
阅读更多

盒子模型的缩写
还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
通常有下面三种缩写方法:
1、如果top、right、bottom、left的值相同,如下面代码:
margin:10px 10px 10px 10px;
可缩写为:
margin:10px;
2、如果top和bottom值相同、left和 right的值相同,如下面代码:
margin:10px 20px 10px 20px;
可缩写为:
margin:10px 20px;
3、如果left和right的值相同,如下面代码:
margin:10px 20px 30px 20px;
可缩写为:
margin:10px 20px 30px;
注意:padding、border的缩写方法和margin是一致的。
颜色缩写
关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
例子1:
p{color:#000000;}
可以缩写为:
p{color: #000;}
例子2:
p{color: #336699;}
可以缩写为:
p{color: #369;}
字体缩写
网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:
body{
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句:
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}
注意:
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
body{
    font:12px/1.5em  "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。

分享到:
评论

相关推荐

    CSS缩写简写指南(为有心学习div+css的童鞋整理)

    CSS缩写简写指南(为有心学习div+css的童鞋整理),主要是介绍每种常用样式的缩写和简写

    css缩写的规则

    css缩写的规则 需要的时候在这边查查 css缩写字典

    常用css缩写.doc

    常用的css缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读

    网页制作之常用CSS缩写语法总结

    网页制作之常用CSS缩写语法总结网页制作之常用CSS缩写语法总结

    常用CSS缩写语法总结.rar

    常用CSS缩写语法总结

    常用CSS缩写语法总结

    常用CSS缩写语法总结

    10个CSS简写/优化技巧整理

    CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS 简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。 下面介绍常见的CSS简写规则: 一、盒子大小 这里...

    常用css缩写语法总结

    一些常用的Div css语法总结,常规写法缩略写法,方便初学者学习。

    【网页设计-最新经典技术文档】用CSS缩写给你的网站加速.docx

    【网页设计-最新经典技术文档】用CSS缩写给你的网站加速.docx

    CSS缩写6个图例总结

    本文将通过CSS实例,讲解六种缩写的形式。它们分别是margin和padding、border、background、font、list和color。Webjx.Com以前也有过类似的文件,但本文的讲解更加的清晰。如果你对CSS缩写已经掌握,仅当复习,如果...

    CSS代码缩写实例以及CSS缩写原因总结

    CSS语法在进行WEB标准网页设计时必不可... CSS缩写优化CSS文件的体积 比如我们在给某元素定义填充大小时,使用到padding,当对上、右、下、左填充有不同要求时,软件生成的代码可能是这样: 以下是引用片段:.t1{ p

    CSS语法缩写规则

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四...

    emmet的css缩写示例

    在学习emmet的过程中, 写的许多示例代码, 在sublime中打开的话,可以快速检索

    CSS缩写优化CSS文件的体积

    Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种,包括Web服务器的速度、访问...但是,通过使用CSS缩写以及其他的一些简单技巧,你可以在很大程

    css 简写用法介绍

    简单的说,css简写就是在等效的前提下,把多句css代码简化成一句。在我看来,简写css的好处有三:一是写起来方便(就像键盘快捷键);二是简化代码;三是帮助你熟悉和深刻理解css。

    移动Web的CSS样式工具库Rider-CSS.zip

    rider是一个基于 Stylus、专注于移动 Web 的 CSS 样式工具库。提供了以下功能:样式初始化顺时针简写缓动函数图片排版单位转换形状动画响应式工具 API文档及示例:...

Global site tag (gtag.js) - Google Analytics