1.颜色属性
color属性定义文本的颜色，有4种格式：
（1）color:green
（2）color:#ff6600 简写式：color:#f60
（3）color:rgb(255,255,255)
红（R），绿（G），蓝（B）每个取值范围都是0~255
（4）color:rgba(255,255,255,1)
RGBA是代表Red、Green、Blue和Alpha（色彩空间）透明度
代码示例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS常见属性</title>
6 <style type="text/css">
7 /*
8 p{color:red}
9
10
11 p{color:#177199}
12 p{color:#ff(红) 66(绿) 00(蓝)}
13 p{color:#f(红) 6(绿) 0(蓝)}
14 p{color:#f60}
15
16
17 p{color:rgb红(r),绿(g),蓝(b)} 0-255的取值范围
18 p{color:rgb(255,0,0)} 红色
19 p{color:rgb(0,255,0)} 蓝色
20 p{color:rgb(0,0,255)} 绿色
21
22
23 */
24 .ha{color:rgb(255,0,0,1)}
25 .hb{color:rgb(255,0,0,0.8)}
26 .hc{color:rgb(255,0,0,0.6)}
27 .hd{color:rgb(255,0,0,0.4)}
28 .he{color:rgb(255,0,0,0.2)}
29 .hf{color:rgb(255,0,0,0)}
30 </style>
31 </head>
32 <body>
33 <p>
34 <h1 class="ha">台风要来了！</h1>
35 <h1 class="hb">台风要来了！</h1>
36 <h1 class="hc">台风要来了！</h1>
37 <h1 class="hd">台风要来了！</h1>
38 <h1 class="he">台风要来了！</h1>
39 <h1 class="hf">台风要来了！</h1>
40 </p>
41 </body>
42 </html>
2.字体属性
（1）font-size字体大小
| px | 设置一个固定的值 |
| % | 父元素的百分比 |
| smaller | 比父元素更小 |
| larger | 比父元素更大 |
| inherit | 继承父元素的大小 |
（2）font-family定义字体
font-family:Microsoft YaHei,serif;
可以使用","隔开，以确保当字体不存在时直接选择下一个。
字体可以上网搜一下其英文，比如微软雅黑--Microsoft YaHei
（3）font-weight字体加粗
normal（默认值）、bold（粗）、bolder（更粗）、lighter（更细）
400=normal，而700=bold，取值必须是100-900的整百数
（4）font-style字体样式
| normal | 正常（标准） |
| italic | 斜体 |
| oblique | 倾斜 |
| inherit | 继承 |
（5）font-variant小型大写字母显示文本
| normal | 标准 |
| small-caps | 小型大写字母显示文本 |
| inherit | 继承 |
3.背景属性
（1）背景颜色 background-color
（2）背景图片 background-image
background-image:url(图片路径) background-image:none
（3）背景重复 background-repeat
| repeat | 重复平铺满 |
| repeat-x | 向x轴重复 |
| repeat-y | 向y轴重复 |
| no-repeat | 不重复 |
（4）背景位置background-position
横向(left,center,right)
纵向(top,center,bottom)
用数值表示
简写方式：
代码示例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>背景相关属性</title>
6 <style type="text/css">
7 body{
8 background:#f2f2f2 url(car.jpg) no-repeat 20px 20px
9 }
10 </style>
11 </head>
12 <body>
13
14 </body>
15 </html>
显示效果：
代码示例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>背景相关属性</title>
6 <style type="text/css">
7 div{
8 width: 600px;
9 height:400px;
10 background: #f2f2f2 url(car.jpg) no-repeat 20px 20px;
11 }
12 </style>
13 </head>
14 <body>
15 <div></div>
16 </body>
17 </html>
显示效果：
4.文本属性
（1）text-align 横向排列
值：left、center、right
（2）line-height 文本行高
| % | 基于字体大小的百分比行高 |
| 数值 | 基于像素设置固定值 |
（3）text-indent 首行缩进
| % | 父元素的百分比 |
| px | 固定值，默认0 |
| inherit | 继承 |
（4）letter-spacing 字符间距
| normal | 默认 |
| length | 设置具体的数值（可以是负值） |
| inherit | 继承 |
（5）word-spacing 单词间距
| normal | 标准间距 |
| px | 固定值 |
| inherit | 继承 |
（6）direction 文本方向
| rtl | 从左到右，默认值 |
| ltr | 从右到左 |
| inherit |
继承 |
（7）text-transform 文本大小写
| none | 默认 |
| capitalize | 每个单词首字母大写 |
| uppercase | 每个单词全部大写 |
| lowercase | 每个单词全部小写 |
| inherit | 继承 |
代码示例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>文本属性</title>
6 <style type="text/css">
7 div{
8 width: 900px;
9 height: 300px;
10 }
11 p{
12 text-align:left;
13 font-size:20px;
14 line-height: 40px;
15 text-indent: 40px;
16 letter-spacing:20px;
17 word-spacing: normal;
18 direction:ltr;
19 text-transform: capitalize;
20 }
21 </style>
22 </head>
23 <body>
24 <div>
25 <p>南京邮电大学南京邮电大学南京邮电大学南京邮电大学</p>
26 <p>nan jing you dian da xue</p>
27 </div>
28 </body>
29 </html>
5.边框属性
（1）边框风格 border-style
- border-style 统一风格（简写风格）
- 单独定义某一方向的边框样式：
| border-bottom-style | 下边框样式 |
| border-top-style | 上边框样式 |
| border-left-style | 左边框样式 |
| border-right-style | 右边框样式 |
- 边框风格样式的属性值：
| none | 无边框 |
| solid | 直线边框 |
| dashed | 虚线边框 |
| dotted | 点状边框 |
| double | 双线边框 |
| groove | 凸槽边框 |
| ridge | 垄状边框 |
| inset | inset边框 |
| outset | outset边框 |
| inherit | 继承 |
（2）边框宽度 border-width
- border-width 统一风格
- 单独风格：
| border-top-width | 上边框宽度 |
| border-bottom-width | 下边框宽度 |
| border-left-width | 左边框宽度 |
| border-right-width | 右边框宽度 |
- 边框宽度的属性值：
| thin | 细边框 |
| medium | 中等边框 |
| thick | 粗边框 |
| px | 固定值的边框 |
| inherit | 继承 |
（3）边框颜色 border-color
- border-color 统一风格
- 单独风格：
| border-top-color | 上边框颜色 |
| border-bottom-color | 下边框颜色 |
| border-left-color | 左边框颜色 |
| border-right-color | 右边框颜色 |
- 属性值：
| 颜色的名称 | red、green |
| RGB | rgb(255,255,0) |
| RGBA | rgba(255,255,0,0.1) |
| 十六进制 | #ff0、#ff0000 |
- 属性值的四种情况：
| 一个值 | border-color:(上、下、左、右); |
| 两个值 | border-color:(上下)(左右); |
| 三个值 | border-color:(上)(左、右)(下); |
| 四个值 | border-color:(上)(右)(下)(左) |
（4）简写方式
border:solid 2px #f60
代码示例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>边框属性</title>
6 <style type="text/css">
7 div{
8 width:50px;
9 height:50px;
10 float:left;
11 margin-right: 10px;
12 background-color: #f60;
13 border-width:medium;
14 border-color:rgb(0,0,255);
15 border-color:green blue yellow black;
16 }
17 .div0{
18 border-style:solid;
19 border-width: 5px;
20 }
21 .div1{
22 border-top-style: solid;
23 }
24 .div2{
25 border-bottom-style: dashed;
26 }
27 .div3{
28 border-left-style: dotted;
29 }
30 .div4{
31 border-right-style:double;
32 }
33 .div5,.div6,.div7,.div8{
34 width:80px;
35 height:30px;
36
37 border-width:20px;
38 background: none;
39 border-color: #ddd;
40
41 /*
42 border: solid 2px black
43 */
44 }
45 .div5{
46 border-style:groove;
47 }
48 .div6{
49 border-style:ridge;
50 }
51 .div7{
52 border-style:inset;
53 }
54 .div8{
55 border-style:outset;
56 }
57
58 </style>
59 </head>
60 <body>
61 <div class="div0">div0</div>
62 <div class="div1">solid</div>
63 <div class="div2">dashed</div>
64 <div class="div3">dotted</div>
65 <div class="div4">double</div>
66 <div class="div5">凸槽边框</div>
67 <div class="div6">垄状边框</div>
68 <div class="div7">inset边框</div>
69 <div class="div8">outset边框</div>
70 <div class="div9"></div>
71
72 </body>
73 </html>
6.列表属性
（1）标记的类型 list-style-type
| none | 无标记 |
| disc | 默认，标记是实心圆 |
| circle | 标记是空心圆 |
| square | 标记是实心方块 |
| decimal | 标记是数字 |
| decimal-leading-zero | 0开头的数字标记（01，02，03等） |
| lower-roman | 小写罗马数字（i，ii,iii,iv,v等） |
| upper-roman | 大写罗马数字（I,II,III,IV,V等） |
| lower-alpha | 小写英文字母（a,b,c,d,e等） |
| upper-alpha | 大写英文字母(A,B,C,D,E等) |
| lower-greek | 小写希腊字母（α，β，γ等） |
| lower-latin | 小写拉丁字母（a,b,c,d,e等） |
| upper-latin | 大写拉丁字母(A,B,C,D,E等) |
| hebrew | 传统的希伯来编号方式 |
| armenian | 传统的亚美尼亚编号方式 |
| georgian | 传统的乔治亚编号方式（an,ban,gan等） |
| cjk-ideographic | 简单的表意数字 |
| hiragana | 标记是：a,i,u,e,o,ka,ki等（日文片假名） |
| katakana | 标记是：A,I,U,E,KA,KI等（日文片假名） |
| hiragana-iroha | 标记是：i,ro,ha,ni,ho,he,to等（日文片假名） |
| katakana-iroha | 标记是：I,RO,HA,NI,HO,HE,TO等（日文片假名） |
（2）标记的位置 list-style-position
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 |
| inherit | 规定应该从父元素继承list-style-position属性的值. |
（3）设置图像列表标记 list-style-image
| URL | 图像的路径 |
| none | 默认，无图形被显示 |
| inherit | 规定应该从父元素继承list-style-image属性的值 |
（4）简写方式 list-style
list-style:circle outside url(arr.png);
代码示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>列表属性</title>
6 <style>
7 /*
8 ol{
9 list-style-type:circle
10 }
11 ul{
12 list-style-type: disc;
13 }
14
15 ul.inside{
16 list-style-position: inside
17 }
18 ul.outside{
19 list-style-position: outside
20 }
21
22 ul.gif{
23 list-style-image: url("arr.gif");
24 }
25 ul.png{
26 list-style-image: url("arr.png");
27 }
28 */
29 ul{
30 list-style:circle outside url(arr.png);
31 }
32 </style>
33 </head>
34 <body>
35 <p>无序列表无序列表无序列表无序列表无序列表</p>
36 <ul class="gif">
37 <li>无序列表</li>
38 <li>无序列表</li>
39 <li>无序列表</li>
40 <li>无序列表</li>
41 <li>无序列表
42 <ul class="png">
43 <li>无序列表</li>
44 <li>无序列表</li>
45 <li>无序列表</li>
46 <li>无序列表</li>
47 <li>无序列表</li>
48 </ul>
49 </li>
50 </ul>
51 <p>无序列表无序列表无序列表无序列表无序列表</p>
52 <ul class="outside">
53 <li>无序列表</li>
54 <li>无序列表</li>
55 <li>无序列表</li>
56 <li>无序列表</li>
57 <li>无序列表</li>
58 </ul>
59
60 <!--<ol>-->
61 <!--<li>无序列表</li>-->
62 <!--<li>无序列表</li>-->
63 <!--<li>无序列表</li>-->
64 <!--<li>无序列表</li>-->
65 <!--<li>无序列表</li>-->
66 <!--</ol>-->
67
68 </body>
69 </html>