一、文本颜色
1. 英文描述
<html>
<head>
<title>颜色</title>
<style>
.red {
color: red; /*red green blue pink*/
}
</style>
</head>
<body>
<ol>
<li class="red"></li>
</ol>
</body>
</html>
2. 十六进制
重点记住这种!
<html>
<head>
<title>颜色</title>
<style>
.red {
color: red; /*red green blue pink*/
}
li:first-child {
color: #FF6600;
}
</style>
</head>
<body>
<ol>
<li >1</li>
<li class="red">2</li>
</ol>
</body>
</html>
3. RGB表示法
<html>
<head>
<title>颜色</title>
<style>
.red {
color: red; /*red green blue pink*/
}
li:first-child {
color: #FF6600;
}
#rgb {
color: rgb(255,0,0);
}
</style>
</head>
<body>
<ol>
<li >1</li>
<li class="red">2</li>
<li id="rgb">3</li>
</ol>
</body>
</html>
二、行间距
line-height用于设置行间距,即行高。属性单位有三种,px,相对值ex,百分比%。
<html>
<head>
<title></title>
<style>
p {
line-height: 25px;
}
</style>
</head>
<body>
<p>
########
</p>
</body>
</html>
三、对齐方式
text-align设置水平对齐方式,常见的有三种,left,center,right。
<html>
<head>
<title></title>
<style>
h3 {
text-align: center;
}
</style>
</head>
<body>
<h3>
########
</h3>
</body>
</html>
四、首行缩进
text-indent设置首行缩进,1em为一个字的宽度。
<html>
<head>
<title></title>
<style>
p {
line-height: 25px;
text-indent: 2em;
}
</style>
</head>
<body>
<p>
########
</p>
</body>
</html>
五、字间距
letter-spacing:2px;
六、单词间距
针对英文,中文无效。
word-spacing:10px;
以下的内容是CSS3新增的属性。
七、颜色半透明
color:rgb(0,0,0,a) a是alpha透明的意思,取值在0~1之间。
<html>
<head>
<title></title>
<style>
p {
color: rgb(0,0,0,0.5);
}
</style>
</head>
<body>
<p>
########
</p>
</body>
</html>
八、文字阴影
text-shadow:水平位置 垂直位置 模糊距离 颜色;
水平位置和垂直位置不可以省略,其余两个可以省略。
水平位置设置水平左右;
垂直位置设置垂直上下;
模糊距离设置阴影虚实,越大越虚;
颜色设置影子颜色。
<html>
<head>
<title></title>
<style>
p {
text-shadow: 1px 2px 3px rgb(0,0,0,0.5);
}
</style>
</head>
<body>
<p>
########
</p>
</body>
</html>