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>
效果：
有阴影的哦
