CSS3之text属性

最新推荐文章于 2022-12-09 10:23:08 发布

Programmer.杨

最新推荐文章于 2022-12-09 10:23:08 发布

阅读量1.0k

点赞数 1

分类专栏：前端技术-CSS 文章标签： color text-decoration text-shadown

本文链接：https://blog.csdn.net/ywb88888888/article/details/102672116

版权

前端技术-CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

color:

作用：
指定文本的颜色

说明：
该属性在块、行内、行内块的样式表中都可以使用，改变被控制元素内部所有文本的颜色

关于颜色值的四种写法：
          1.使用颜色名：white; 不推荐，有可能不被一些浏览器所解析
          2.使用十六进制：白色：#ffffff; 推荐使用
          3.使用rgb百分比：白色：rgb(100%, 100%, 100%);
          4.使用rgb数值：白色：rgb(255, 255, 255);
          5.使用rgba：完全透明：rgba( , , , 0);在4的基础上多了一个a属性，其中a是透明度的值 （0是完全透明，1是完全不透明，取值范围是0~1），该透明度设置于opacity不同，opacity作用于元素，以及元素内的所有子元素及内容的透明度，而rgba()只作用于元素本身的颜色或其背景色，与子元素和内容无关

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #coDiv {
            color: #00c6ff;
        }
        #coP {
            color: #2b542c;
        }
        #coSpan {
            color: palevioletred;
        }
        #coStrong {
            color: blueviolet;
        }
        #colIn {
            color: deeppink;
        }
    </style>
</head>
<body>
    <div id="coDiv">
        <p id="coP">
            我是一名前端爱好者1
        </p>
        我是一名前端爱好者2
    </div>

    <span id="coSpan">
        我是一名前端爱好者3
        <strong id="coStrong">我是一名前端爱好者4</strong>
    </span>

    <input type="text" id="colIn" />
</body>
</html>

text-align:

作用：
指定元素文本的水平对齐方式

说明：
          只在块级元素中使用生效，直接用在内联元素上不生效。如果使用该属性，在块元素中包含的文本、内联元素将会对齐，其内的块元素默认不设置此属性的话也会对齐，是因为子块元素继承父块元素的text-align的属性
常用值：
          (left)： 把文本排列到左边，默认值，由浏览器决定
          (right)： 把文本排列到右边
          (center)： 把文本排列到中间
          (justify)： 实现两端对齐文本效果
          (inherit)： 从父元素继承 text-align 属性的值

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>CSS3之font属性</title>
    
    <style type="text/css">
        div {
           border: 1px solid;
           width: 1200px;
           height: 150px;
        }
       
        #showdiv1 {
           text-align: left;
        }
        
        #showdiv2 {
            text-align: center;
        }
        
        #showdiv3 {
            text-align: right;
        }

        #showdiv4 {
           text-align: justify;
        }
    </style>
</head>
<body>
    <div id="showdiv1">
        大家好
    </div>

    <div id="showdiv2">
        大家好
    </div>

    <div id="showdiv3">
        大家好
    </div>

    <div id="showdiv4">
        In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
    </div>
</body>
</html>

letter-spacing:

作用：
增加或减少字符间的空白 （字符间距）

说明：
负值过大时，字体会产生挤压，但不会重叠

常用值：
          (normal)： 默认值，规定字符间没有额外的空间
          (length)： 定义字符间的固定空间 （允许使用负值）
          (inherit)： 从父元素继承 letter-spacing 属性的值

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #lsSpan1 {
            letter-spacing: normal;
        }

        #lsSpan2 {
            letter-spacing: 10px;
        }

        #lsSpan3 {
            letter-spacing: -4px;
        }
    </style>
</head>
<body>
    <span id="lsSpan1">Hello World</span><br>
    <span id="lsSpan2">Hello World</span><br>
    <span id="lsSpan3">Hello World</span><br>
</body>
</html>

line-height:

作用：
设置文本的行高

说明：
不允许使用负值

常用值：
          (normal)： 默认值，设置合理的行间距
          (number em)： 设置数字，此数字会与当前的字体尺寸相乘来设置行间距
          (number px)： 设置固定的行间距

详见：
行高属性详解
关于在容器中图片与文字使用该属性垂直居中对齐的问题

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #lsSpan1 {
            line-height: 16px;
            border: 1px solid;
        }

        #lsSpan2 {
            line-height: 2em;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <p id="lsSpan1">Hello World</p><br>
    <p id="lsSpan2">Hello World</p><br>
</body>
</html>

text-decoration:

作用：
规定添加到文本的修饰，下划线、上划线、删除线等

说明：
该属性有以下三种简写 text-decoration-line，text-decoration-color，text-decoration-style

简单写法：
text-decoration: line style color;

常用值：
          (none)： 默认，定义标准的文本，常用于去除超链接自带的下划线
          (underline)： 定义文本下的一条线
          (overline)： 定义文本上的一条线
          (line-through)： 定义穿过文本的一条线

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #lsSpan1 {
            text-decoration: none;
            text-decoration-line: overline;
        }

        #lsSpan2 {
            text-decoration: underline;
            text-decoration-color: pink;
        }
        
        #lsSpan3 {
            text-decoration: overline;
            text-decoration-style: wavy;
        }
        
        #lsSpan4 {
            text-decoration: line-through;
        }

        #lsSpan5 {
            text-decoration: overline wavy palevioletred;
        }
    </style>
