/*标签选择器   网页中所有的div标签都会具有样式
      div{
          color: pink;  声明 ：需要设置的样式
          最后一条声明的;可以省略 建议写上
      }*/

        /*类选择器  在一个页面中可以有N个 .class对应的属性值可以重复
        .word{
            color: pink;
        }*/

        /*ID选择器  在一个页面中只能有1个  #id对应的属性值不能重复 */
         #s{
             color: pink;
         }
二、复合选择器

1、*{
    margin: 0px;  /*设置网页中所有的元素  外边距为0*/
}

 

#nav{
    width: 230px;  /*最大的div宽度*/
}

 

.title{
    height: 30px;  /*div的高度*/
    line-height: 30px;/*内容的行高*/
    color: white; /*字体颜色*/
    background:red url("../image/arrow-down.gif") 210px no-repeat; /*背景*/
    cursor: move; /*控制鼠标的形状为 可移动状态*/
}

 

ul{
    background-color: #D7D7D7;  /*背景颜色*/
}
a{
    text-decoration: none;  /*去掉超链接默认的下划线*/
}
li{
    background-image: url("../image/arrow-right.gif") ; /*背景图片*/
    background-repeat: no-repeat;   /*背景图片的填充方式*/
    background-position: 173px;     /*背景图片的位置*/
    line-height: 30px;     /*内容的行高*/
    /*list-style-image: url("../image/arrow-down.gif");  设置列表的标志图片*/
   /* list-style-type: decimal-leading-zero;  设置列表的标志类型*/
   /* list-style: decimal url("../image/arrow-down.gif") ; 类型和图片同时存在  取图片*/
   list-style: none;  /*去除标记*/
}

 

/* 超链接的伪类*/
/*a:link{  未访问的链接
    color:red;
}*/
/*a:visited{ 已经访问的链接
    color:darkcyan;
}*/
a:hover{/* 鼠标悬停的链接*/
    color:red;
    text-decoration: underline;/*给超链接增加下划线*/
}
/*
a:active｛ 点或者是被选中的链接
    color:yellow;
}*/

 

div{
            border: dashed 2px red;  /*边框的样式*/
            width: 500px;  /*宽度*/
           /* margin-left: 100px; /!*左外边距*!/
            margin-top: 100px; /!*上外边距*!/*/
            margin:30px;    /*上 右  下  左  顺时针顺序*/
            margin:30px  50px;  /*上下 30PX   左右 50PX*/

 

            padding: 30px; /*上 右  下  左  顺时针顺序 内边距*/
        }

 *{  /*整个网页中的所有元素 去掉内边距和外边距*/
            padding: 0px;
            margin: 0px;
        }
        div{
            width: 300px;
            border: solid 1px  #3a6587;  /*盒子的边框样式*/
            margin: auto;   /*水平居中*/
        }
        h2{
            padding-left: 20px;  /*左外边距*/
            line-height: 50px;   /*行高*/
            height: 50px;        /*高度*/
            color: white;        /*字体颜色*/
            background-color:cornflowerblue ; /*背景颜色*/
        }
        form{
            padding: 30px 20px; /*上下边距30px  左右边距20px*/
        }
        td{
            text-align: right; /*文本对齐方式*/
        }
3、盒子模型  代码示例

 div{
            border: dashed 2px red;  /*边框的样式*/
            width: 500px;  /*宽度*/
           /* margin-left: 100px; /!*左外边距*!/
            margin-top: 100px; /!*上外边距*!/*/
            margin:30px;    /*上 右  下  左  顺时针顺序*/
            margin:30px  50px;  /*上下 30PX   左右 50PX*/

            padding: 30px; /*上 右  下  左  顺时针顺序 内边距*/
        }
 *{  /*整个网页中的所有元素 去掉内边距和外边距*/
            padding: 0px;
            margin: 0px;
        }
        div{
            width: 300px;
            border: solid 1px  #3a6587;  /*盒子的边框样式*/
            margin: auto;   /*水平居中*/
        }
        h2{
            padding-left: 20px;  /*左外边距*/
            line-height: 50px;   /*行高*/
            height: 50px;        /*高度*/
            color: white;        /*字体颜色*/
            background-color:cornflowerblue ; /*背景颜色*/
        }
        form{
            padding: 30px 20px; /*上下边距30px  左右边距20px*/
        }
        td{
            text-align: right; /*文本对齐方式*/
        }
4、定位属性

 

    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
  <img src="http://www.mamicode.com/image/cat.jpg"  width="50px" height="50px">
</body>