css字体属性

最新推荐文章于 2022-09-04 10:34:10 发布

miku@meow

最新推荐文章于 2022-09-04 10:34:10 发布

阅读量379

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_51847874/article/details/122457188

版权

笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

CSS字体属性定义字体，加粗，大小，文字样式。
在这里插入图片描述

2.1color
规定文本的颜色
div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

2.2font-size
设置文本的大小。
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：
字体大小的值可以是绝对或相对的大小。
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

2.3font-weight
设置文本的粗细

在这里插入图片描述

H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

2.4font-style
指定文本的字体样式
在这里插入图片描述

2.5font-family
font - family属性指定一个元素的字体。
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
注意：每个值用逗号分开。
注意: 如果字体名称包含空格，它必须加上引号。
font-family:“Microsoft YaHei”,“Simsun”,“SimHei”;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        2、字体属性——继承性
        1）字体颜色
        color:;

        2）字体大小
        font-size:;
        浏览器默认字体大小为16px
        浏览器支持的最小字体为12px

        3）字体是否加粗
        font-weight:;
        取值：
        normal  默认值  不加粗
        bold    加粗
        100-900   400 = normal   700 = bold

        4）字体样式
        font-style:;
        取值：
        normal  默认值  不倾斜
        italic  倾斜

        5）字体
        font-family:字体1,字体2,..;
        浏览器从左往右支持，如果支持字体1，显示字体1，如果不支持字体1，显示字体2
        如果字体有空格，必须加引号，例如："Microsoft YaHei"

        3、颜色的取值
        1）关键词  red  blue green
        2）十六进制    包含0-9  A-F
        #000000——黑色  简写#000
        #ffffff——白色  简写#fff
        3）rgb()  取值0-255
        rgb(0,0,0)  黑色
        rgb(255,255,255)  白色
        4）rgba()
        a：透明度，取值0-1
        0：完全透明
        1：不透明
        0.56 可以简写为 .56

        rgba(0,0,0,.18)  黑色有0.18的透明度


        */
        .box{
            color: red;
            /*color: #ff0000;*/
            /*color: rgb(255,0,0);*/
            /*color: rgba(255,0,0,.5);*/

            font-size: 24px;

            font-weight: 900;

            font-style: italic;

            font-family: 幼圆,楷体;
        }
        b,h1{
            font-weight: 400;
        }
        i{
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="box">
       周五啦！！放假啦！！
        <span>我是div的儿子</span>
    </div>

    <b>加粗</b>
    <h1>一号标题</h1>
    <i>倾斜</i>
</body>
</html>