一、CSS常用属性
1、颜色属性
（1）英文单词
<p style="color:blueviolet">独在异乡为异客</p>
（2）十六进制数
<p style="color: #ffee33;">独在异乡为异客</p>
（3）三原色
<p style="color:rgb(255,0,0)">独在异乡为异客</p>
（4）三原色+透明度。透明度为0到1,0完全透明，1完全不透明
<p style="color:rgba(255,0,0,0.6)">独在异乡为异客</p>
2、字体属性
（1）字体大小
①更大或更小
<p style="font-size: larger">独在异乡为异客</p><p style="font-size: smaller">独在异乡为异客</p>
②像素
<p style="font-size: 20px">独在异乡为异客</p>
③百分比
<p style="font-size: 20%">独在异乡为异客</p>
（2）字体种类
<p style="font-family:黑体">独在异乡为异客</p>
（3）字体粗细。从100到900
<p style="font-weight:900">独在异乡为异客</p>
（4）字体样式：是否倾斜等
<p style="font-style: italic">独在异乡为异客</p>
3、背景属性
（1）背景颜色 background-color:
（2）背景图片
<div class="back"></div>
这是一张200*300的图片，如果代码如下，则背景是好几张拼在一起了。
.back{ ???width:800px; ???height:600px; ???background-image: url("鱼群.jpg")}如果代码如下，则不重复拼在一起了，但此时背景也不会铺满
.back{ ???width:800px; ???height:600px; ???background-image: url("鱼群.jpg"); ???background-repeat:no-repeat;}横向铺满，纵向的话将x改为y
.back{ ???width:800px; ???height:600px; ???background-image: url("鱼群.jpg"); ???background-repeat:repeat-x;}背景位置，下面是正中央，此外还有中央靠左 0 center 第一个参数是控制左右，是到左边框的距离；第二个参数是控制上下，是到上边框的距离。 background-position:0px 20px
.back{ ???width:800px; ???height:600px; ???background-image: url("鱼群.jpg"); ???background-repeat:no-repeat; ???background-position:center center;} 想要既有内联标签的属性（在一行显示），又有块级标签的功能（设定大小） display:inline-block
例：有这样一张图片、
想使用其中的一个标签，下面是我的html代码
<span></span>
下面是我的css代码
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: 0px 100px; ???????}我得到了下面这个图标
f12检查，选中100px，由于这张图左右是不用变的，因此只按上下键，可以看到显示的图标在变，调到我想要的那个图标上，确定好数值，然后修改css代码
CSS层叠样式表--使用
原文地址：https://www.cnblogs.com/start20180703/p/10371701.html