新手必读之CSS中级教程 4、快捷属性缩写

新手必读之CSS中级教程

本文来自织梦

  dedecms.com

4、快捷属性缩写──很多属性如边框border和边界margin都可以把其他方向的属性组合在一起

有些CSS属性允许一连串的属性组合,用英文半角空格隔开即可。 织梦好,好织梦

 

织梦内容管理系统

margin、padding和border-width允许你把诸如margin-top-width,margin-right-width,margin-bottom-width等用属性: 上右下左(property: top right bottom left;)组合起来。 copyright dedecms

所以:

copyright dedecms

p { dedecms.com

border-top-width: 1px;

织梦内容管理系统

border-right-width: 5px; 本文来自织梦

border-bottom-width: 10px; 织梦好,好织梦

border-left-width: 20px; 内容来自dedecms

}

织梦好,好织梦

 

织梦内容管理系统

可以概括起来: copyright dedecms

p {

织梦好,好织梦

border: 1px red solid;

本文来自织梦

}

copyright dedecms

  本文来自织梦

(这也可应用到border-top,border-right等) 内容来自dedecms

加入只指定两个值(比如margin: 1em 10em;),第一个值是上和下,第二个值是右和左。 dedecms.com

  织梦内容管理系统

字体相关的属性还可以聚合在font的属性下:

织梦内容管理系统

p { 本文来自织梦

font: italic bold 1em/1.5 courier; 本文来自织梦

}

copyright dedecms

  dedecms.com

(1.5是行高)

内容来自dedecms

所以,组合起来吧,试试这个:

织梦好,好织梦

p { 织梦内容管理系统

font: 1em/1.5 "Times New Roman", times, serif; 织梦内容管理系统

padding: 3em 1em; 织梦好,好织梦

border: 1px black solid; 内容来自dedecms

border-width: 1px 5px 5px 1px; 本文来自织梦

border-color: red green blue yellow;

copyright dedecms

margin: 1em 5em; 内容来自dedecms

}

copyright dedecms

 

织梦好,好织梦

很有趣吧?(看起来也应该不难,只要你心里记住,时钟是朝哪个方向走的——译者注) 本文来自织梦