`
aksoft
  • 浏览: 43991 次
  • 性别: Icon_minigender_1
  • 来自: 河北
社区版块
存档分类
最新评论

CSS简写总结

    博客分类:
  • Css
阅读更多
CSS的简写在节省代码方面虽然没有table布局改为div那么客观,不过也是一个不能忽略的方面。下面总结一下CSS的一些简写方法:

外补丁(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缩写语法总结

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

    常用CSS缩写语法总结

    常用CSS缩写语法总结

    常用css缩写语法总结

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

    常用CSS缩写语法总结.rar

    常用CSS缩写语法总结

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

    font字体缩写字体缩写是针对字体样式的缩写形式,包含字体、字号等属性,使用方法如下: font:font-style font-variant font-weight font-size line-height font-family

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

    相关文章:CSS缩写6个图例总结  CSS缩写优化CSS文件的体积 比如我们在给某元素定义填充大小时,使用到padding,当对上、右、下、左填充有不同要求时,软件生成的代码可能是这样: 以下是引用片段:.t1{ p

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

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

    CSS缩写6个图例总结

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

    css font缩写总结附实例

    css 缩写

    css 常用公共样式 样式总结(持续更新)

    flex布局,简写,遮罩层,滚动条透明,动画

    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属性简写整理

    《写出高效整洁的css的13条规则》里面有提到要尽量简写css。具体怎么简写呢,总结如下: 盒子的内外边距(margin和padding) 以margin为例,padding相同。盒子有上下左右四个方向,每个方向都有个外边距: 演示代码 ...

    CSS常用优化技巧

    css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,...

Global site tag (gtag.js) - Google Analytics