CSS的常用属性

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>

参考：点击打开链接

CSS的常用属性

6、列表属性

7、dispaly属性

悦读