一、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代码