③HTML+CSS 文本格式化 (颜色、单位、文本样式）

最新推荐文章于 2021-09-10 21:05:20 发布

只爭朝夕不負韶華

最新推荐文章于 2021-09-10 21:05:20 发布

阅读量871

点赞数 1

分类专栏： # HTML和CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_45613931/article/details/105243802

版权

HTML和CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文本格式化——为内容设置不同的样式

单位 ※
颜色 ※
文本样式

本人是个新手，写下博客用于自我复习、自我总结。
如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

单位 ※

• px
如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个像素，也就是1px。不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
，所以同样的200px在不同的设备下显示效果不一样

• 百分比 ※
可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。也就是说，设置百分比可以使子元素跟随父元素的改变而改变

• em
em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%

• rem
rem是相对于根元素的字体大小来计算

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单位</title>
    <style>
        html{
            font-size: 30px;
        }

        .box1{
            width: 300px;
            height: 100px;
            background-color: orange;
        }

        .box2{
            width: 50%;
            height: 50%;
            background-color:aqua; 
        }

        .box3{
            font-size: 50px;
            /* width: 10em;
            height: 10em; */
            width: 10rem;
            height: 10rem;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

颜色 ※

• 在CSS中可以直接使用颜色的关键字来代表一种颜色。
• 17中颜色
aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。
• 还有147种svg颜色，这里就不一一列举了，但是明显即使这些颜色变成double，也不足以描绘我们世界中所有的颜色。

• 用的最多的颜色是十六进制符号。一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字。（可以采用QQ截图的方式，将鼠标放在想选取的颜色上，再按Ctrl，既可以看到对应颜色的十六进制符号）
• 上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。
• 如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将#6600FF缩短为#60F。

RGB值
• 也可以使用计算机中常用的RGB值来表示颜色。可以使用0 ~ 255的数值，也可以使用0%~100%的百分比数。
如：
RGB(100%,0%,0%)
RGB(0,255,0)
• 第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度。
R red，G green ，B blue

RGBA
• RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明，.5半透明。
如：RGBA(255,100,5,0.5)

HSL值 HSLA值 ※
H 色相(0 - 360)
S 饱和度，颜色的浓度 0% - 100%
L 亮度，颜色的亮度 0% - 100%
A 透明度，一个0-1之间的值。0表示完全透明，1表示完全不透明，.5半透明。

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>颜色</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            background-color: rgb(255, 0, 0);
            background-color: rgb(0, 255, 0);
            background-color: rgb(0, 0, 255);
            background-color: rgb(255,255,255);
            background-color: rgb(106,153,85);
            background-color: rgba(106,153,85,.5);
            background-color: #ff0000;
            background-color: #ffff00;
            background-color: #ff0;
            background-color: #bbffaa;
            background-color: #9CDCFE;
            background-color: rgb(254, 156, 156);
            background-color: hsla(98, 48%, 40%, 0.658);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

文本样式

文字大小

font-size用来指定文字的大小。

斜体和粗体 ※

• font-style用来指定文本的斜体。
– 指定斜体：font-style:italic
– 指定非斜体：font-style:normal
• font-weight用来指定文本的粗体。
– 指定粗体：font-weight:bold
– 指定非粗体：font-weight:normal

小型大写字母

• font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。
font-variant:small-caps

字体 ※

• 通过font-family可以指定标签中文字使用的字体。
• 例如：p{font-family:Arial}
上边这行代码指定了p标签中使用名为arial作为字体
• 一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。

• 通过font-family也可以同时指定多个字体。
• 例如：p{font-family:Arial , Helvetica , sans-serif}
• 如上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。
• 这里面sans-serif并不是指的具体某一个字体。而是一类字体。
在这里插入图片描述
以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。

font-face可以将服务器中的字体直接提供给用户去使用
同时存在下列问题：
1.加载速度
2.版权
3.字体格式

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字体</title>
    <style>
        @font-face {
            /* 指定字体的名字 */
            font-family:'myfont' ;
            /* 服务器中字体的路径 */
            src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
        }

        p{
            color: blue;
            font-size: 40px;

            /* font-family: 'Courier New', Courier, monospace; */
            font-family: myfont;
        }
    </style>
</head>
<body>
    <p>
        今天天气真不错，Hello Hello How are you！
    </p>
</body>
</html>

行高 ※

line-height用于设置行高，行高越大则行间距越大。

行间距 = line-height – font-size

行高指的是文字占有的实际高度。行高可以直接指定一个大小（px em），也可以直接为行高设置一个整数。如果是一个整数的话，行高将会是字体的指定的倍数。
比如：line-height: 1.33;

字体框就是字体存在的格子，如果有字体框，行高会在字体框的上下平均分配。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行高</title>
    <style>
        div{
            font-size: 50px;
            /* 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中 */
            line-height: 200px;

            border: 1px red solid;

            /* line-height: 1.33; */
        }
    </style>
</head>
<body>
    
    <div>今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello</div>

</body>
</html>

字体属性的简写 ※

• font可以一次性同时设置多个字体的样式。
• 语法： font:加粗斜体小型大写大小/行高字体
• 这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。行高可以省略不写，如果不写使用默认值。

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字体的简写属性</title>
    <style>
        div{
            font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;
        }
    </style>
</head>
<body>
    <div>今天天气真不错 Hello hello</div>
</body>
</html>

大写化 ※

text-transform样式用于将元素中的字母全都变成同样大小。
– 所有字母大写：text-transform:uppercase
– 所有字母小写：text-tansform:lowercase
– 所有单词首字母大写：text-transform:capitalize
– 正常：text-transform:none

设置网页如何处理空白

white-space
可选值：
normal 正常
nowrap 不换行
pre 保留空白

文本的修饰 ※

• text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
• 可选值：
– underline
– overline
– line-through
– none

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本样式</title>
    <style>
        .box1{
            font-size: 50px;
            font-family: 微软雅黑;
            text-decoration: underline;
        }
        .box2{
            width: 200px;
            /* 
                white-space 设置网页如何处理空白
                    可选值：
                        normal 正常
                        nowrap 不换行
                        pre 保留空白
            */
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt numquam. Dolores, cupiditate enim.
    </div>
    <div class="box1">
        今天天气真不错
    </div>
</body>
</html>

首行缩进

• text-indent用来设置首行缩进。
• 该样式需要指定一个长度，并且只对第一行生效。

字母间距和单词间距

• letter-spacing用来设置字符之间的间距。
• word-spacing用来设置单词之间的间距。
• 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

对齐文本 ※

text-align用于设置文本的对齐方式。
• 可选值：
– left：左对齐
– right：右对齐
– justify：两边对齐
– center：居中对齐

vertical-align 设置元素垂直对齐的方式
• 可选值：
- baseline 默认值基线对齐
- top 顶部对齐
- bottom 底部对齐
- middle 居中对齐

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本样式</title>
    <style>
        div{
            width: 800px;
            border: 1px red solid;

            text-align: right; 

            font-size: 50px;
        }

        span{
            font-size: 20px;
            border: 1px blue solid;
            vertical-align:top; 
        }

        p{
            border: 1px red solid;
        }

        img{
            vertical-align: bottom;
        }
    </style>
</head>
<body>
	<div>
        今天天气<span>真不错 Hello</span>！
	</div>
    <p>
       <img src="./img/2.gif" alt=""> 
    </p>
</body>
</html>

图标字体

在网页中经常需要使用一些图标，可以通过图片来引入图标。但是图片大小本身比较大，并且非常的不灵活。
所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入
这样我们就可以通过使用字体的形式来使用图标

fontawesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
- 直接通过类名来使用图标字体
class=“fas fa-bell”
class=“fab fa-accessible-icon”

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图标字体</title>
    <link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
    <i class="fas fa-bell" style="font-size:80px; color:red;"></i>
    <i class="fas fa-bell-slash"></i>
    <i class="fab fa-accessible-icon"></i>
    <i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>
</html>

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图标字体</title>
    <link rel="stylesheet" href="./fa/css/all.css">
    <style>
        li{
            list-style: none;
        }

        li::before{
            /* 
            通过伪元素来设置图标字体
            1.找到要设置图标的元素通过before或after选中
            2.在content中设置字体的编码
            3.设置字体的样式
            */
            content: '\f1b0';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; 
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>

    <!-- 
        通过实体来使用图标字体：
            &#x图标的编码;
     -->
    <span class="fas">&#xf0f3;</span>
</body>
</html>

只爭朝夕不負韶華

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
③HTML+CSS 文本格式化 (颜色、单位、文本样式）

文本格式化——为内容设置不同的样式单位 ※颜色 ※文本样式文字大小斜体和粗体 ※小型大写字母字体 ※行高 ※字体属性的简写 ※大写化 ※设置网页如何处理空白文本的修饰 ※首行缩进字母间距和单词间距对齐文本 ※图标字体本人是个新手，写下博客用于自我复习、自我总结。如有错误之处，请各位大佬指出。学习资料来源于：尚硅谷单位 ※• px如果我们将一个图片放大的话，我们会发现一个图片是有一个...
复制链接

扫一扫