css 入门

最新推荐文章于 2024-05-24 01:00:03 发布

chulie3936

最新推荐文章于 2024-05-24 01:00:03 发布

阅读量70

点赞数

原文链接：https://my.oschina.net/k2easy/blog/544087

版权

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;

转载于:https://my.oschina.net/k2easy/blog/544087