text-align
虽然名字包含text,但它可作用于所有inline element。例如,你在div里有<p>和<img>,当你设置
div {
text-align: center;
}
里面的<p>和<img>都会居中。
另外一点,text-align只能用在block element里,如果你直接把它使用在一个inline element(如:<img>),则不会产生任何效果。
Descendant Selectors
如果使用如下格式,风格则会应用到div下所有的h2,不管该h2是direct child还是grandchild。若有一个h2嵌套在<blockquote>里,一样会应用该风格。
div h2 { }
如果想只选择direct child,则需要使用
div > h2 { }
line-height属性:
当你使用em或者%的时候,line-height会找到最基础的font大小,然后计算,如:
body {
font-size: 12px;
}
div {
line-height: 1em;
}
div里各元素的line-height均为12px。
如果你喜欢div里各元素的line-height以各元素字体大小为基准的话,直接使用数字,如:
div {
line-height: 1;
}
简单定义padding或margin:
原始方法:
padding-top: 0px;
padding-right: 20px;
padding-left: 30px;
padding-bottom: 10px;
简易方法:
padding: 0px 20px 30px 10px;
如果左右两边相同(前面top & bottom,后面是left & right):
padding: 20px 40px
如果全部一样
padding: 20px;
border同样可以简写,原始:
border- thin;
border-style: solid;
border-color: #007e7e;
简写,而且border不需要排序,你可以按你喜好随便写:
border: thin solid #007e7e;
background一样可以简写(background-color, background-image, background-repeat)
background: white url(images/cocktail.gif) repeat-x;
font也可以: font: font-style font-variant font-weight font-size/line-height font-family
待续。。。