|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。
CSS语法在举行WEB尺度网页计划时必不成少的,一样平常情形下我们能够经由过程Dreamweaver软件的“CSS款式”面板主动天生响应的CSS代码。不外固然软件天生的CSS代码浏览明晰易懂,但就是因为CSS对条条款式界说的明晰注释,也就使得CSS代码浏览显得冗杂庞大,同时CSS代码的字节数也在增添……这关于寻求高效力和完善性的人来讲,是很难容忍的。
相干文章:CSS缩写6个图例总结
CSS缩写优化CSS文件的体积
好比我们在给某元素界说添补巨细时,利用到padding,当对上、右、下、左添补有分歧请求时,软件天生的代码多是如许:
以下是援用片断:
.t1{
padding-top:3px;
padding-right:20px;
padding-bottom:3px;
padding-left:20px;
}
假如复杂来写就是
以下是援用片断:
.t2{
padding:3px20px3px20px;
}
padding的四边值顺次对应了top(上)、right(右)、bottom(下)、left(左)。固然,本例还能够简写成:
以下是援用片断:
.t3{
padding:3px20px3px;
}
当left(左)没偶然,默许值为right(右)的值,当bottom(下)没偶然,默许值为top(上)的值,以是本例中最复杂的就是:
以下是援用片断:
.t4{
padding:3px20px;
}
(固然,假如padding就一个值时,就暗示上右下左是不异的了。)
以下是援用片断:
<styletype="text/css">
<!--
.t1{
padding-top:3px;
padding-right:20px;
padding-bottom:3px;
padding-left:20px;
}
.t2{
padding:3px20px3px20px;
}
.t3{
padding:3px20px3px;
}
.t4{
padding:3px20px;
}
span{
border:1pxsolid#CCCCCC;
}
-->
</style>
<spanclass="t1">cnbruce</span>
<spanclass="t2">cnrose</span>
<spanclass="t3">cnjames</span>
<spanclass="t4">www.cnbruce.com</span>
上例中.t1冗杂的4行代码稀释成一行简介代码——这就是CSS缩写的上风。
固然,良多时分我们在进修他人的CSS履历时,也会看到良多相似的CSS缩写。但假如本人没有懂得,基本是看不分明学不会这些CSS办法履历了。以是,我们必需懂得和把握一些经常使用的CSS缩写语法。利用缩写能够匡助削减你CSS文件的巨细,加倍简单浏览。css缩写的次要划定规矩以下:
色彩
16进制的色采值,假如每两位的值不异,能够缩写一半,比方:#000000能够缩写为#000;#336699能够缩写为#369;
盒尺寸
一般有上面四种誊写办法:
property:value1;暗示一切边都是一个值value1;
property:value1value2;暗示top和bottom的值是value1,right和left的值是value2
property:value1value2value3;暗示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1value2value3value4;四个值顺次暗示top,right,bottom,left
便利的影象办法是顺时针,上右下左。详细使用在margin和padding的例子以下:
margin:1em02em0.5em;
边框(border)
边框的属性以下:
以下是援用片断:
border-width:1px;
border-style:solid;
border-color:#000;
能够缩写为一句:border:1pxsolid#000;
语法是border:widthstylecolor;
背景(Backgrounds)
背景的属性以下:
以下是援用片断:
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:00;
能够缩写为一句:background:#f00url(background.gif)no-repeatfixed00;
语法是background:colorimagerepeatattachmentposition;
你能够省略个中一个或多个属性值,假如省略,该属性值将用扫瞄器默许值,默许值为:
以下是援用片断:
color:transparent
image:none
repeat:repeat
attachment:scroll
position:0%0%
字体(fonts)
字体的属性以下:
以下是援用片断:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"LucidaGrande",sans-serif;
能够缩写为一句:font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;
注重,假如你缩写字体界说,最少要界说font-size和font-family两个值。
列表(lists)
作废默许的圆点和序号能够如许写list-style:none;,
list的属性以下:
以下是援用片断:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
能够缩写为一句:list-style:squareinsideurl(image.gif);
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 |
|