头闻号

广州市魅惑坊化妆品有限公司

护手霜|洗手液|护肤乳液|面膜|洗面奶|沐浴液

首页 > 新闻中心 > 科技常识:CSS代码缩写实例以及CSS缩写原因总结
科技常识:CSS代码缩写实例以及CSS缩写原因总结
发布时间:2024-12-25 09:59:48        浏览次数:4        返回列表

今天小编跟大家讲解下有关CSS代码缩写实例以及CSS缩写原因总结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS代码缩写实例以及CSS缩写原因总结 的相关资料,希望小伙伴们看了有所帮助。

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:value1 value2; 表示top和bottom的值是value1,right和left的值是value2   property:value1 value2 value3; 表示top的值是value1 right和left的值是value2 bottom的值是value3   property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left   方便的记忆方法是顺时针 上右下左。具体应用在margin和padding的例子如下:  margin:1em 0 2em 0.5em;   边框(border)  边框的属性如下: 以下是引用片段:border-width:1px; border-style:solid; border-color:#000; 可以缩写为一句:border:1pxsolid#000;   语法是 border:width style color;  背景(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:color image repeat attachment position;  你可以省略其中一个或多个属性值 如果省略 该属性值将用浏览器默认值 默认值为: 以下是引用片段: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);

来源:爱蒂网