CSS学习03：CSS文本属性

玉安_ZhangDe

已于 2022-03-23 21:55:47 修改

阅读量337

点赞数

分类专栏： CSS 文章标签：前端 css3 学习 css

于 2022-03-20 20:42:08 首次发布

本文链接：https://blog.csdn.net/qq_47373340/article/details/123609411

版权

CSS 专栏收录该内容

39 篇文章 7 订阅

订阅专栏

文本颜色★

color用来自定义文本的颜色属性

<!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>
    <style>
        p {
            /* 1. 预定义颜色，例如 英语单词代表的颜色 red pink 平常讲新知识时常用*/
            color: pink;
        }
        span {
            /* 2. 十六进制颜色，工作中最常用 */
            /* 在计算机中常见进制 二进制（0~1） 八进制（0~7） 十进制（0~9） 十六进制（0~9 a~f） */
           /* #000 黑色 #fff白色  #ccc 灰色 */
           /* 如 color: #6a9955;  */                
           /* 十六进制表示颜色时，六个值 两个两个一组 如果每一组都时相同的可以用一个表示
           #aabbcc --> #abc #ffffff -- > #fff
           #ab0022 --✖-->不能缩写
           */
            color: #baf;
        }
        div {
           /* 3. rgb 里面每一个值取值范围0~255  很少用*/
           color: rgb(0, 255,255);
        }
    </style>
</head>
<body>
    <p>预定义颜色</p>
    <span>十六进制颜色</span>
    <div>RGB的颜色设置</div>
</body>
</html>

图例：

文本颜色总结

表示方式	属性值
预定义的颜色值	red、green、blue、pink……
十六进制	#000 #aaa #6a9955 #3a4f6a …… 十六进制表示颜色时，六个值两个两个一组如果每一组都时相同的可以用一个表示
RGB	rgb(0,255,255) 或者 rgb(0,100%,100%)

文本对齐★

text-align 属性用于设置元素内文本内容的水平对齐方式。

<!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>
    <style>
        body {

        }
        .bg1 {
            /* 文本对齐  left 默认值*/
            text-align: left;
        }
        .bg2 {
            /* 让盒子内文字水平居中 */
            text-align: center;
        }
        .bg3 {
            /* 让盒子内文字水平居右 */
            text-align: right;
        }
    </style>
</head>
<body>
    <p>文字对齐的方式</p>
    <div class="bg1">
        <span style="width: 100px; height: 100px;background-color: red; color: white;">left</span>
    </div>
    <div class="bg2">
        <span style="background-color: green; color: white;">center</span>
    </div>
    <div class="bg3">
        <span style="background-color: blue; color: white;">right</span>
    </div>
</body>
</html>

图例：

文本对齐总结

属性值	说明
left	左对齐（默认）
right	右对齐
center	居中对齐

修饰文本

<!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>
    <style>
        a {
            /* 取消下划线  最常用*/
            text-decoration: none;
        }
        p {
            /* 添加下划线 */
            text-decoration: underline;
        }
        div {
            /* 删除线 相当于 del标签 */
            text-decoration: line-through;
        }
        span {
            /* 添加上划线 */
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <a href="#">取消下划线</a>
    <p>添加下划线</p>
    <div>删除线</div>
    <br>
    <span>上划线</span>
</body>
</html>

图例：

属性值	说明
none	默认，没有装饰线（最常用，用于给超链接去除下划线）
underline	下划线。超链接自带（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

文本缩进

<!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>
    <style>
        p {
            font-size: 16px;
            /* 文本缩进 text-indent 值可以是px 也可以是 em*/
            /* 首行缩进  px值可以是正，正值向右走。 也可以是负，负值向左走*/
            text-indent: 32px;
            /* em 是一个相对单位，相对于当前盒子上文字大小 */
            /* text-indent: 2em; */
        }
        div {
            text-indent: 100px;
        }
        span {
            /* 不是独占一行的盒子 不能使用 首行缩进代码 */
            text-indent: 50px;
        }
    </style>
</head>
<body>
    <p>
        我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。
    </p>
    <div>
        浔阳江头夜送客，枫叶荻花秋瑟瑟。
    </div>
    <span>
        浔阳江头夜送客，枫叶荻花秋瑟瑟。
    </span>
</body>
</html>

图例：

文本缩进总结

文本缩进 text-indent 值可以是px 也可以是 em。

首行缩进， px值可以是正，正值向右走；也可以是负，负值向左走。

em 是一个相对单位，相对于当前盒子上文字大小。

不是块元素（独占一行的元素），不能使用文本缩进。

行高

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

行高 = 上间距+ 文字高度 + 下间距

也可以使父元素里的子元素垂直居中，可以搭配text-align来记忆

<!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>
    <style>
        .p1 {
            /* 行高，设置行于行之间的距离 */
            /* 行高 = 上空隙 + 文字高度 + 下空隙 */
            line-height: 30px;
            /* 1.5代表的是行高是字体的1.5倍 */
            font:  16px/2.0 '微软雅黑';
        }
        
    </style>
</head>
<body>
    <p class="p1">
        忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。
    </p>
    <p>
        忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。
    </p>
</body>
</html>

图例：

玉安_ZhangDe

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS学习03：CSS文本属性

文本颜色color用来自定义文本的颜色属性<!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..
复制链接

扫一扫

专栏目录