CSS外观属性

最新推荐文章于 2024-08-15 15:11:28 发布

烤红薯卖地瓜

最新推荐文章于 2024-08-15 15:11:28 发布

阅读量232

点赞数 9

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_17131933/article/details/139717997

版权

line-height:行间距

行高是指文本行基线间的垂直距离:基线与基线之间的距离。

属性名	line-height
normal	默认,设置合理的行间距
length	设置固定的行间距(不允许使用复制，一般用px作单位)
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距，相当于倍数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .odiv {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            line-height: 200px;
            /*  行高 会让文本在当前行内的最中间 单文本垂直方向居中*/
            /*  如果需要在一个盒子中让单行文本垂直居中 需要设置行高为盒子的高度*/
            text-align: center;
            /*  内容在水平方向的对齐方式 left左对齐 center居中 right右居中*/
        }
    </style>
</head>

<body>
    <div class="odiv">今天真热</div>
</body>

</html>

效果：

text-align:水平对齐方式

left	左对齐
center	居中
right	右对齐

不仅仅可以使文本对齐，任何元素都可以

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200;
            height: 200;
            border: 1px solid red;
        }
        
        .odiv1 {
            text-align: center;
            /*  内容在水平方向的对齐方式 left左对齐 center居中 right右居中*/
        }
        
        .odiv2 {
            text-align: left;
        }
        
        .odiv3 {
            text-align: right;
        }
    </style>
</head>

<body>
    <div>
        <div class="odiv2">今天真热</div>
        <div class="odiv1">今天真热</div>
        <div class="odiv3">今天真热</div>
    </div>

</body>

</html>

效果：

text-indent:缩进

1em == 一个字符的长度

其值一般为2em 实现效果和&emsp；相类是作用都是使文本空格

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .otext {
            text-indent: 2em;
            /*效果与&emsp；相类是*/
        }
    </style>
</head>

<body>
    <p>热死了，真烦，还出不去了</p>
    <p class="otext">热死了，真烦，还出不去了</p>
    <p>&emsp;&emsp;热死了，真烦，还出不去了</p>
</body>

</html>

效果：

总体学习过程：

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .odiv {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            line-height: 200px;
            /*  行高 会让文本在当前行内的最中间 单文本垂直方向居中*/
            /*  如果需要在一个盒子中让单行文本垂直居中 需要设置行高为盒子的高度*/
            text-align: center;
            /*  内容在水平方向的对齐方式 left左对齐 center居中 right右居中*/
        }
        
        .inp {
            text-align: center;
            /*  不单单可以让文本对齐  任何元素都可以*/
        }
        
        .d2 {
            text-indent: 2em;
        }
        
        .oa {
            text-decoration: none;
        }
        /* 文本修饰，给文本添加或删除线 上划线 下划线 删除线*/
        /*伪类选择器*/
        /*:hover  鼠标悬停*/
        
        .oa:hover {
            text-decoration: underline;
            /* 给文本添加下划线*/
        }
        
        .one {
            word-spacing: 20px;
        }
        
        .oshadow {
            text-shadow: -1px 0px 0px rgb(0, 226, 251), 1px 0px 0px red;
            /* 4个属性 水平方向  垂直发方向 模糊程度 颜色 */
        }
    </style>


</head>

<body>
    <div class="odiv">今天周五，明天就要考</div>
    <div class="inp"><input type="text"></div>

    <a href="" class="oa">aaaaaaaaaaaaaaaaaa</a>
    <div class="one">aa aaaaaa aaaaaa aaaa</div>
    <br><br><br>
    <div class="oshadow">
        爱好古，爱美好生活
    </div>

</body>

</html>

字体样式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: yellowgreen;
            font-size: 10px;
            /*   文本默认大小为16px
            */
        }
        
        p {
            color: skyblue;
            /*
                color: rgba(red, green, blue, alpha);
                alpha 为字体的透明度 值为0到1之间
                若用16进制 注意在16进制之前添加#
            
            */
            font-weight: 100;
            /* 文本字体设置 */
        }
    </style>


</head>

<body>
    <div>
        天好热
        <p style="color: red;">
            热的要命
        </p>
    </div>
    <p>
        真的很热
    </p>
</body>

</html>

烤红薯卖地瓜

关注

9
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS外观属性

其值一般为2em 实现效果和&emsp；相类是作用都是使文本空格。行高是指文本行基线间的垂直距离:基线与基线之间的距离。1em == 一个字符的长度。不仅仅可以使文本对齐，任何元素都可以。text-align:水平对齐方式。line-height:行间距。text-indent:缩进。
复制链接

扫一扫