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、盒子模型代码示例

            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>