CSS基础知识（颜色、文本、阴影）
color:该属性用于控制文本颜色
font-family:设置文字的字体
font-size:用于设置文字的大小，后边可以直接为数字的大小
font-stretch属性用来将字体在水平方向上进行拉伸或压缩，让一种字体的字符更宽或更窄。如果水平压缩，则字体变窄，如果水平拉伸，则字体变宽；
字体依次由窄到宽：ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded、ultra-expanded；
normal :默认值。不应用拉伸变形；narrower:使用比当前设置的值导致字体宽度更小的值；
wider :使用比当前设置的值导致字体宽度更大的值。
font-weight:设置字体是否加粗，其值：lighter:更细，normal：正常，bold：加粗，bolder：更粗
text-decoration:用于决定文字是否有修饰线：none：无修饰，blink：闪烁，underline：下划线，line-through:中划线，overline：上划线
font-variant:用于设置文字的大写字母的格式
text-transform:用于设置文字的大小，capitalize：首写字母大写，uppercase：全部大写
line-height:用于设置字体的行高
letter-spacing:用于增加（值为正）或减少（值为负）字符间距；字符间隔：字母和字母之间的空白对中文有效
word-spacing:字间隔 ：单词和单词之间的间隔 对中文无效
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>font</title>
</head>
<body>
<!--该属性用于控制文本颜色-->
color:#888888:
<span style="color: #888888">哈哈哈哈</span><br/>
color:red:
<span style="color:red">哈哈哈哈</span><br/>
<!--设置文字的字体-->
font-family:'楷体_GB2312':
<span style="font-family:'楷体_GB2312'">哈哈哈哈</span><br/>
<!--font-size:用于设置文字的大小，后边可以直接为数字的大小-->
font-size:20pt:
<span style="font-size:20pt">哈哈哈哈</span><br/>
font-size:xx-large:
<span style="font-size:xx-large">哈哈哈哈</span><br/>
<!--font-stretch属性用来将字体在水平方向上进行拉伸或压缩，让一种字体的字符更宽或更窄。如果水平压缩，则字体变窄，如果水平拉伸，则字体变宽。-->
<!--字体依次由窄到宽：ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded、ultra-expanded-->
<!--normal :默认值。不应用拉伸变形
narrower:使用比当前设置的值导致字体宽度更小的值
wider :使用比当前设置的值导致字体宽度更大的值-->
font-stretch:narrower:
<span style="font-stretch:narrower">哈哈哈哈</span><br/>
<!--设置字体是否加粗，其值：lighter:更细，normal：正常，bold：加粗，bolder：更粗-->
font-weight:bold:
<span style="font-weight:bold">哈哈哈哈</span><br/>
font-weight:300:
<span style="font-weight:300">哈哈哈哈</span><br/>
<!--用于决定文字是否有修饰线：none：无修饰，blink：闪烁，underline：下划线，line-through:中划线，overline：上划线-->
text-decoration:blink:
<span style="text-decoration:blink;">哈哈哈哈</span><br/>
text-decoration:underline:
<span style="text-decoration:underline">哈哈哈哈</span><br/>
text-decoration:line-through:
<span style="text-decoration:line-through">哈哈哈哈</span><br/>
<!--用于设置文字的大写字母的格式-->
font-variant:small-caps:
<span style="font-variant:small-caps">HAHAHAHAHAhahahahaha</span><br/>
<!--用于设置文字的大小，capitalize：首写字母大写，uppercase：全部大写-->
text-transform:uppercase:
<span style="text-transform:uppercase">hahahahahaHAHAHAHAHA</span><br/>
text-transform:capitalize:
<span style="text-transform:capitalize">hahahahahaHAHAHAHAHA</span><br/>
<!--用于设置字体的行高-->
line-height:30pt:
<span style="line-height:30pt">哈哈哈哈</span><br/>
<!--用于增加（值为正）或减少（值为负）字符间距；字符间隔：字母和字母之间的空白 对中文有效-->
letter-spacing:5pt:
<span style="letter-spacing:5pt">哈哈哈哈ABC</span><br/>
letter-spacing:15pt:
<span style="letter-spacing:15pt">哈哈哈哈ABC</span><br/>
<!--字间隔 ：单词和单词之间的间隔 对中文无效-->
word-spacing:20pt:
<span style="word-spacing:20pt">hello world</span><br/>
word-spacing:60pt:
<span style="word-spacing:60pt">hello world</span><br/>
</body>
</html>
text-indent:缩进
text-align:center:居中对齐
text-align:right：居右对齐
direction:rtl：文本从右边流入
direction:ltr：文本从左边流入
white-space:nowrap: 强制不换行，知道遇到br标签
text-overflow:clip：当文字溢出时，只是简单的裁切
text-overflow:ellipsis：当文字溢出时，裁切之后显示裁切标记
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>文本相关属性设置</title>
<style type="text/css">
div{
border:1px solid #000000;
height: 30px;
width: 200px;
}
</style>
</head>
<body>
<!--缩进20pt-->
text-indent:20pt:
<div style="text-indent:20pt">哈哈哈哈</div>
<!--缩进40pt-->
text-indent:40pt:
<div style="text-indent:40pt">哈哈哈哈</div>
<!--居中对齐-->
text-align:center:
<div style="text-align:center">哈哈哈哈</div>
<!--居右对齐-->
text-align:right:
<div style="text-align:right;">哈哈哈哈</div>
<!--文本从右边流入-->
direction:rtl:
<div style="direction:rtl;">哈哈哈哈嘻嘻嘻嘻</div>
<!--文本从左边流入-->
direction:ltr:
<div style="direction:ltr;">哈哈哈哈嘻嘻嘻嘻</div>
<!--强制不换行，知道遇到br标签-->
white-space:nowrap:
<div style="white-space:nowrap;">哈哈哈哈呵呵呵呵嘻嘻嘻嘻哈哈哈哈</div>
<!--当文字溢出时，只是简单的裁切-->
text-overflow:clip:
<div style="overflow: hidden;white-space: nowrap; text-overflow:clip;">哈哈哈哈呵呵呵呵嘻嘻嘻嘻哈哈哈哈</div>
<!--当文字溢出时，裁切之后显示裁切标记-->
text-overflow:ellipsis:
<div style="overflow: hidden;white-space: nowrap; text-overflow:ellipsis;">哈哈哈哈呵呵呵呵嘻嘻嘻嘻哈哈哈哈</div>
</body>
</html>
word-break:keep-all:不允许在单词中换行
word-break:break-all:允许在单词中换行
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>文本相关属性设置</title>
<style type="text/css">
div{
border:1px solid #000000;
height: 50px;
width: 240px;
}
</style>
</head>
<body>
<!--不允许在单词中换行-->
word-break:keep-all:
<div style="word-break:keep-all">
Hello World Hi World Hello World Hello World
</div>
<!--允许在单词中换行-->
word-break:break-all:
<div style="word-break:break-all">
Hello World Hi World Hello World Hello World
</div>
</body>
</html>
background-color: rgb(255,0,255)
background-color: rgb(255,0,255,0.5);"
最后一个代表透明度，0-1：0代表完全透明，1代表完全显示
background-color: hsl(120,80%,50%)
background-color: hsla(120,80%,50%,0.5)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>color</title>
<style type="text/css">
div>div{
width: 300px;
height: 40px;
}
</style>
</head>
<body>
<script type="text/javascript">
for (var i = 0; i <110; i++) {
document.write("hahahaha");
}
</script>
<div style="position: absolute;top: 0px">
<div style="background-color: gray;">hahahaha
</div>
<div style="background-color: #aaa;">hahahaha
</div>
<div style="background-color: #ffff00;">hahahaha
</div>
<div style="background-color: rgb(255,0,255);">hahahaha
</div>
<div style="background-color: hsl(120,80%,50%);">hahahaha
</div>
<div style="background-color: rgb(255,0,255,0.5);"><!--最后一个代表透明度，0-1：0代表完全透明，1代表完全显示-->
</div>
<div style="background-color: hsla(120,80%,50%,0.5);">
</div>
</div>
</body>
</html>
text-shadow：设置文本的阴影
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>阴影</title>
<style type="text/css">
span{
display: block;
padding: 8px;
font-size: xx-large;
}
</style>
</head>
<body>
text-shadow:red 5px 5px 2px:
<span style="text-shadow:red 5px 5px 2px">哈哈哈哈</span><br/>
text-shadow:5px 5px 2px(省略阴影颜色）:
<span style="text-shadow:5px 5px 2px">哈哈哈哈</span><br/>
text-shadow:-5px -5px 2px gray(向左上角投影）:
<span style="text-shadow:-5px -5px 2px gray">哈哈哈哈</span><br/>
text-shadow:-5px 5px 2px gray(向左下角投影）:
<span style="text-shadow:-5px 5px 2px gray">哈哈哈哈</span><br/>
text-shadow:5px -5px 2px gray(向右上角投影）:
<span style="text-shadow:5px -5px 2px gray">哈哈哈哈</span><br/>
text-shadow:5px 5px 2px gray(向右下角投影）:
<span style="text-shadow:5px 5px 2px gray">哈哈哈哈</span><br/>
text-shadow:15px 15px 2px gray（向右下角投影、更大偏移距）:
<span style="text-shadow:15px 15px 2px gray">哈哈哈哈</span><br/>
text-shadow:5px 5px 10px gray（向右下角投影，模糊半径增加，模糊程度加深）:
<span style="text-shadow:5px 5px 10px gray">哈哈哈哈</span><br/>
</body>
</html>
