【前端寻宝之路】学习和总结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)

相关阅读:
GameFi 行业何时能迎来 “第二增长曲线” ？| July Report
linux系统Jenkins工具参数化构建
 【虚幻引擎UE】UE5 实现相机录制视频并导出（C++调用外部exe）
停车位预约导航系统APP
并购交易：私募基金CSP将以1.74亿美元收购纽交所上市公司Startek
进程属性/进程状态
 [iOS开发]离屏渲染优化方案
 jvm 内存模型概述
 Linux常用命令练习
 华为数通方向HCIP-DataCom H12-831题库(单选题：301-310）
原文地址：https://blog.csdn.net/Aileenvov/article/details/136570592