2016.01.25----html5之css第五天-CSDN博客

本文链接：https://blog.csdn.net/weiyumeizi/article/details/50574677

css字体

字体的使用

style.css

p{
    /*字体的大小*/
    font-size:40px;
    /*字体的风格*/
    font-family: fantasy;
}
@font-face {
    /*自定义字体*/
    font-family: myfont;
    src:url();
}
div{
    /*字体的引用*/
    font-family: myfont;
}

CSS的链接

a:link{
    /*未被访问的y颜色*/
    color: red;
    /*去掉链接下划线*/
    text-decoration: none; /*设置背景颜色*/
    background-color: lawngreen;}
a:visited{    /*已被访问的颜色*/    color: green;}a:hover{    /*鼠标位于链接的颜色*/    color: yellow;}a:active{    /*链接被点击的时刻*/    color: blue;}

CSS样式列表

style.css

ul li{
    /*更改前面标志位空心圆  circle  ,disc为实心圆，默认 */
    list-style-type: disc;
    /*为其加上图标*/
    list-style-image:url("png-1383.png" );
}
ul.ul1{
    /*往里边缘靠一些*/
    list-style-position: inside;
}
ul.ul2{
    /*往外边缘靠一些*/
    list-style-position: outside;
}

index.html

<body>
<ul class="ul1">
    <li> 苹果</li>
    <li> 苹果</li>
    <li> 苹果</li>
  </ul>
<p>看一下效果</p>
<ul class="ul2">
    <li> 苹果</li>
    <li> 苹果</li>
    <li> 苹果</li>
</ul>
</body>

CSS表格

style.css

/*#tb,tr,th,td{*/
    /*!*对外边框设置大小和颜色*!*/
    /*border: 1px solid blue;*/
    /*!*文字居中*!*/
    /*text-align: center;*/
    /*!*单元格边背景颜色*!*/
    /*background-color: aqua;*/
/*}*/
/*#tb{*/
    /*!*合并边框及大小*!*/
    /*border-collapse: collapse;*/
    /*width: 400px;*/
    /*height: 400px;*/
/*}*/
#tb{
    /*单元格设置*/
    border-collapse: collapse;
    width: 500px;
}
#tb td,#tb,th{
    /*表格中的单元格，表头设置*/
    border: 1px solid aqua;
    padding: 5px;
}
#tb th{
    /*表头设置*/
    text-align: right;
    background-color: aqua;
    color: #FFFFFF;
}
#tb tr.alt td{
    表格每一行中单元格设置
    color: black;
    background-color: aquamarine;
}

index.html

<body>
<table id="tb">
<!--<table border="1">   加边框-->
     <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr class="alt">
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr class="alt">
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
</table>
</body>

CSS轮廓

p{
    /*设置p标签轮廓的宽度，颜色，样式*/
    outline-width: 1px;
    outline-color: aqua;
    outline-style: dotted;
}

css盒子模型

CSS内边距

style.css

td{ 
    /*表格中单元格内边距就是文字离边距很远*/
    /*padding: 100px;*/
    padding-left: 100px;
    padding-top: 100px;

};

css边框

index.html

<body>
<p>css边框样式</p>
<div class="cssid">
    css阴影效果
</div>
</table>
</body>

style.css

/*p{*/
    /*!*边框的类型，边框的上部的类型*!*/
    /*border-style: dotted;*/
    /*border-top:double;*/
    /*!*!*只有上边框的宽度*!*!*/
    /*!*border-top-width:10px;*!*/
    /*!*边框的宽度*!*/
    /*border-width:10px;*/
/*}*/
p{
    /*圆角的边框*/
    border-radius: 10px;
    width: 200px;
    height:25px;
    background-color: aquamarine;
    text-align: center;
    border: 2px solid blue;
}
.cssid{
    background-color: pink;
    width: 100px;
    height: 100px;
    text-align: center;
    /*阴影的效果1是向右移动10个像素，向下移动10个像素，透明的，颜色*/
    box-shadow:10px 10px 5px chartreuse;
}

css外边距

style.css

/*.body{*/
    /*margin: 0px;*/
/*}*/
/*.mg{*/
    /*background-color: blue;*/
    /*width: 100px;*/
    /*height: 100px;*/
    /*!*距上和距左100px*!*/
    /*margin: 100px;*/
/*}*/
.body{
    margin: 0px;
}
.container{
    /*外边框*/
    margin:10px;
}
.bd{
    /*类型可以更改*/
border-style: dotted;
}
.pd{
    /*内边框*/
padding: 100px;
}
.content{
background-color: blue;
}

css盒子外边距合并

style.css

/*.body{*/
    /*margin: 0px;*/
/*}*/
/*.mg{*/
    /*background-color: blue;*/
    /*width: 100px;*/
    /*height: 100px;*/
    /*!*距上和距左100px*!*/
    /*margin: 100px;*/
/*}*/
.body{
    margin: 0px;
}
.container{
    /*外边框*/
    margin:50px;
}
.bd{
    /*类型可以更改*/
border-style: double;
}
.pd{
    /*内边框*/
padding: 10px;
}
.content{
background-color: blue;
}
.container1{
    /*外边框*/
    margin:100px;
}
.bd1{
    /*类型可以更改*/
    border-style: double;
}
.pd1{
    /*内边框*/
    padding: 10px;
}
.content1{
    background-color: blue;
}

index.html

<body>
<!--<div class="mg">-->
    <!--外边距的设计-->
<!--</div>-->
<div class="container">
    <div class="bd">
        <div class="pd">
            <div class="content">Hello</div>
        </div>
    </div>
</div>
<div class="container1">
    <div class="bd1">
        <div class="pd1">
            <div class="content1">Hello</div>
        </div>
    </div>
</div>
</body>

css盒子模型应用

index.html

 <title>盒子模型的应用</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="top">
        <div class="top_content">

        </div>
    </div>
    <div class="body">
<div class="body_img">  </div>
<div class="body_no"></div>
<div class="body_content"></div>
    </div>
<div class="footing">
    <div class="footing_content"></div>
        <div class="footing_subnav"></div>
</div>

style.css

*{
    margin: 0px;
    padding: 0px;
}
.top{
    width: 100%;
    height: 50px;
    background-color: black;
}
.top_content{
    width: 75%;
    height: 50px;
    margin: 0px auto;
    background-color: blue;
}
.body{
    margin: 20px auto;
    width: 75%;
    height: 1500px;
    background-color: pink;
}
.body_img{
    width: 100%;
    height: 400px;
    background-color: darkolivegreen;
}
.body_content{
    width: 100%;
    height: 1100px;
    background-color: blueviolet;
}
.body_no{
    width: 100%;
    height: 50px;
    background-color: aqua;
}
.footing {
    width: 75%;
    height: 400px;
    background-color: indigo;
    margin: 0px auto;
}
    .footing_content{
    width: 100%;
    height: 350px;
    background-color: darkgreen;
}
    .footing_subnav{
        width: 100%;
        height: 70px;
        background-color: black;
    }