`
morning2008
  • 浏览: 115272 次
  • 性别: 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中padding、margin两个重要属性的详细介绍及举例说明

    ### CSS中的Padding与Margin属性详解 #### 一、引言 在前端开发中,CSS(层叠样式表)是用于定义HTML文档外观的核心技术之一。其中,`padding`与`margin`是两个至关重要的属性,它们直接影响着网页元素的空间布局...

    CSS的margin和padding

    在CSS中,`margin`是一个非常重要的属性,它用于定义元素周围的空间,即元素与元素之间或元素与容器边界的距离。`margin`是透明的,不会影响元素本身的颜色或背景,只是在视觉上提供了间隔。它可以分别设置上、右、...

    css中margin属性详细分析.docx

    在CSS中,margin属性是一个至...总之,理解并熟练掌握CSS中的margin属性是每个前端开发者的基本功,它涉及到元素布局、间距控制以及视觉设计等多个方面,通过深入学习和实践,我们可以创建出更加灵活和美观的网页布局。

    CSS重要属性之 margin 属性知识大整合(必看篇)

    CSS中的margin属性是控制元素外边距的重要工具,它能够影响元素与其它元素间的距离,从而对页面布局产生影响。本文将详细梳理margin属性相关的核心知识点。 首先,margin属性是CSS中非常重要的一个属性,它允许...

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

    本文将详细介绍如何对`margin`、`padding`、`border`、`background`和`font`等属性进行缩写,以及在特定情况下的使用技巧。 首先,`margin`属性用于设置元素的外边距,它有四种可能的值:上、右、下、左。当所有...

    XML应用开发(软件品牌)-1期 4.9 案例分析-使用CSS容器属性显示XML文档-边距属性margin和补白属性paddin

    在XML应用开发中,使用CSS进行...总结来说,理解和熟练运用CSS的`margin`和`padding`属性对于XML应用开发中的文档布局至关重要。它们允许开发者精细调整元素的位置和视觉效果,从而创建出更符合设计需求的XML文档展示。

    CSS3动画属性边框属性等

    本篇将详细阐述CSS3中的关键知识点,包括动画属性、边框属性、背景属性以及其他的样式属性。 **CSS3动画属性**允许开发者创建复杂的动态效果。`@keyframes` 规定了一个动画的帧,定义了从一种样式到另一种样式的...

    常用css缩写语法总结

    本文将深入探讨CSS中常见的缩写形式,包括字体(font)、边距(margin)和内填充(padding)以及边框(border)。 1. **字体缩写(font)** `font`属性的缩写允许一次性定义字体样式、大小、行高和字体家族。基本...

    CSS和JavaScript标签style属性对照表

    CSS中,`background`属性用于设置元素的背景,包括颜色、图像、位置和重复方式。在JavaScript中,如`backgroundColor`、`backgroundImage`等分别表示背景颜色和背景图像。`color`属性用来设置文本颜色。 **样式属性...

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

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

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

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

    DIV 样式 CSS 各种属性 JavaScript 中会用到的CSS

    【描述】:“本篇文章将总结在JavaScript编程中常见的CSS属性,尤其是与DIV相关的样式,包括设置高度、宽度、内外边距、定位等,以帮助开发者更好地理解和应用。” 在HTML和JavaScript中,DIV元素作为一个通用容器...

    DIV+CSS创建网页-边距属性.pptx

    在本讲座中,我们聚焦于使用DIV+CSS创建网页时涉及到的边距属性,包括内边距(padding)和外边距(margin),以及CSS3的box-shadow属性和box-sizing属性。 内边距(padding)是元素内容区域与边框之间的空间。CSS...

    CSS优化.docx

    CSS 优化是 Web 开发中非常重要的一部分,通过简写 CSS 代码、删除多余的空格和换行、使用 CSS_framework 和优化工具等方法,可以达到减少 CSS 文件的大小、提高网站加载速度和 SEO 排名的目的。

    CSS+DIV练习题

    5. CSS 盒模型由 content area、padding、border 和 margin 四个部分组成。 6. 盒模型的宽度和高度可以通过 width 和 height 属性设置。 四、 布局 7. CSS 中的布局可以使用 float、position、display 等属性来...

Global site tag (gtag.js) - Google Analytics