《HTML+CSS+JavaScript》之第13章 字体样式
13.1 字体样式简介
字体样式属性
属性 | 说明 |
---|---|
font-family | 字体类型 |
font-size | 字体大小 |
font-weight | 字体粗细 |
font-style | 字体风格 |
color | 字体颜色 |
13.2 字体类型
默认字体宋体。
font-family:字体1,字体2,...,字体n;
- 设置一种字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div1 {font-family:Arial;}
#div2 {font-family: "Times New Roman";}
#div3 {font-family: "微软雅黑";}
</style>
</head>
<body>
<div id="div1">Arial</div>
<div id="div2">Times New Roman</div>
<div id="div3">微软雅黑</div>
</body>
</html>
- 设置多种字体(按序查找第一种安装字体)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{font-family:Arial,Verdana,Georgia;}
</style>
</head>
<body>
<p>Rome was't not built in a day.</p>
</body>
</html>
13.3 字体大小
font-size:关键字或px或em或百分比等;
- small、medium、large
- 10px、16px、21px、…
13.3.1 px是什么
pixel,相对单位,与屏幕分辨率有关。
13.3.2 采用px单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1 {font-size: 10px;}
#p2 {font-size: 15px;}
#p3 {font-size: 20px;}
</style>
</head>
<body>
<p id="p1">字体大小为10px</p>
<p id="p2">字体大小为15px</p>
<p id="p3">字体大小为20px</p>
</body>
</html>
13.4 字体粗细
font-weight:取值;
-
100~900
-
lighter(100)、normal(默认,400)、bold(700)、bolder(900)
-
数值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1 {font-weight: 100;}
#p2 {font-weight: 400;}
#p3 {font-weight: 700;}
#p4 {font-weight: 900;}
</style>
</head>
<body>
<p id="p1">字体粗细为:100(lighter)</p>
<p id="p2">字体粗细为:400(normal)</p>
<p id="p3">字体粗细为:700(bold)</p>
<p id="p4">字体粗细为:900(bolder)</p>
</body>
</html>
- 关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{font-weight:lighter;}
#p2{font-weight:normal;}
#p3{font-weight:bold;}
#p4{font-weight:bolder;}
</style>
</head>
<body>
<p id="p1">字体粗细为:lighter</p>
<p id="p2">字体粗细为:normal</p>
<p id="p3">字体粗细为:bold</p>
<p id="p4">字体粗细为:bolder </p>
</body>
</html>
13.5 字体风格
font-style:取值;
-
normal
正常,默认 -
italic
斜体 -
oblique
斜体
并非所有字体都有italic属性,无italic属性可使用oblique。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{font-style:normal;}
#p2{font-style:italic;}
#p3{font-style:oblique;}
</style>
</head>
<body>
<p id="p1">字体样式为normal</p>
<p id="p2">字体样式为italic </p>
<p id="p3">字体样式为oblique</p>
</body>
</html>
13.6 字体颜色
color:颜色值;
关键字、RGB、RGBA、HSL等。
- 关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{color:gray;}
#p2{color:orange;}
#p3{color:red;}
</style>
</head>
<body>
<p id="p1">字体颜色为灰色</p>
<p id="p2">字体颜色为橙色</p>
<p id="p3">字体颜色为红色</p>
</body>
</html>
- RGB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{color: #03FCA1;}
#p2{color: #048C02;}
#p3{color: #CE0592;}
</style>
</head>
<body>
<p id="p1">字体颜色为#03FCA1</p>
<p id="p2">字体颜色为#048C02</p>
<p id="p3">字体颜色为#CE0592</p>
</body>
</html>
13.7 CSS注释
/*注释内容*/
- css与html注释区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*这是CSS注释*/
p{color:pink;}
</style>
</head>
<body>
<!--这是HTML注释-->
<p>记忆之所以美,是因为有现实的参照。</p>
</body>
</html>
- css样式后面覆盖前面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*使用元素选择器,定义所有p元素样式*/
p
{
font-family:微软雅黑; /*字体类型为微软雅黑*/
font-size:14px; /*字体大小为14px*/
font-weight:bold; /*字体粗细为bold*/
color:red; /*字体颜色为red*/
}
/*使用id选择器,定义个别样式*/
#p2
{
color:blue; /*字体颜色为blue*/
}
</style>
</head>
<body>
<p id="p1">HTML控制网页的结构</p>
<p id="p2">CSS控制网页的外观</p>
<p id="p3">JavaScript控制网页的行为</p>
</body>
</html>