CSS颜色属性
学习目标
HSL颜色
在CSS中，我们可以使用hsl属性来定义颜色效果。通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
语法：
color:hsl(色调,饱和度,亮度)
说明：
hsl属性取值如下表所示。
| 值 | 范围 |
|---|---|
| 色调 | 0-360 |
| 饱和度 | 0%-100% |
| 亮度 | 0%-100% |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: hsl(0, 100%, 50%);
}
</style>
</head>
<body>
<p>今天天气很好</p>
</body>
</html>
HSLA颜色
在CSS中，我们可以使用hsla属性来定义颜色效果。通过对色调(H)、饱和度(S)、亮度(L)、透明度（A）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
语法：
color:hsla(色调,饱和度,亮度,透明度)
说明：
hsl属性取值如下表所示。
HSLA颜色:色调(H)、饱和度(S)、亮度(L)、透明度(A)。
| 值 | 范围 |
|---|---|
| 色调 | 0-360 |
| 饱和度 | 0%-100% |
| 亮度 | 0%-100% |
| 透明度 | 0-1 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: hsla(0, 100%, 50%,0.5);
}
</style>
</head>
<body>
<p>今天天气很好</p>
</body>
</html>
RGB颜色
在CSS中，我们可以使用RGB属性来定义颜色效果。RGB颜色:红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
语法：
color:rgb(红色,绿色,蓝色)
说明：
RGB属性取值如下表所示。
| 值 | 范围 |
|---|---|
| R红色 | 0-255或0%-100% |
| G绿色 | 0-255或0%-100% |
| B蓝色 | 0-255或0%-100% |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<p>今天天气很好</p>
</body>
</html>
RGBA颜色
在CSS中，我们可以使用RGB属性来定义颜色效果。RGB颜色:红(R)、绿(G)、蓝(B)、透明度(A)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
语法：
color:rgb(红色,绿色,蓝色,透明度)
说明：
RGBA属性取值如下表所示。
| 值 | 范围 |
|---|---|
| R红色 | 0-255或0%-100% |
| G绿色 | 0-255或0%-100% |
| B蓝色 | 0-255或0%-100% |
| A透明度 | 0-1 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: rgba(255, 0, 0,0.5);
}
</style>
</head>
<body>
<p>今天天气很好</p>
</body>
</html>
十六进制颜色
十六进制色彩：其实是RGB颜色的笔筒区间表示方式。常见的十六进制表示方式#00aaff。
语法：
color:#00aaff;
说明：
十六进制颜色属性取值如下表所示。
| 值 | 范围 |
|---|---|
| R红色 | 0-9a-f |
| G绿色 | 0-9a-f |
| B蓝色 | 0-9a-f |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: #00aaff;
}
</style>
</head>
<body>
<p>今天天气很好</p>
</body>
</html>
英文单词
使用表示颜色的英文单词例如red,yellow,pink,green,blue等表示具体的颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>今天天气很好</p>
</body>
</html>
课程总结
CSS文本属性
学习目标
首行缩进
p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个 来实现首行缩进两个字的空格。但是这种方式冗余代码很多。那么有没有更好的解决方法呢？
在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。
语法：
text-indent: 像素值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p
{
font-size:14px;
text-indent:28px;
}
</style>
</head>
<body>
<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>
水平对齐
在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式。
语法：
text-align: 取值;
| 属性值 | 描述 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{
text-align:left;
}
#p2{
text-align:center;
}
#p3{
text-align:right;
}
</style>
</head>
<body>
<p id="p1"><strong>左对齐</strong>:好好学习，天天向上。</p>
<p id="p2"><strong>居中对齐</strong>:好好学习，天天向上。</p>
<p id="p3"><strong>右对齐</strong>:好好学习，天天向上。</p>
</body>
</html>
文本修饰
在CSS中，我们可以使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。
语法：
text-decoration: 取值;
| 属性值 | 描述 |
|---|---|
| none | 默认，没有装饰线（最常用） |
| underline | 下划线，超链接，自带下划线 |
| line-through | 删除线 |
| overline | 顶划线 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{
text-decoration:underline;
}
#p2{
text-decoration:line-through;
}
#p3{
text-decoration:overline;
}
</style>
</head>
<body>
<p id="p1">这是“下划线”效果</p>
<p id="p2">这是“删除线”效果</p>
<p id="p3">这是“顶划线”效果</p>
</body>
</html>
去除超链接下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a{
text-decoration:none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>
大小写
在CSS中，我们可以使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言，因为中文不存在大小写之分。
语法：
text-transform: 取值;
| 属性值 | 说明 |
|---|---|
| none | 无转换（默认值） |
| uppercase | 转换为大写 |
| lowercase | 转换为小写 |
| capitalize | 只将每个英文单词首字母转换为大写 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{
text-transform:uppercase;
}
#p2{
text-transform:lowercase;
}
#p3{
text-transform:capitalize;
}
</style>
</head>
<body>
<p id="p1">rome wasn't built in a day.</p>
<p id="p2">rome wasn't built in a day.</p>
<p id="p3">rome wasn't built in a day.</p>
</body>
</html>
行高
line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。
语法：
line-height: 像素值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{
line-height:15px;
}
#p2{
line-height:20px;
}
#p3{
line-height:25px;
}
</style>
</head>
<body>
<p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
<p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
<p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
</body>
</html>
间距
字间距
在CSS中，我们可以使用letter-spacing属性来两个字之间的距离。
语法：
letter-spacing: 像素值;
说明：
letter-spacing，从英文意思上就可以知道这是“字母间距”。注意，每一个中文汉字都被当做一个“字”，而每一个英文字母也当做一个“字”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{
letter-spacing:0px;
}
#p2{
letter-spacing:3px;
}
#p3{
letter-spacing:5px;
}
</style>
</head>
<body>
<p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>
词间距
在CSS中，我们可以使用word-spacing属性来定义两个单词之间的距离。
举例：
word-spacing: 像素值;
说明：
word-spacing，从英文意思上就可以知道这是“单词间距”。一般来说，word-spacing只针对英文单词而言。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{
word-spacing:0px;
}
#p2{
word-spacing:3px;
}
#p3{
word-spacing:5px;
}
</style>
</head>
<body>
<p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
<p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>
常用属性总结表
| 属性 | 值 | 含义 |
|---|---|---|
| text-indent | 像素 | 首行缩进 |
| text-align | left左/right右/center居中 | 文本的位置 |
| text-decoration | none无、underline下画线，line-through贯穿线 | 文本的画线 |
| line-height | 像素 | 行高 |
| color | 颜色属性 | 颜色 |
课程总结
组合选择器
学习目标
组合选择器
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和组合选择器，组合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
组合选择器的优点：
- 组合选择器可以更准确、更高效的选择目标元素（标签）。
- 组合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
- 常用的组合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。
后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */
- 元素1 和 元素2 中间用空格隔开。
- 元素1 是父级，元素2 是子级，最终选择的是元素2 。
- 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可。
- 元素1 和 元素2 可以是任意基础选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul li{
color:red;
}
</style>
</head>
<body>
<ul>
<li>像诗一样的代码</li>
<li>像诗一样的代码</li>
<li>像诗一样的代码</li>
</ul>
</body>
</html>
子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
语法：
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
- 元素1 和 元素2 中间用 大于号 隔开。
- 元素1 是父级，元素2 是子级，最终选择的是元素2 。
- 元素2 必须是亲儿子， 其孙子、重孙之类都不归他管。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div>p{
color:red;
}
</style>
</head>
<body>
<div>
<p>像诗一样的代码</p>
<p>像诗一样的代码</p>
<p>像诗一样的代码</p>
</div>
</body>
</html>
并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明，并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：
ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */
- 元素1 和 元素2 中间用逗号隔开。
- 逗号可以理解为和的意思。
- 并集选择器通常用于集体声明
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div,p{
color:red;
}
</style>
</head>
<body>
<div>
像诗一样的代码
</div>
<p>
像诗一样的代码
</p>
</body>
</html>
