小妖女 发表于 2015-1-16 00:07:33

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

变相怪杰 发表于 2015-1-18 05:15:51

只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。

小妖女 发表于 2015-1-22 15:18:12

经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.

深爱那片海 发表于 2015-1-31 09:00:54

由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。

第二个灵魂 发表于 2015-2-6 18:58:00

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

若天明 发表于 2015-2-18 08:53:56

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

蒙在股里 发表于 2015-3-6 03:29:05

技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。

谁可相欹 发表于 2015-3-12 20:49:58

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。

精灵巫婆 发表于 2015-3-20 03:47:26

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
页: [1]
查看完整版本: 来看看:CSS代码缩写实例和CSS缩写缘故原由总结