CSS入门篇04.字体样式及行间距

最新推荐文章于 2024-05-13 02:38:25 发布

大白菜·

最新推荐文章于 2024-05-13 02:38:25 发布

阅读量965

点赞数 4

文章标签： css 前端 html java javascript

本文链接：https://blog.csdn.net/m0_62404129/article/details/126331714

版权

字体样式

1.长度单位：

像素 px、

百分比 % 是一个相对单位，相对于其父元素高宽，多用于流体式布局、

em 相对于当前字体的大小设置的，是一个相对单位，字体默认大小16px，若没设置字体大小，则继承其祖先元素字体大小，直到根标签默认字体大小16px、

rem 只相对于根标签字体大小来设置，是一个相对单位

2.颜色单位

Rgb（red、green、blue）

Rgba（red、green、blue 、0—1） 0是透明，1是不透明

Hsla 表示亮度、色相、颜色、透明度

使用十六进制 0-9abcdef

3.字体样式

Color 文字颜色

Font-family 文字字体

Font-size 文字大小

@font-face 自定义字体

Font简写：大小、字体必须写，而且大小在倒二，字体在倒一

代码演示为：

<!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>字体样式</title>
    <style>
        div{
            
            height: auto;
            background-color: aqua;
        }
        /* rgb */
        p:first-child{
            background-color: rgb(0,0,0);
        }
        /* rgba(a是设置透明度的)
        0是透明，1是不透明 */
        p:nth-child(2){
            background-color: rgba(0, 0, 0, 0.5);
        }
        /* color 设置文字颜色 */
        p:nth-child(3){
            color: blue;
        }
        /* font-family 设置文字字体 */
        p:nth-child(4){
            font-family: 'Times New Roman', Times, serif;
            color: red;
        }
        /* font-size 设置文字大小 */
        p:nth-child(5){
           font-size: 12px;
        }
        /* @font-face 自定义字体
        我没下字体，所以这里就不举个栗子了. */
        p:nth-child(6){
            background-color: blueviolet;
        }
        /* font 简写，但注意：大小字体必须要写，而且大小在倒二，字体在倒一 */
        p:nth-child(7){
            font: 20px 'Times New Roman', Times, serif;
        }
    </style>
</head>

<body>
    <div>
        <p>长歌行</p>
        <p>汉乐府</p>
        <p>青青园中葵，朝露待日晞。</p>
        <p>阳春布德泽，万物生光辉。</p>
        <p>常恐秋节至，焜黄华叶衰。</p>
        <p>百川东到海，何时复西归？</p>
        <p>少壮不努力，老大徒伤悲！</p>
    </div>
</body>

</html>

效果图为：

行间距

行高（line height）：文字占有的实际高度、上间距+下间距+字体大小

行间距=上间距+下间距

Line-heigh属性：1.直接放大小单位px、em、rem、%

2.直接放倍数（当前字体大小的倍数）例如：1 2 3

3.放百分比（当前字体大小的百分比）

单行文本在父元素中垂直居中：单行文本高度设置和高度一致，就会垂直居中

font也可以指定大小

大白菜·

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS入门篇04.字体样式及行间距

像素 px、百分比 % 是一个相对单位，相对于其父元素高宽，多用于流体式布局、em 相对于当前字体的大小设置的，是一个相对单位，字体默认大小16px，若没设置字体大小，则继承其祖先元素字体大小，直到根标签默认字体大小16px、rem 只相对于根标签字体大小来设置，是一个相对单位Rgba（red、green、blue 、0—1） 0是透明，1是不透明Hsla 表示亮度、色相、颜色、透明度使用十六进制 0-9abcdefColor 文字颜色Font-family 文字字体。...
复制链接

扫一扫