《HTML+CSS+JavaScript》之第13章 字体样式

130 篇文章 4 订阅
12 篇文章 0 订阅

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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值