css 入门

css
div1 div2{ div1内的div2}
div1,div2 {}

伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的。
    a:link{color:#F00} /* 没有被点击过---红色 */
    a:visited{color:#0F0} /*  已经被访问过的样式---绿色 */
    a:hover{color:#00F;} /* 鼠标经过的状态---蓝 */
    a:active{color:#FF0;} // 注意顺序

// 伪类选择器 示例
<style type="text/css" >
    table{
        background-color:#CCC;
        border-collapse:collapse; //合并表格的边框
        border:3px;
        border-spacing:20px; //设置单元格的边框与表格的边框距离
        table-layout:fixed;// table.one{table-layout:fixed} // table.two{table-layout:automatic}
    }    
    tr:hover{
        background-color:#06F;
    }
</style>


<body>
    <table border="1px" width="400px" height="300px" align="center" >
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>人品</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>98</td>
                <td>差</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>50</td>
                <td>极好</td>
            </tr>
            <tr>
                <td>综合测评</td>
                <td colspan="2">不错</td>
            </tr>
    </table>
</body>
    /*操作背景的属性 */
    body{
        /*background-color:#CCC;  设置背景颜色*/
        background-image:url(2.jpg);
        background-repeat:no-repeat;  /*  设置背图片是否要重复 */
        background-position:370px 100px; /* 设置背景图片的位置, 第一个参数是左上角的左边距, 第二个参数是左上角的上边距 */
    }    
    /* 操作文本的样式 */    
    div{
        color:#F00;
        font-size:16px;
        line-height:40px;
        letter-spacing:10px;
        text-align:center;
        text-decoration:none;
        text-transform:uppercase;
    }

@charset "utf-8";
/* CSS Document */
a{
    color:#F0F;
    text-decoration:none;
}

    /*
        div默认是没有边框
    */
    div{
        width:100px;
        height:100px;
        border-style:dotted solid double ;//solid
         /* 设置边框的样式  上 右 下 左*/
        border-color:#F00;
        border-bottom-color:#0FF;
        border-top-width:100px;
    }

盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。
盒子模型主要是用于操作内边距(padding)与外边距(margin)

css定位:
    相对定位: 相对定位是相对于元素原本的位置进行移动的
    绝对定位: 绝对定位是相对于整个页面而言
    固定定位: 固定定位是相对于整个浏览器,类似页面右下角弹出框并不会随页面滚动而消失
        position:relative/absolute/fixed
        top:200px;
        left:380px;

你可能感兴趣的:(css)