1、颜色属性
<div style="color:blueviolet">ppppp</div> <div style="color:#ffee33">ppppp</div> <div style="color:rgb(255,0,0)">ppppp</div> <div style="color:rgba(255,0,0,0.5)">ppppp</div><!--最后一个为透明度0<=a<=1-->2 、字体属性
font-size: 20px/50%/larger font-family:'Lucida Bright' font-weight: lighter/bold/border/ <h1 style="font-style: oblique">老男孩</h1>
3 、背景属性
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')"> 注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
background-color: antiquewhite;
}
body{
width: 100px;
height: 600px;
background-color: deeppink;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display: inline-block;
width: 18px;
height: 20px;
background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
background-position: 0 -100px;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
4、文本属性
font-size: 10px; text-align: center; 横向排列 line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-indent: 150px; 首行缩进 letter-spacing: 10px; word-spacing: 20px; text-transform: capitalize;
5、边框属性
border-style: solid; border-color: chartreuse; border-width: 20px; 简写：border: 30px rebeccapurple solid;
6、列表属性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; <br> list-style: circle;
list-style: upper-alpha;
list-style: disc; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*背景background*/
.p0{
/*简写无顺序*/
width: 1000px;
height: 1000px;
background: bisque no-repeat center center url("//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg");
background-repeat:no-repeat ;/*平铺*/
background-position:center center;
background-img:url('//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg');
}
/*文本text*/
div.p1{
height: 100px;
background-color: aquamarine;
text-align: center;/*横向居中*/
line-height: 100px; /*文本行高，通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比*/
text-indent: 100px;/*首行缩进*/
letter-spacing: 10px;/*字母间隙*/
word-spacing: 10px;/*单词间隙*/
text-transform: capitalize; /*首字母大写*/
}
/*边界border*/
.p2{
width: 100px;
height: 100px;
/*简写无顺序*/
border: 2px aqua dashed;
border-width:2px;
border-color: aqua;
border-style: dashed;
}
/*列表*/
ol,ul{
list-style: circle;
}
</style>
</head>
<body>
<div class="p0">hello world</div>
<div class="p1">hello world hello world hello world hello world hello world </div>
<p class="p2"></p>
<ol>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ol>
<ul>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</body>
</html>
7、dispaly属性
none block inline
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nor,p,span,a{
width: 100px;
height: 100px;
}
p{
display: inline-block;
background: aqua;
}
.nor{
display: inline-block;
background: bisque;
}
span{
display: inline-block;
background: aquamarine;
}
a{
display: inline-block;
background: cadetblue;
}
.fit{
word-spacing: -5px;/*消除间隙*/
}
</style>
</head>
<body>
<h3>内联标签是不能设置长度和宽度的，使用display可以设置为block就可以有块级标签的性质<br>
同样可以把块级标签的display设置为inline就有内联标签的性质<br>
把display设置为inline-block就既可以设置长宽又不独占一行</h3>
<p>p</p>
<div class="nor">div</div>
<div class="fit">
<span>span</span>
<a>a</a>
</div>
</body>
</html>
参考：点击打开链接