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