11月8日字体的属性

目录

高度和宽度的知识点

当要给标签设置宽和高的时候会用到以下属性

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

css字体属性

首先就是字体的设置

需要用到font-family这个属性

代码如下

font-family:"Microsoft YaHei UI","微软雅黑","Arial","宋体","sans-serif"

然后实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family:"Microsoft YaHei UI","微软雅黑","Arial";color: blueviolet;
        }
    </style>
</head>
<body>
    <span>溜溜</span>
</body>
</html>

这里选择了三种字体分别是Microsoft YaHei UI、微软雅黑、Arial。但是由于计算机的问题无法展现效果了。

字体大小的设置(重点)

需要用到font-size这个属性来设置字体大小

代码格式

 font-size:数字+px

这里以p标签为例子

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            font-size:100px;color: blue;
        }
    </style>
</head>
<body>
<div>
    <p>丸子</p>
    <p>火锅</p>
</div>
</body>
</html>

效果如图

字体的粗细

需要用到font-weight属性来设置字体的粗细

值 描述
normal 标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值，默认值

代码

font-weight: 值

这里以p标签为例子，同时给每个p标签分别赋予不同的id值

<!--字体的粗细-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #p1{
            font-weight: normal;
        }
        #p2{
            font-weight: bold;
        }
        #p3{
            font-weight: bolder;
        }
        #p4{
            font-weight: lighter;
        }
        #p5{
            font-weight: 540;
        }
        #p6{
            font-weight: inherit;
        }

    </style>
</head>
<body>
<div>
    <p id="p1">丸子</p>
    <p id="p2">火锅</p>
    <p id="p3">寿喜烧</p>
    <p id="p4">麻辣烫</p>
    <p id="p5">关东煮</p>
    <p id="p6">龙须面</p>
</div>
</body>
</html>

效果如图

字体的颜色

就是color这个属性

代码

color: 颜色的英文名或特殊的;

实例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            color: maroon;
        }
    </style>
</head>
<body>
<p>丸子加火锅，生活意料之中</p>
</body>

</html>

效果如下

posted @ 2023-11-08 20:21  scxlzb  阅读(142)  评论(0)    收藏  举报