【实习第五天】css字体样式

最新推荐文章于 2023-11-23 16:50:58 发布

夜色已晚

最新推荐文章于 2023-11-23 16:50:58 发布

阅读量431

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_48000103/article/details/127989243

版权

这篇博客主要介绍了CSS中关于字体样式的知识，包括长度单位、颜色单位、字体样式、字体分类、其他字体样式、行间距以及多种文本样式，是学习CSS布局和美化文本的重要参考资料。

摘要由CSDN通过智能技术生成

1.长度单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        长度单位
            1：像素 px
                就是电脑上的一个个发光的小点，我们眼睛是看不出来,像素是我们pc端上常用的一个单位,它是一个固定单位
            2：百分比 %
                是父元素的宽高的百分比，是一个相对单位，一般情况下，做流式布局比较多
            3:em
                也是一个相对单位，相对于当前元素的字体大小来计算最终大小，也就是1em=1个font-size。如果当前的元素没有设置字体大小，那么会继承祖先元素的字体大小，最终继承到html默认的字体大小，是16px

            4:rem
                r root 根
                也是一个相对单位，相对于根标签html的字体大小来计算最终大小
                也就是1rem=1个html的font-size
            
            5：vw、vh
     -->
     <style>
        section{
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div{
            width: 50%;
            height: 50%;
            background-color: red;
        }

     </style>
</head>
<body>
    <section>
        <div>
            密才孔连。
        </div>
    </section>
</body>
</html>

2.颜色单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        颜色单位：
        1：在CSS可以直接使用颜色的单词来表示不同的颜色
            red、green、yellow、black等
            缺点：颜色单词太多了，不好描述

        2：使用RGB值来表示不同的颜色
        rgb（红色，绿色，蓝色）
            颜色的值 0-255之间 0最小，255最大
            直接用电脑或者插件可以吸取颜色的比值

        3：RGBA
        rgba(red,green,blue,alpha)
        qlpha 透明度 o-1之间  0是透明，1是不透明

        4：使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样
         十六进制：0-9，abcdef，  00表示最小，代替0-255的0
                                ff表示最大，代替0-255的255
          用十六进制的值分别表示红色，绿色，蓝色的浓度
          语法：#ff0000,像这样两两重复的表示，可以省略一位，简写成#f00
               #f0f0f0 这样的是不可以省略

        5：HSL值（H-色相 0-360，S-饱和度 0-100%，L-亮度 0-100%）
            HSLA值  A-alpha 透明度 0-1之间
     -->
     <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(65, 15, 78); 
        }
     </style>
</head>
<body>
    <