CSS学习笔记3：字体样式

最新推荐文章于 2024-05-03 15:15:35 发布

提辖鲁

最新推荐文章于 2024-05-03 15:15:35 发布

阅读量160

点赞数

分类专栏： Web # CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/lj402159806/article/details/122481735

版权

Web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

CSS

13 篇文章 0 订阅

订阅专栏

字体类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体类型</title>
    <!--font-family	字体类型-->
    <style>
        #div1 {
            font-family: Arial;
        }
        /*字体类型是多个英文单词或者中文，需要加上双引号*/
        #div2 {
            font-family: "Times New Roman";
        }

        #div3 {
            font-family: "Heiti SC";
        }
        /*可以指定多种字体，以逗号分隔*/
        /*如果没有指定的字体，则按从左往右的优先级选择字体，*/
        p {
            font-family: Arial, Verdana, Georgia;
        }
    </style>
</head>
<body>
<div id="div1">Arial</div>
<div id="div2">Times New Roman</div>
<div id="div3">黑体</div>
<p>Rome was not built in a day.</p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体大小</title>
    <!--font-size	字体大小-->
    <!--font-size   取值单位不仅仅是px，还有em、百分比等-->
    <style>
        #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">字体大小为120px</p>
</body>
</html>

在这里插入图片描述

字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体粗细</title>
    <!--font-weight	字体粗细-->
    <!--lighter	    较细-->
    <!--normal	    正常（默认值）-->
    <!--bold	    较粗-->
    <!--bolder	    很粗（其实效果跟bold差不多）-->
    <style>
        /* font-weight取值分为数值与关键字 */
        /* 一般使用关键字 */
        #p1 {
            font-weight: 100;
        }

        #p2 {
            font-weight: 400;
        }

        #p3 {
            font-weight: 700;
        }

        #p4 {
            font-weight: 900;
        }

        #p11 {
            font-weight: lighter;
        }

        #p22 {
            font-weight: normal;
        }

        #p33 {
            font-weight: bold;
        }

        #p44 {
            font-weight: bolder;
        }

    </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>
<br/>
<!--关键字-->
<p id="p11">字体粗细为lighter</p>
<p id="p22">字体粗细为normal</p>
<p id="p33">字体粗细为bold</p>
<p id="p44">字体粗细为bolder</p>
</body>
</html>

在这里插入图片描述

字体风格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体风格</title>
    <!--font-style	字体风格-->
    <!--normal	正常（默认值）-->
    <!--italic	斜体-->
    <!--oblique	斜体-->
    <!--有些字体有斜体italic属性，但有些字体却没有italic属性。
    oblique是让没有italic属性的字体也能够有斜体效果-->
    <style>
        #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>

在这里插入图片描述

字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体颜色</title>
    <!--color	字体颜色-->
    <style>
        /* color取值分为关键字与16进制RGB值 */
        #p1 {
            color: gray;
        }

        #p2 {
            color: orange;
        }

        #p3 {
            color: red;
        }

        #p11 {
            color: #03FCA1;
        }

        #p22 {
            color: #048C02;
        }

        #p33 {
            color: #CE0592;
        }
    </style>
</head>
<body>
<p id="p1">字体颜色为灰色</p>
<p id="p2">字体颜色为橙色</p>
<p id="p3">字体颜色为红色</p>
<p id="p11">字体颜色为#03FCA1</p>
<p id="p22">字体颜色为#048C02</p>
<p id="p33">字体颜色为#CE0592</p>
</body>
</html>

在这里插入图片描述

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Practice</title>
    <style>
        #p1 {
            font-family: Arial, Verdana, Georgia;
            font-size: 14px;
            font-weight: bold;
            color: blue;
        }
    </style>
</head>
<body>
<p id="p1">有规划的人生叫蓝图，没规划的人生叫拼图。</p>
</body>
</html>

在这里插入图片描述

提辖鲁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记3：字体样式

字体类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>字体类型</title>  <style> #div1 { font-family: Arial; } /*字体类型
复制链接

扫一扫