文字样式
1. 定义文字颜色
在 css 样式中,多使用 color属性定义颜色;
例子1 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3-1</title>
<style type="text/css">
body {color: blue;}
h1{color: #ff6600;}
p.c2{color: hsl(0, 0%, 0%);}
p.c3{color: hsla(250, 50%, 50%, 1);}
p.c4{color: rgba(255, 10, 45, 0.5);}
</style>
</head>
<body>
<h1>标题1的效果</h1>
<p>这是一段普通的段落效果。显示的默认颜色为蓝色。</p>
<p class="c1">这段落定义了 class="c1"。该段落中的文本颜色是蓝色。</p>
<p class="c2">此处使用了 HSL 函数,构建颜色。</p>
<p class="c3">此处使用了 HSLA 函数,构建颜色。</p>
<p class="c3">此处使用了 RGBA 函数,构建颜色。</p>
</body>
</html>
# 2. 定义文字的字体
font-family
属性用于指定文字字体类型,即在网页中展示字体不同的形状;
语法如下所示:
{font-family:name}
{font-family:cursice | fantasy | monspace | serif | sans-serif}
font-family
有两种声明方式;第一种为使用 name字体名称,按优先顺序排列,以逗号隔开,若字体名称包含空格,则应使用引号括起;
第二种声明方式使用所列出的字体序列名称,若使用 fantasy序列,将提供默认字体序列;
CSS 3 中常使用使用第一种声明方式;
例子2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{font-family: 宋体;font-size: 40px;}
</style>
</head>
<body>
<p align=center>不积跬步无以至千里。</p>
</body>
</html>
注意: 在字体显示时,若指定一种特殊字体类型,而在浏览器或操作系统中该类型不能正确获取,可通过 font-faily
预设多种字体类型;
font-faily
属性能预置多个供页面使用的字体类型,其中每种字形之间使用逗号隔开;
若前的字体类型不能正确显示,则系统自动选择后一种字体类型,依此类推;
p{
font-family:华文楷体,华文彩云,黑体,仿宋;
}
3. 定义文字的字号
在 CSS 3 中,常使用 font-size
设置文字大小;
语法格式如下:
{font-size:数值 | inherit | xx-small | x-small | small
| medium | large | x-large | xx-large | largr | smller | length}
例子 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体大小</title>
</head>
<body>
<div style="font-size: 50px;">上级标记大小
<p style="font-size: small;">小字体效果</p>
<p style="font-size: larger;">大字体效果</p>
<p style="font-size: x-small;">小字体效果</p>
<p style="font-size: x-large;">大字体效果</p>
<p style="font-size: 80%;">标记效果</p>
<p style="font-size:25pt ;">标记效果</p>
</div>
</body>
</html>