`
morning2008
  • 浏览: 112063 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

css中margin、padding等属性的简写方式解读

 
阅读更多

margin的简写:

比如:margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px;
可以写成:margin:10px 20px;
或者:margin:10px 20px 10px 20px;
再或者:margin:10px 20px 10px;
注意:简写后的顺序是“上-左右-下”,“上-右-下-左”,“上下-左右”

padding的简写:同上


颜色的简写:


比如:color:#FFFFFF
可以写成:color:#FFF
或者:color:white


边框的简写:


比如:border-width:1px; border-style:solid; border-color:#FFFFFF;
可以写成:border:1px solid #FFFFFF;
或者写成:border:1px solid #FFF;


背景的简写:

比如:background-color:#FFFFFF; background-image:url(background.gif); background-repeat:no-

repeat; background-attachment:fixed; background-position:0 0;
可以写成:background:#FFF url(background.gif) no-repeat fixed 0 0;


字体的简写:


比如:font-style:normal; font-weight:bold; font-size:12px; line-height:120%; font-family:”宋体”,”

Arial”;
可以写成:font:normal bold 12px/120% “宋体”,”Arial”;


链接统一定义:


为了避免每个链接都要给出css来定义,可以用这样的伪类来定义:
a:link {color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#000099; text-decoration:underline;}
a:active{color:#000000; text-decoration:none;}


用body来定义网页:


body{
margin:0 auto;
padding:0; border:0;
font-size:12px; text-align:center;
font-family: “宋体”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;
}
margin:0 auto;的意思就是网页居中,很多初学者都不知道div+css如何使网页居中,其实就这么简单。
padding:0; border:0;是定义所有的内补丁和边框为0,当然你特殊声明的除外。
font-family: “宋体”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;是定义

网页文字的字体,默认会按照这个顺序来显示。如果出现英文的话,英文的默认字体是Arial。

不要忽视这么一点代码,如果你不注意的话,会使css文件大很多。。比如没经过简写的css有15K,那么通过简写后的CSS文件可能只有13K了。可千万别小看这2K,记住

分享到:
评论

相关推荐

    CSS边距属性定义是用margin还是用padding的两者对比

    CSS边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。...——CSS权威指南 关于什么时候用margin什么时候用padding,

    css下margin、padding、border、background和font缩写示例

    CSS代码简化在工作中是非常有益的,也是必要的。在编写CSS代码时,经常会出现冗余的代码,为了提高代码的质量及文件压缩到最小,使代码具有可读性,不得不把CSS代码简化。

    深入解析CSS中margin属性的使用

    外边距的 margin-width 的值类型有:auto | length | percentage也可以使用简写的外边距属性同时改变所有的外边距:margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方...

    CSS常用属性缩写实例

    相关CSS缩写文章:CSS代码缩写实例以及CSS缩写原因总结 CSS缩写6个图例总结margin margin-top:1px; margin-right:1px; margin-bottom:1px; margin-left:1px; 代码简化为:margin:1px margin-top:1px; margin...

    CSS属性简写整理

    具体怎么简写呢,总结如下: 盒子的内外边距(margin和padding) 以margin为例,padding相同。盒子有上下左右四个方向,每个方向都有个外边距: 演示代码 复制代码代码如下: margin-top:1px; margin-right:1px; ...

    《CSS设计彻底研究》光盘源码

     3.2.3 实验2——属性的缩写形式   3.2.4 实验3——边框与背景   3.3 内边距(padding)   3.4 外边距(margin)   3.5 盒子之间的关系   3.5.1 HTML与DOM   3.5.2 标准文档流   3.5.3 div ...

    请不要告诉我你懂css margin

    写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理。 Margin是什么 CSS 边距属性定义元素周围的...

    《CSS设计彻底研究》【中文PDF+源代码】

    在《CSS设计彻底研究》中对设计中常用的网页元素和布局方式都给出详细的分类和归纳,并讲解了完整的解决方法,主要包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等),Tab面板、伸缩面板和...

    css设计彻底研究 源代码

    3.2 边框(border) 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 3.3 内边距(padding) 3.4 外边距(margin) 3.5 盒子之间的...

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

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

    CSS网站布局实录 (第二版)PDF版

    6.5.2 margin与padding边距缩写 6.5.3 border边框缩写 6.5.4 list列表缩写 6.5.5 background背景缩写 6.5.6 color颜色缩写 6.6 CSS代码优化 6.6.1 增加代码重用率 6.6.2 使用样式覆盖进行简化 6.7 园角样式设计 ...

    H5+CSS3.zip

    css盒模型:块级元素,内联元素,内敛块状元素,none使元素隐身,设置宽度、高度、背景色、边框、圆角,padding内边距,margin外边距; css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、...

    你真的了解margin吗?你知道margin有什么特性吗?

    写css,你少不了与margin打交道。你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负...

    CSS书写规范、顺序和命名规则

    这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。 一、CSS书写顺序 1.位置属性(position, top, right, z-index, display, ...使用CSS缩写属性 CSS有些属性是可以缩写的,

    css入门笔记

    使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) 常用的样式属性: 1.颜色 属性 :color 颜色 取值:颜色英文名 2.背景颜色 ...

    CSS简写小集

    1.border(CSS边框)简写: border-top:1px solid #000...2.padding(CSS padding)简写: padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;可简写为: padding:1px 2px 3px 4px; padding-top:1p

    CSS常见属性缩写与全写对比

    【font】 简写: font:italic small-caps bold 12px/1.5em arial,verdana; 等效于: font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:arial,...

Global site tag (gtag.js) - Google Analytics