CSS外观属性

想被欧拉吗

于 2020-03-11 19:00:21 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/weixin_39326721/article/details/104803154

版权

color：文本颜色

作用：用于定义文本的颜色

取值有以下三种方法：

平时工作中用得比较多的是16进制的写法。

<style>
p{color:#f00;}
h1{color:rgb(255,222,1s)}
</style>

rgb里面的数字之间要用逗号,隔开而不是用.号

text-align：文本水平对齐方式

作用：text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

属性取值如下：

是让盒子内的内容水平居中，而不是让盒子居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本水平对齐</title>
    <style>
        .duiqi{
            text-align:center;
        }
    </style>
</head>
<body>
    <p class="duiqi">你好</p>
</body>
</html>

line-height：行间距

作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

单位：line-height常用的属性有像素px，相对值em，百分比％，实际工作中使用的比较多的是px

一般情况下，行与行之间的距离只需要比文字大小大7.8px就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本行间距</title>
    <style type="text/css">
        .div {
            line-height:24px;
        }
    </style>
</head>
<body>
    <div class="div">阿斯达所大大是大是大阿萨德开始到卡数据后的卡视角的卡视角的卡视角的克拉斯加断开啦数据的卡视角的卡视角的卡视角的卡视角的扣拉手的啦卡视角的拉丝机的啦卡视角的拉卡视角的扣拉手的扣拉手的扣拉手的扣拉手大抗裂砂浆的扣拉手打开了会发送可乐好发送恐龙当家奥斯卡了解到卡老实交代奥斯卡劳动节奥斯卡了解到卡老实交代卡拉丝机大抗裂砂浆断开啦上搭建按时</div>
</body>
</html>

text-indent:首行缩进

作用：text-ident属性一般用于设置首行文本的缩进

属性值：其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比％，允许使用负值。

建议使用em作为设置单位

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本行间距设置</title>
    <style>
        .div {
            text-height:24px;
            text-indent:2em;
        }
    </style>
</head>
<body>
    <div class="div">阿斯达所大是的阿萨德按时按时大撒大声地按时大声道阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德按时大师大师大师大师大声道阿萨德按时阿萨德按时按时大师大师按时阿斯达所大师大师大师阿萨德按时按时的阿斯达所大阿萨德阿萨德按时大师大师大师阿诗丹顿按时大师阿萨德阿萨德阿萨德阿萨德阿萨德按时阿斯达所大阿萨德</div>
</body>
</html>

text-decoration文本的装饰

text-decoration通常给连接修改装饰效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接修饰</title>
    <style>
        a {
            text-decoration:none;
        }
    </style>
</head>
<body>
    <a href="#">按F进入坦克</a>
</body>
</html>

CSS外观属性总结：

想被欧拉吗

关注

0
点赞
踩
1

收藏

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

color：文本颜色作用：用于定义文本的颜色取值有以下三种方法：平时工作中用得比较多的是16进制的写法。<style>p{color:#f00;}h1{color:rgb(255,222,1s)}</style>rgb里面的数字之间要用逗号,隔开而不是用.号text-align：文本水平对齐方式...
复制链接

扫一扫