CSS中级教程 快捷属性缩写
有些CSS属性允许一连串的属性组合,用英文半角空格隔开即可。 margin、padding和border-width允许你把诸如margin-top-width,margin-right-width,margin-bottom-width等用属性:上右下左(property:toprightbot
有些CSS属性允许一连串的属性组合,用英文半角空格隔开即可。
margin、padding和border-width允许你把诸如margin-top-width,margin-right-width,margin-bottom-width等用属性: 上 右 下 左(property: top right bottom left;)组合起来。
所以:
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}
可以概括起来:
p {
border: 1px red solid;
}
(这也可应用到border-top,border-right等)
加入只指定两个值(比如margin: 1em 10em;),第一个值是上和下,第二个值是右和左。
字体相关的属性还可以聚合在font的属性下:
p {
font: italic bold 1em/1.5 courier;
}
(1.5是行高)
所以,组合起来吧,试试这个:
p {
font: 1em/1.5 "Times New Roman", times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}
很有趣吧?(看起来也应该不难,只要你心里记住,时钟是朝哪个方向走的译者注)
margin、padding和border-width允许你把诸如margin-top-width,margin-right-width,margin-bottom-width等用属性: 上 右 下 左(property: top right bottom left;)组合起来。
所以:
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}
可以概括起来:
p {
border: 1px red solid;
}
(这也可应用到border-top,border-right等)
加入只指定两个值(比如margin: 1em 10em;),第一个值是上和下,第二个值是右和左。
字体相关的属性还可以聚合在font的属性下:
p {
font: italic bold 1em/1.5 courier;
}
(1.5是行高)
所以,组合起来吧,试试这个:
p {
font: 1em/1.5 "Times New Roman", times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}
很有趣吧?(看起来也应该不难,只要你心里记住,时钟是朝哪个方向走的译者注)
精彩图集
精彩文章