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

mali378287007

于 2022-07-05 07:23:01 发布

阅读量378

点赞数 1

分类专栏：整理学习 css 文章标签： css

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125611971

版权

整理同时被 3 个专栏收录

181 篇文章 11 订阅

订阅专栏

学习

130 篇文章 4 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

《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>

<!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>