【前端寻宝之路】学习和总结CSS的字体属性设置

最新推荐文章于 2024-07-14 16:43:41 发布

Aileen_0v0

最新推荐文章于 2024-07-14 16:43:41 发布

阅读量1.2k

点赞数 30

分类专栏：前端寻宝之路系列文章标签：前端学习 css

本文链接：https://blog.csdn.net/Aileenvov/article/details/136570592

版权

前端寻宝之路系列专栏收录该内容

12 篇文章 3 订阅

订阅专栏

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
💫个人格言:“没有罗马,那就自己创造罗马~”

文章目录

`CSS常用属性`

`CSS常用属性`

学习链接:CSS常用属性

`字体设置`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-family: '宋体';
            font-size: 80px;
        }

    </style>
</head>
<body>
    <div>这是宋体</div>
</body>
</html>

在这里插入图片描述

`字体大小`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-family: '宋体';
            font-size: 80px;
        }

    </style>
</head>
<body>
    <div>这是宋体</div>
</body>
</html>

在这里插入图片描述

`字体颜色`

1.直接写颜色的英文单词

color : red ;

2.通过十六进制表示

color : #ff0000 ;

3.通过rgb表示

color : rgb(225,0,0) ;

其中,第二种和第三种表示的都是三原色:红,绿,蓝
数值越大,表示该颜色的分量越浓.
225,225,225就表示白色
0,0,0就表示黑色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-style: oblique;
            color:#f00;
        }
        p {
            font-style:italic;
            color: rgb(0, 0, 225);
        }
    </style>
</head>
<body>
    <div>这是第一段话</div>
    <p>这是第二段话</p>
</body>
</html>

在这里插入图片描述

`字体粗细`

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-weight: bolder;
        }
        p {
            font-weight: lighter;
        }

    </style>
</head>
<body>
    <div>这是第一段话</div>
    <p>这是第二段话</p>
</body>
</html>

在这里插入图片描述

`字体样式`

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-style: italic;
        }
        p {
            font-style:oblique;
        }

    </style>
</head>
<body>
    <div>这是第一段话</div>
    <p>这是第二段话</p>
</body>
</html>