1. 文字

我们以div标签举例，来设置常见的文字样式

<div>今天天气真晴朗！</div>

div {
    /* 文字颜色是黄色的 */
    color: yellow;

    /* 文字大小为14像素 */
    font-size: 14px;

    /* 设置字体为sans-serif */
    font-family: sans-serif;

    /* 文字斜体显示，normal:文本正常显示; italic:文本斜体显示; oblique:文本倾斜显示 */
    font-style:italic;

    /* 文字加粗显示, bold:加粗; normal:正常大小； 数字值（100-900）；100对应最细的；900对应最粗的；400 等同于 normal，而 700 等同于 bold，*/
    font-weight: bold;
    font-weight: 100;

   /*字体变体*/
      font-variant: small-caps; 小型大写字母

   /* 段落首行缩进两个字的宽度 */
    text-indent: 2em;
    text-indent: 1cm;
    text-indent:-9999px;     隐藏文字

   /* 设置对齐方式，center:居中对齐; left:左对齐; right:右对齐*/
    text-align: center;

   /*规定字符间距*/
    letter-spacing: 30px;
    letter-spacing: -0.5em;

   /*规定单词间距*/
    word-spacing：20px;

   /*规定行高间距；在大多数浏览器中默认行高大约是 110% 到 120%；*/  
    line-height: 90%
    line-height: 200%

   /*文本修饰*/
      text-decoration:overline；文本上一条线
      text-decoration:line-through；穿过文本一条线
      text-decoration:underline；文本下一条线

   /*英文转换*/
    text-transform:uppercase;  大写字母
    text-transform:lowercase；小写字母
    text-transform:capitalize；首字母大写

2. 背景

div {
    /* 设置背景色为灰色 */
    background-color: gray;
    background:transparent; /*透视背景*/

    /* 设置背景图片 */
    background-image: url("logo.gif");

     /* 设置背景图片尺寸 ；第一个值设置宽度，第二个值设置高度；如果只设置一个值，则第二个值会被设置为 "auto"；cover：完全覆盖背景区域；contain：宽度和高度完全适应内容区域 */
     background-size: 80px 60px;
     background-size: 50% 50%;
     background-size: cover;
     background-size: contain;

    /* 背景图片不重复:no-repeat; 水平重复:repeat-x; 垂直重复:repeat-y; */
    background-repeat:no-repeat;

    /* 背景图片位置 top:上; left:左; right:右; bottom:底部; center:中间; */
    /* 也可以设置百分比例如 66% 33% ，第一个数是水平方向，第二个数是垂直方向*/
    /* 也可以设置像素 例如  0px 22px ，第一个数是水平方向，第二个数是垂直方向*/
    background-position:top right;
    background-position:66% 33%;
    background-position:0px 22px;


    /* 如果文档较长，那么当文档向下滚动时，背景图像会固定在文档中不滚动*/
    background-attachment:fixed;
}

3. 宽度和高度

div {
    /* 设置宽度为200像素 */
    width: 200px;
    width: 100%;

    /* 设置高度为100像素 */
    height:100px;
    height:100%;
}

4. 边框

div {
    /* 设置div的边框为1px的线条*/
    border:1px solid;

    /* 分别设置div四个边的边框 */
    border-top: 1px solid #08c;
    border-left: 1px dashed red;
    border-right: 1px solid;
    border-bottom: 1px solid red;

    border-top-color : #369 /*设置上框线top颜色*/
    border-top-width :1px /*设置上框线top宽度*/
    border-top-style : solid/*设置上框线top样式*/

}
 /*其他框线样式*/

solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/

5. 列表

/*类型*/

list-style-type:none; /*不编号*/

list-style-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/


/*位置*/

list-style-position: outside; /*凸排 (外)*/

list-style-position:inside; /*缩进(内)*/

/*图像*/
list-style-image: url(..);