css

CSS  

一、基本选择器

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

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

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

/* 并集选择器  多个选择器之间使用,（英文半角状态）隔开
        .word,#s,span{
            color: green;
        }*/
        /*交集选择器  格式：01.标签选择器+类选择器   02.标签选择器+ID选择器
           必须是标签选择器在前
           div.word｛｝  去div标签中查找class属性值为 word的标签
           div#s{}  去div标签中查找id属性值为 s的标签
          div.word{
            color: green;
         } */
        /* 后代选择器  必须有层级关系 选择器之前使空格隔开*/
        #dv span {
            color: green;
        }
三、代码示例

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

 

#nav{
    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;
}*/

2、浮动模型  代码示例

a,#b,#c{
        height: 80px;
        120px;
        border: solid 1px pink;
        float: left;  /*左浮动*/
       /* float: right;  /!*右浮动*!/*/
    }
    #main{
        350px;
        height: 150px;
        border: solid 1px red;
        overflow: scroll;
         /*内容溢出的默认属性值
         visible:默认值  溢出部分显示
         scroll：溢出部分滚动条显示
         hidden:溢出部分隐藏
         auto:自动调整
         */

 

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

 

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

 *{  /*整个网页中的所有元素 去掉内边距和外边距*/
            padding: 0px;
            margin: 0px;
        }
        div{
            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;  /*边框的样式*/
            500px;  /*宽度*/
           /* margin-left: 100px; /!*左外边距*!/
            margin-top: 100px; /!*上外边距*!/*/
            margin:30px;    /*上 右  下  左  顺时针顺序*/
            margin:30px  50px;  /*上下 30PX   左右 50PX*/

            padding: 30px; /*上 右  下  左  顺时针顺序 内边距*/
        }
 *{  /*整个网页中的所有元素 去掉内边距和外边距*/
            padding: 0px;
            margin: 0px;
        }
        div{
            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、定位属性

<head lang="en">
    <meta charset="UTF-8">
    <title>定位属性</title>
    <style type="text/css">
        /*
           position
          01.relative:相对定位，相对于自身原来的位置
          02.absolute：绝对定位，相当于父级
          03.fixed : 固定定位    相对于浏览器
          04.static ：默认值
        */
    img{
        position: fixed;  /*固定定位*/
        left: 50px;
        top: 20px;
    }
   #a{
       position: absolute; /*绝对定位*/
       top: 20px;
       height: 50px;
       50px;
       background-color: blue;
   }
   #b{
       height: 50px;
       50px;
       background-color: deeppink;
   }
   #c{
       position: relative; /*相对定位*/
       height: 50px;
       50px;
       background-color: green;
   }
    </style>
</head>
<body>

 

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