CSS学习2
CSS外观属性
- 一、文本颜色
- 1. 英文描述
- 2. 十六进制
- 3. RGB表示法
- 二、行间距
- 三、对齐方式
- 四、首行缩进
- 五、字间距
- 六、单词间距
- 七、颜色半透明
- 八、文字阴影
一、文本颜色
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>