CSS基础与盒子模型详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34290202/article/details/78338955

index01.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS基础</title>
    <link href="mystyle.css" type="text/css" rel="stylesheet">
</head>
<body>
<h3>派生选择器：（li标签中strong样式需要加一个效果，而p标签中strong样式不需要）</h3>
        <p><strong>p标签</strong></p>
    <ul>
        <li><strong>li标签</strong></li>
    </ul>
<br/>
<h3>id选择器</h3>
    <p id="pid">this is a id</p>
    <div id="divid">
        This div <p>This is a div<p/> <!-- 派生选择器与id选择器同时使用-->
    </div>
<br/>
<h3>类选择器</h3>
<p class="pclass">This is a class effect  </p>
<div class="divclass">
    Hello DIV<p>P标签</p>                <!-- 派生选择器与class选择器同时使用-->
</div>
<br/>
<h2>CSS盒子模型</h2>
<h3>css盒子内边距</h3>
    <table border="1">
        <tr>
            <td >内边距未设置</td>
        </tr>
    </table>
<br/>
<table border="1">
    <tr>
        <td id="tdid">设置内边距</td>
    </tr>
</table>
<br/>
<h3>css盒子边框</h3>
<p id="bkid">CSS边框样式</p>
<p id="radiusid">圆角边框</p>
<div class="cssid">CSS阴影效果</div>
<br/>
<h3>CSS外边距</h3>
<div class="mg">外边距</div>
<h4>盒子模型实例</h4>
<div class="container">
    <div class="bd">
        <div class="pd">
            <div class="content"> 这是具体内容区域</div>
        </div>
    </div>
</div>
<img src="1.png">
<h3>盒子模型应用</h3>
<div class="top1">
    <div class="top1_container" style="text-align: center">中间</div>
</div>
<div class="body1">
    <div class="body1_img" style="text-align: center">内容</div>
    <div class="body1_content">
        <div class="body1_inform"></div>
    </div>
</div>
<div class="footing" >
    <div class="footing_content"></div>
    <div class="footing_menu"></div>
</div>
</body>
</html>

mystyle.css

/*派生选择器*/
li strong{
    color: blue;
}
strong{
    color: darkred;
}
/*id选择器*/

#pid{
    color:firebrick;
}
#divid p{
    color: #98bf21;
}

/*class选择器*/
.pclass{
    color: chartreuse;
}
.divclass p{
    color:sandybrown;
    font-size: 20px;
}
/*css盒子模型——内边距*/
#tdid{
    padding-left: 100px;
    padding-right: 50px;
    padding-top: 30px;
    padding-bottom: 70px;
}
/*CSS盒子模型——边框*/
#bkid{
    border-style: double;
    border-top-style: dashed;
    border-left-style: groove;
    border-bottom-width: 20px;
    border-color: purple;
}
/*圆角边框*/
#radiusid{
    border-radius: 10px;
    width: 200px;
    background-color: deepskyblue;
    text-align: center;
border: 2px solid blue;
}
/*css阴影效果*/
.cssid {
    background-color: #A7C942;
    width: 100px;
    height: 100px;
    text-align: center;
    box-shadow: 10px 10px 1px #ffccff ;
}
 /*css外边距*/
 .mg{
     background-color: aquamarine;
     width: 100px;
     height:100px;
     margin-top: 20px;
 }
 /*盒子模型实例*/
body{
    margin: 0; /* 此处是将盒子距离页面最左最右距离变为0*/
}
.container{
    margin: 100px;
}
.bd{
    border-style: double;
}
.pd{
    padding: 100px;
}
.content{
    background-color: maroon;
}
/*盒子模型应用*/
.top1{
    width: 100%;
    height: 50px;
    background-color: aqua;
}
.top1_container{
    width: 75%;
    height: 50px;
    margin: 0px auto;
    background-color: maroon;
    line-height: 50px;
}
.body1{
    margin: 20px auto;
    width: 75%;
    height: 1500px;
    background-color: #ffccff;
}
.body1_img{
    width: 100%;
    height: 400px;
    background-color: burlywood;
    line-height: 400px;
}
.body1_content{
    width: 100%;
    height: 1100px;
    background-color: crimson;
 }
.body1_inform{
    width: 100%;
    height: 50px;
    background-color: darkviolet;
}
.footing{
    width: 75%;
    height: 440px;
    background-color: hotpink;
    margin: 0px auto;
}
.footing_content{
    width: 100%;
    height: 370px;
    background-color: deeppink;
}
.footing_menu{
    width: 100%;
    height: 70px;
    background-color: black;
}