1、颜色属性
<div style="color:blueviolet">ppppp</div> 输入颜色英文单词
<div style="color:#ffee33">ppppp</div> 16进制颜色样式
<div style="color:rgb(255,0,0)">ppppp</div> 红绿蓝三原色按顺序
<div style="color:rgba(255,0,0,0.5)">ppppp</div> a代指透明度
2、字体属性：
font-size: 20px/50%/larger 字体大小
font-family:‘Lucida Bright‘ 字体样式
font-weight: lighter/bold/border/ 字体粗细
line-height:40px; 字体上下调到居中位置
<h1 style="font-style: oblique">老男孩</h1> 斜体
3、背景属性
margin-bottom: 2px; padding: 0px; box-sizing: border-box; color: rgb(85, 84, 84); font-size: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(251, 249, 249);"> 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。
4、文本属性
font-size: 10px;
text-align: center;横向排列
line-height: 200px;文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
p
{ width: 200px;
height: 200px;
text-align: center;
line-height: 200px; }
text-indent: 150px; 首行缩进，50%：基于父元素（weight）的百分比
letter-spacing: 10px; 字体间距
word-spacing: 20px;
direction: rtl; #右边开始
text-transform: capitalize; #字母
5 边框属性：
border-style: solid;
border-color: chartreuse;
border-width: 20px;
简写：border: 30px rebeccapurple solid;
1 <!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色--> 2 <!--第一种：线的粗细为1像素，实线、红色--> 3 <div style="border:1px solid red;height:10px" ></div> 4 <!--第二种：线的粗细为1像素，点、蓝色--> 5 <div style="border:1px dotted blue;height:10px" ></div> 6 <!--第三种：线的粗细为1像素、虚线、紫色--> 7 <div style="border:1px dashed purple;height:10px" ></div>
6 、dispaly属性
1 <!--display 为none将隐藏标签--> 2 <div style="display: none;">yusheng_liang</div> 3 <!--display 为inline会将块级别标签调为内联标签--> 4 <div style="background-color:red;display:inline">yusheng_liang</div> 5 <!--display 为block会将内联标签调为块级别标签--> 6 <a style="background-color:red;display:block">yusheng_liang</a>
7、列表属性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; #去掉前面符号
list-style: circle; #列表样式
list-style: upper-alpha; #列表样式
list-style: disc; } #列表样式
8、盒子模型
原文：https://www.cnblogs.com/june-L/p/11863564.html