CSS知识总结（三）

CSS的常用样式

1.字体样式

　　1）字体名称（font-family）

　　　font-family : <family-name>

　　　设置文字名称，可以使用多个名称，或者使用逗号分隔，浏览器则按照先后顺序依次使用可用字体。

　　　如果字体名称包含空格或中文，则应使用引号括起。

　　例子源代码：

/* CSS代码 */

p{

    font-family:"微软雅黑","宋体";

}

<!-- HTML代码 -->

<body>

    <p>文字，是承载语言的符号。</p>

</body>

　　效果：

文字，是承载语言的符号。

　　2）字体大小（font-size）

　　　设置文字的尺寸

　　　font-size ： <length> | <percentage>

　　　<length>：用长度值指定文字大小，不允许负值。

　　　<percentage>：用百分比指定文字大小，其百分比取值是基于父对象中字体的大小，不允许负值。

　　例子源代码：

/* CSS代码 */

.length{font-size:20px;}

.percentage{font-size:20px;}

.percentage span{font-size:60%;}

<!-- HTML代码 -->

<body>

    <p class="length">文字，是承载语言的符号。</p>

    <p class="percentage">文字，<span>是承载语言的符号。</span></p>

</body>

　　效果：

文字，是承载语言的符号。

　　3）字体加粗（font-weight）

　　　控制字体粗细

　　　font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

　　　normal：正常的字体，相当于数字值400

　　　bold：粗体，相当于数字值700

　　　bolder：定义比继承值更重的值

　　　lighter：定义比继承值更轻的值

　　　**推荐使用"bold"。

　　例子源代码：

/* CSS代码 */

.normal{font-weight:normal;}

.bold{font-weight:bold;}

<!-- HTML代码 -->

<body>

    <p class="normal">这是正常的字体</p>

    <p class="bold">这是加粗的字体</p>

</body>

　　效果：

这是正常的字体

这是加粗的字体

　　4）字体斜体（font-style）

　　　控制字体是否倾斜

　　　font-style : normal | italic | oblique

　　　normal：指定文本字体样式为正常的字体

　　　italic：指定文本字体样式为斜体

　　例子源代码：

/* CSS代码 */

.normal{font-style:normal;}

.italic{font-style:italic;}

<!-- HTML代码 -->

<body>

    <p class="normal">这是正常的字体</p>

    <p class="italic">这是斜体的字体</p>

</body>

　　效果：

这是正常的字体

这是斜体的字体

　　5）字体样式缩写（font）

　　　font : font-style || font-variant || font-weight || font-size || / line-height || font-family

　　例如：

/* CSS代码 */

p{

    font-style:italic;

    font-weight:bold;

    font-size:14px;

    line-height:22px;

    font-family:"宋体";

}

　　缩写后：

/* CSS代码 */

p {font:italic bold 14px/22px "宋体"}

　　6）字体颜色（color）

　　　color : <color>

　　　颜色属性值分为三种格式：

　　　1、英文单词，比如 red , yellow ,green …

　　　2、十六进制表示方式，#开头，6个十六进制的字符或数字组合，比如：#FFFFFF

　　　3、RGB模式，红 0-255，绿 0-255，蓝 0-255，比如： RGB(12,34,56)

　　　　 RGBA模式，最后的A表示透明度，比如：RGBA(0,0,0,0.5)

　　例子源代码：

/* CSS代码 */

p {color:red;}

<!-- HTML代码 -->

<body>

    <p>文字，是承载语言的符号。</p>

</body>

　　效果：

文字，是承载语言的符号。

　　7）文本装饰线条（text-decoration）

　　　控制文本装饰线条

　　　text-decoration : none | underline | blink | overline | line-through

　　　underline：下划线

　　　overline：上划线

　　　line-through：删除线

　　例子源代码：

/* CSS代码 */

.sup{

    text-decoration:overline;   /*上划线*/

}

.del{

    text-decoration:line-through;   /*删除线*/

}

.sub{

    text-decoration:underline;  /*下划线*/

}

<!-- HTML代码 -->

<body>

    <p class="sup">这是上划线</p>

    <p class="del">这是删除线</p>

    <p class="sub">这是下划线</p>

</body>

　　效果：

这是上划线

这是删除线

这是下划线

　　8）文字阴影（text-shadow）

　　　控制文字的阴影部分

　　　text-shadow: h-shadow v-shadow blur color;

　　　h-shadow：必需，水平阴影的位置，允许负值。

　　　v-shadow：必需，垂直阴影的位置，允许负值。

　　　blur：可选，模糊的距离。

　　　color：可选，阴影的颜色。

　　例子源代码：

/* CSS代码 */

.shadow{

    font-size:20px;

    font-weight:bold;

    /*color: transparent;*/   /*字体透明*/

    text-shadow:3px 3px 3px #b28118;    /*水平距离 垂直距离 模糊距离 颜色*/

}

<!-- HTML代码 -->

<body>

    <p class="shadow">有阴影的哦</p>

</body>

　　效果：

有阴影的哦