在网站设计的过程中为了能更好的提高代码质量,减少冗余,控制文件大小,我们应该要学会使用一些代码缩写。
南昌网站建设公司紫索科技在这里和大家一起分享一些网站设计中常常会用到的CSS缩写方式。
第一,网站设计当中margin和padding的缩写
在网站设计中margin和padding的缩写顺序为:上(top)、右(right)、下(bottom)、左(left)的逆时针顺序。
常见的四种写法是:
(1)表示所有边都是一个值value1的写法:property:value1;
(2)表示top和bottom的值是value1,right和left的值是value2的写法:property:value1 value2;
(3)表示top的值是value1,right和left的值是value2,bottom的值是value3的写法:property:value1 value2 value3;
(4)表示top的值是value1,right的值是value2,left的值是value3,bottom的值是value3的写法:property:value1 value2 value3 value4;
将其应用在margin和padding当中时如下:
四个方向的值为10px时的写法:margin(padding):10px;
上下为10px,左右为5px时的写法:margin(padding):10px 5px;
上为10px,左右为20px,下为5px时的写法:margin(padding):10px 20px 5px;
注意:当属性值为0时,不用加单位
第二:网站设计当中border(边框)的缩写
同样遵循上(top)、右(right)、下(bottom)、左(left)的逆时针原则
例如有一组属性如下的边框:
border-width:1px;
border-style:solid;
border-color:#000;
则可缩写为:border:1px solid #000;
再如以下这组边框:
border-top:4px solid #e1e1e1;border-right:1px solid #f1f1f1;border-bottom:4px dashed #e1e1e1;border-left:1px solid #ff3300;
可缩写成:
border-width:4px 1px;border-style:solid solid dashed;border-color:#e1e1e1 #f1f1f1 #e1e1e1 #ff3300;
第三:网站设计当中color(颜色)的缩写
对于网站设计当中的16进制色彩值,如果每两位的值都相同,则可以缩写一半,具体如下:
#000000的缩写形式为#000;
#336699的缩写形式为#369;
第四:网站设计当中fonts(字体)的缩写
如果在网站设计当中有一段字体属性如下:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
则可缩写为:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意:缩写字体定义时至少要定义font-size和font-family两个值。
第五:网站设计当中Backgrounds(背景)的缩写
例如在网站设计当中有一段背景属性如下:
background-color:#f00;
background-image:url(images/background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
则可缩写为:background:#f00 url(/background.gif) no-repeat fixed 0 0;
可省略其中一个或多个属性值,如省略,该属性值将用浏览器默认值,默认值为:
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
第六:网站设计当中list(列表)的缩写
对于如下list属性:
list-style-type:square;
list-style-position:inside;
list-style-image:url(/image.gif);
可缩写为:list-style:square inside url(/image.gif);
南昌网站建设,网站设计,网站制作公司,品牌网站建设,品牌网站设计,专业网站建设,专业网站设计,企业网站建设,企业网站设计,外贸网站建设,外贸网站设计,营销网站建设,营销网站设计
最近网页设计人的热门话题,是一个来自于台北设计展的官方网页内容。这个网站基本上的呈现十分的不错,但有一位网路知名的部落客,却发表了一篇文章批评这样的设计很烂,原因只有一个:他的iPhone手机无
查看详情成功的网站的秘诀,就是让使用者愿意阅读更多新闻。读者愿意停留在网站的时间越久,同等于点阅了越多的内容,不仅对于企业增加新的客源更有帮助,对于搜寻引擎来说,可以降低网站的离开率(Bounce Ra
查看详情已经厌倦了一成不变的网页设计视觉效果了吗?其实欧美的许多产业与企业,利用了网站的特效与视觉效果,大胆的打造出企业求新、求变、热情、创新的效果,建立企业年轻的印象。
不久前我们才迎接了2011的跨年夜,来到了全新的2012年,网路的发展也有许多趋势值得关注,因为趋势代表的是进步与演进、以及带来更多的趋势。以下是我们所观察到,有机会随着时间逐渐热络的网页设计趋
查看详情网路上一堆关于2012年的网页设计趋势潮流资讯,是否看得头昏眼花?很幸运的我们找到了一篇精简、整合度很高的2012网页设计潮流趋势文章,与各位分享外,也将最近我们发布的文章与此内文整合,提供您一
查看详情网页设计是由许多不同的元素所组成,各有不同程度的重要性和一些特别的要求。有些元素是共享的关係,有些却是不相关的。困难之处在于能够传达视觉美感及成效。这是网页设计的对比的原则。
对比