CSS——常用属性

<h1>青春一去不复返</h1>
<p>青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。
    跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；
    总是，在如春的生命中成长；总是，在季节的交替中感悟人生四季的美妙与韵律；
    总是，在多愁善感中体悟青春的美好与无奈。</p>
<style>
    h1{
        color: #F00;
        font-weight: normal;
        /*font-size: 3.5em;   /* 设置标题字体大小为基准的3.5倍 */
        background: #ecf0f1;
        height: 60px;           /* 增加标题高度*/
        line-height: 60px;      /* 行高等于标题高度，设置标题垂直居中 */
    }
    p{
        font-weight: bold;   /* 设置字体粗细 */
        text-indent: 2em;    /* 设置缩进2em */
        line-height: 150%;   /* 设置行高为基准的1.5倍 */
    }
    h1, p{
        font-family:'Courier New'; /* 设置字体 */
    }
</style>

以上面的代码为例，来认识CSS3的常用属性。

1、color : 设置字体颜色。

	h1{
        color: #F00;
        }

2、font-weight : 设置文本的粗细。

	p{
        font-weight: bold;   /* 设置字体粗细 */
        }

3、font-size ： 设置字体大小

注意：px 是以像素作为大小单位。除此之外， em 也是一种重要的大小单位。不同之处在于他表示的是一种动态变化的大小。1em 代表页面1个字符大小的基准值，这个基准值根据浏览器、用户自定义的标准的不同而不同。 h1 的默认大小为 2em ，也就是基准大小的两倍。

h1{
	font-size: 3.5em;
	}

4、text-indent : 段落缩进

缩进的值如果用 px 来定义，则需要精确计算好两个字符的宽度，一旦段落字体大小发生变化，缩进的效果也会发生偏差。因此，最佳的方法是用 em，当设置缩进为 2em 时，不论字体大小是多少，段落始终忠实的缩进两个字符。

p{
        text-indent: 2em;    /* 设置缩进2em */
    }

5、line-height : 行高

浏览器默认的行高较小，增加行高有利于阅读。行高可以以像素为单位，也可以以百分比为单位。

    p{
        line-height: 150%;   /* 设置行高为基准的1.5倍 */
    }

注意： line-height = 150% 和 line-height = 1.5 的差别：

两个的差别在于继承。使用百分比时，会首先计算父元素的 line-height 值，然后将这一像素值继承给子元素。而使用无单位的 1.5 时，则用子元素显示行高继承 1.5 这个系数，再分别计算出对应的像素值。简而言之，有单位时，以父元素为基准；无单位时，以子元素本身为基准。

6、设置标题垂直居中：

h1{
	height: 60px;           /* 增加标题高度*/
    line-height: 60px;      /* 行高等于标题高度，设置标题垂直居中 */
        }

至于垂直居中的原理，可以参考下面这篇文章：先弄清楚一点，height 设置的是容器的高度。
https://segmentfault.com/a/1190000005122321