仓酷云

标题: 来看看：CSS代码缩写实例和CSS缩写缘故原由总结 [打印本页]

作者: 小妖女 时间: 2015-1-16 00:07
标题: 来看看：CSS代码缩写实例和CSS缩写缘故原由总结
更方便搜索引擎的搜索。用只包含结构化内容的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">

</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文件就可以重新设计一个有成百上千页面的站点。

作者: 变相怪杰 时间: 2015-1-18 05:15
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。

作者: 小妖女 时间: 2015-1-22 15:18
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 深爱那片海 时间: 2015-1-31 09:00
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 第二个灵魂 时间: 2015-2-6 18:58
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 若天明 时间: 2015-2-18 08:53
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 蒙在股里 时间: 2015-3-6 03:29
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 谁可相欹 时间: 2015-3-12 20:49
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 精灵巫婆 时间: 2015-3-20 03:47
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

欢迎光临仓酷云 (http://ckuyun.com/)