</head>
<body>
    <a id="lsSpan1">这是超链接</a><br>
    <p id="lsSpan2">Hello World</p><br>
    <p id="lsSpan3">Hello World</p><br>
    <p id="lsSpan4">Hello World</p><br>
    <p id="lsSpan5">Hello World</p><br>
</body>
</html>

text-indent:

作用：
属性规定文本块中首行文本的缩进

说明：
可以为负值，如果值是负数，将第一行左缩进

常用值：
(number em)： 定义固定的缩进，默认值：0。一个1代表中文的一个汉字
(number px)： 定义固定的缩进值

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #lsSpan1 {
            border: 1px solid;
            text-indent: 2em;
        }
        
        #lsSpan2 {
            border: 1px solid;
            margin-left: 20px;
            text-indent: -16px;
        }
    </style>
</head>
<body>
    <p id="lsSpan1">
        汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。
        春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。
        承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。金屋妆成娇侍夜，玉楼宴罢醉和春。姊妹弟兄皆列土，可怜光彩生门户。
        遂令天下父母心，不重生男重生女。骊宫高处入青云，仙乐风飘处处闻。缓歌慢舞凝丝竹，尽日君王看不足。渔阳鼙鼓动地来，惊破霓裳羽衣曲。
        九重城阙烟尘生，千乘万骑西南行。翠华摇摇行复止，西出都门百余里。六军不发无奈何，宛转蛾眉马前死。花钿委地无人收，翠翘金雀玉搔头。
        君王掩面救不得，回看血泪相和流。黄埃散漫风萧索，云栈萦纡登剑阁。峨嵋山下少人行，旌旗无光日色薄。蜀江水碧蜀山青，圣主朝朝暮暮情。
        行宫见月伤心色，夜雨闻铃肠断声。天旋地转回龙驭，到此踌躇不能去。马嵬坡下泥土中，不见玉颜空死处。君臣相顾尽沾衣，东望都门信马归。
        
    </p>

    <p id="lsSpan2">
        归来池苑皆依旧，太液芙蓉未央柳。芙蓉如面柳如眉，对此如何不泪垂。春风桃李花开日，秋雨梧桐叶落时。西宫南内多秋草，落叶满阶红不扫。
        梨园弟子白发新，椒房阿监青娥老。夕殿萤飞思悄然，孤灯挑尽未成眠。迟迟钟鼓初长夜，耿耿星河欲曙天。鸳鸯瓦冷霜华重，翡翠衾寒谁与共。
        悠悠生死别经年，魂魄不曾来入梦。临邛道士鸿都客，能以精诚致魂魄。为感君王辗转思，遂教方士殷勤觅。排空驭气奔如电，升天入地求之遍。
        上穷碧落下黄泉，两处茫茫皆不见。忽闻海上有仙山，山在虚无缥渺间。楼阁玲珑五云起，其中绰约多仙子。中有一人字太真，雪肤花貌参差是。
        金阙西厢叩玉扃，转教小玉报双成。闻道汉家天子使，九华帐里梦魂惊。揽衣推枕起徘徊，珠箔银屏迤逦开。云鬓半偏新睡觉，花冠不整下堂来。
        风吹仙袂飘飖举，犹似霓裳羽衣舞。玉容寂寞泪阑干，梨花一枝春带雨。含情凝睇谢君王，一别音容两渺茫。昭阳殿里恩爱绝，蓬莱宫中日月长。
        回头下望人寰处，不见长安见尘雾。惟将旧物表深情，钿合金钗寄将去。钗留一股合一扇，钗擘黄金合分钿。但教心似金钿坚，天上人间会相见。
        临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    </p>
</body>
</html>

text-transform:

作用：
控制文本的大小写

说明：
注意在input等可输入的表单元素中，该属性知只是改变了文本的大小写显示效果，在提交到服务器后还是大写，所以在是实际业务中需要与js配合使用

常用值：
          (uppercase)： 定义仅有大写字母
          (lowercase)： 定义仅有小写字母
          (capitalize)： 文本中的每个单词以大写字母开头

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #lsSpan1 {
            text-transform: lowercase;
        }

        #lsSpan2 {
            text-transform: capitalize;
        }
        
        #lsIn {
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <p id="lsSpan1">
        I HAVE A DREAM
    </p>
    <p id="lsSpan2">
        i have a dream
    </p>
    <hr>
    
    <input id="lsIn" type="text" />
</body>
</html>

text-shadow:

作用：
设置文本的阴影

说明：
text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来，写法：text-shadow: h-shadow v-shadow blur color;

常用值：
          (h-shadow)： 必需，水平阴影的位置 （已原像素点为原点的横坐标，数值在阴影向右时为正），允许负值
          (v-shadow)： 必需，垂直阴影的位置 （已原像素点为原点的纵坐标，数值在阴影向下时为正），允许负值
          (blur)： 可选，模糊的距离 （模糊度）
          (color)： 可选，阴影的颜色

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之text属性</title>
    
    <style type="text/css">
        #lsSpan1 {
            color: dimgray;
            text-shadow: 4px 4px 3px #483D8B;
        }
    </style>
</head>
<body>
    <p id="lsSpan1">
        I HAVE A DREAM
    </p>
</body>
</html>