`

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缩写语法总结

    【CSS缩写语法详解】 CSS(层叠样式表)缩写是提高代码效率和可读性的关键技巧,尤其对于初学者来说,理解并熟练运用这些缩写语法能大幅提升编写CSS的速度。本文将深入探讨CSS中常见的缩写形式,包括字体(font)、...

    css缩写的规则

    ### CSS缩写规则详解 #### 一、引言 CSS(Cascading Style Sheets)是一种用于定义HTML文档外观的语言,它让网页设计更加灵活多变。在实际开发过程中,合理运用CSS缩写规则不仅能减少代码量,提高开发效率,还能使...

    常用css缩写.doc

    **CSS 字体简写规则** - 当定义字体时,可以使用`font`属性一次性指定`font-size`、`line-height`、`font-weight`、`font-style`、`font-variant`和`font-family`。例如: - `font: 1em/1.5em bold italic small-...

    常用CSS缩写语法总结

    本文将深入探讨一些常用的CSS缩写语法,帮助你优化CSS代码,提高工作效率。 1. 属性简写:CSS允许我们对某些属性进行简写,比如`background`、`font`和`border`等。例如,`background: #fff url(image.png) no-...

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

    ### 网页制作之常用CSS缩写语法总结 在网页设计与开发的过程中,CSS(层叠样式表)是不可或缺的一部分。它不仅能够为网页添加丰富的样式,还能够提高页面的加载速度,优化用户体验。为了更好地掌握CSS,提高工作...

    常用CSS缩写语法总结.rar

    "常用CSS缩写语法总结"这个资料包正是对这些缩写的集中归纳,旨在帮助开发者提升编写CSS的速度和质量。 1. **简写属性(Shorthand Properties)**: - `font`: 包括`font-style`, `font-weight`, `font-size`, `...

    css通用缩写语法总结(font字体篇)

    CSS 缩写语法是CSS3中提高代码效率和可读性的重要特性,它允许开发者用更简洁的方式定义多个样式属性。在本文中,我们将重点讨论有关`font`、`margin`、`padding`以及`border`的缩写规则。 首先,让我们详细探讨`...

    【网页设计-最新经典技术文档】用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代码的关键技巧,它允许开发者以更简洁的形式表达复杂的样式规则,从而提高编写效率,减少代码量,并加深对CSS语法的理解。以下是一些主要的CSS简写属性及其详解: 1. **font** 简写: `font:...

    css中margin的缩写

    ### CSS中的Margin属性及其缩写规则 在网页设计与开发中,CSS(层叠样式表)扮演着极其重要的角色,它能够帮助开发者控制网页元素的布局、颜色、字体等样式。其中,`margin`属性是CSS中最常用的一个属性之一,用于...

    CSS优化2-(常用CSS缩写语法总结)

    CSS优化技术之缩写语法总结 CSS优化技术是Web开发中非常重要的一方面,通过使用CSS缩写语法,可以减少CSS文件的大小,提高浏览器的加载速度和用户体验。本文将总结常用的CSS缩写语法,帮助开发者更好地优化CSS代码...

    又一实用的常用CSS缩写语法收集

    ### 常用CSS缩写语法详解 #### 一、CSS缩写的必要性与优势 在Web开发过程中,编写高效且简洁的CSS代码是提升页面加载速度和维护性的重要手段之一。通过合理运用CSS缩写语法,不仅可以减少代码量,提高代码的可读性...

Global site tag (gtag.js) - Google Analytics