欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS文本

程序员文章站 2022-07-13 15:29:15
...

一、文本颜色

二、文本对齐方式及缩进

三、文本单词间距与大小写转换

四、文本修饰

CSS 颜色的三种表示方式：

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

RGBA 语法：

  • R：红色值。正整数 | 百分数
  • G：绿色值。正整数 | 百分数
  • B：蓝色值。正整数| 百分数
  • A：透明度。取值0~1之间（0为透明）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         li:first-child {
             color: red;/**/
         }

         li:nth-child(2) {
             color: #000; /*#ff0000 红*/  
         }

         .rgb {
             color: rgb(0%,0%,0%);
         }

         .rgba{
                color: rgba(13, 129, 71, 0.3);
         }
    </style>
</head>
<body>
    <ul>
        <li>预定义的颜色值 red green yellow </li>
        <li>十六进制</li>
        <li class="rgb">rgb代码</li>
        <li class="rgba">rgba代码</li>
    </ul>
</body>
</html>

回到顶层目录 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            line-height: 26px; /*行间距*/
            text-indent: 2em;/* 2倍的汉字宽度，首行缩进*/
        }

        h2 {
            text-align: center;     /* 居中 */
            text-align: left;       /* 左对齐 */
            text-align: right;      /* 右对齐 */
            text-align: justify;    /* 两端对齐 */
        }
    </style>    
</head>
<body>
    <h2>冯提莫</h2>
    <p>鬼马精灵冯提莫，在演唱歌曲《别找我麻烦》时，以其活力的唱腔与独特的冯式蜜娃唱腔，诠释出了梦幻的爱情物语与魅力能量。此外，她还凭借着优秀的职业态度、对音乐的热忱和探索，以及到位的演唱实力与独特的音乐个性，展现出了她身上独特的青春气质、略带气音的唱腔与具有个人辨识度的歌手特质 [1]  。</p>
    <p>冯提莫有着可爱的外表、呆萌的性格、娇小玲珑而又凹凸有致的身材，以及清纯可人的迷人气质。此外，她还是一个天真无邪、清纯甜美、天真善良、善解人意的邻家小女孩 </p>
    <p></p>
</body>
</html>

回到顶层目录 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            letter-spacing: 6px; /*字间距*/
        }
        p {
            word-spacing: 8px; /* 单词间距 针对于英文 对中文无效*/
        }

		/*针对英文*/
		p.uppercase {text-transform:uppercase;}		/*全部转换为大写字母*/
		p.lowercase {text-transform:lowercase;}		/*全部转换为小写字母*/
		p.capitalize {text-transform:capitalize;}	/*将单词的首字母转换为大写字母*/
    </style>
</head>
<body>
    <div>CSS从入门到放弃</div>
    <p>my name is 真学霸</p>

	<!-- 文本转换 -->
	<p class="uppercase">This is some text.</p>
	<p class="lowercase">This is some text.</p>
	<p class="capitalize">This is some text.</p>
</body>
</html>

回到顶层目录 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
    <style>
        .a1 {text-decoration:none;}			/*text-decoration属性主要是用来删除链接的下划线：*/

        /*也可以这样装饰文字：*/
        h1 {text-decoration:overline;}		/*线在文字上方*/
        h2 {text-decoration:line-through;}  /*线穿过文字*/
        h3 {text-decoration:underline;}     /*线在文字下方*/
    </style>
</head>

<body>
    <p>链接到: <a href="//www.runoob.com/" class="a1">runoob.com</a></p>
    <p>链接到: <a href="//www.runoob.com/" >runoob.com</a></p>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
</body>

</html

回到顶层目录

返回CSS基本语法

相关标签： CSS颜色

上一篇： 使用Java中自带类的正则的表达式进行格式匹配

下一篇： C语言带颜色的printf/fprintf打印

推荐阅读