一、color：文本颜色

color属性用于定义文本的颜色，取值有如下3种：

  • 预定义的颜色值,如red,green,blue等。
  • 十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。
  • RGB代码，如红色可以表示rgb(255,0,0)或rgb(100%,0%,0%)。

注意：如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .red {
        color: red;
    }
    li:nth-child(2) {
        color: #ff6600
    }
    #rgb {
        color: rgb(203,35,224)

    }
    </style>
</head>
<body>
    <ul>
        <li class="red">倘若那天</li>
        <li >把该说的话好好说</li>
        <li id="rgb">该执着的不执着</li>      
    </ul>
</body>
</html>

二、line-height：行间距

line-heigth属性用于设置行间距，即字符的垂直间距，一般称为行高。line-height常用的属性单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

  • 一般情况下，行距比字号大3，8像素就可以了。

三、text-align：水平对齐方式。

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

  • left：左对齐。(默认)
  • right：右对齐。
  • center：居中对齐。

四、text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性可以为不同单位的数值、em、字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。

  • 1em代表一个字的距离。

行间距、水平对齐方式、首行缩进代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> p {
            line-height: 25px;
            text-align: left;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>在Naruto的世界，忍者和忍者村是一个国家军事力量的象征。忍者村是忍者聚集的地方，一般有忍术学院和类似部队编制的忍者，
        接受各种委托任务。忍者村在国家中有很高的地位，甚至和政府对等。而五个最有力量的忍者村——木叶忍者村、雾隐忍者村、
        云隐忍者村、沙隐忍者村、岩隐忍者村分属的国家被称为“忍者五大国”，只有他们的头领可以被称为“影”，也就是所谓的“五影”
        ——火影、水影、雷影、风影、土影，是众多忍者中的最高等级。
        </p>
</body>
</html>

行间距、水平对齐方式、首行缩进效果展示：

五、letter-spacing和word-spacing：字间距和单词间距

  • letter-spacing：字间距，属性为不同单位的数值，允许使用负值，默认为normal。
  • word-spacing：单词间距，对中文字符无效。方法同letter-spacing。
  • 两者都可以对英文进行设置，但是letter-spacing定义的是字母之间的间距，而word-spacing定义的是英文单词之间的间距。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
            letter-spacing: 15px;
        }
        p {
            word-spacing: 10px;
        }
    </style>
</head>
<body>
    <div>真想给你锤死</div>
    <p>my name is faker</p>
</body>
</html>

字间距和单词间距效果：



CSS3新增属性：

六、文字半透明(alpha 透明的意思)

  • 语法格式：color：rgba(r,g,b,a) color：rgba(0,0,0,0.3)
  • 注意是rgba
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> h1 {
            color: rgba(255,0,0,0.3);
        }
    </style>
</head>
<body>
    <h1>发出男人的怒吼吧:嘤嘤嘤!</h1>
</body>
</html>

文字透明：

七、文字阴影(CSS3)

  • text-shadow：水平位置 垂直位置 模糊距离 阴影颜色；

有四个属性，前两个参数必须写，后两个可以省略。

文字阴影测试：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> h1 {
            font-size: 50px;
            text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <h1>一袋米要抗几楼?一袋米要抗七楼.</h1>
</body>
</html>