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

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

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

文章目录

`CSS常用属性`

`CSS常用属性`

`字体设置`

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

    style>
head>
<body>
    <div>这是宋体div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

`字体大小`

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

    style>
head>
<body>
    <div>这是宋体div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

`字体颜色`

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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

`字体粗细`

在这里插入图片描述

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

    style>
head>
<body>
    <div>这是第一段话div>
    <p>这是第二段话p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

`字体样式`

在这里插入图片描述

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

    style>
head>
<body>
    <div>这是第一段话div>
    <p>这是第二段话p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述
](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

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

相关阅读:
前端练手项目合集40.0个，附源码，2022年最新
 java实现二叉搜索树功能
 武汉新时标文化传媒有限公司短视频的传播现状及侵权分析
 有关Java发送邮件信息（支持附件、html文件模板发送）
【Java第31期】：Spring中存储Bean的注解以及用法
 分布式调度框架Elastic-Job和xxl-job区别
 js（javascript）中关于查找与替换常用的实用方法
 静态Vxlan隧道同子网互访实验
 深入理解java垃圾回收机制
 浪潮服务器重置密码方法
原文地址：https://blog.csdn.net/Aileenvov/article/details/136570592