web前端之html和css（1）_web代码html和css-CSDN博客

<body>
    <style>
/*意为控制名为div的元素的样式*/
        div{          
            background-color: rgb(18, 243, 232);
        }
/*意为控制名为span的元素的样式*/
        span{           
            background-color: darkgreen;
        }
    </style>
    <div>杀生丸</div>   
    <span>杀生丸</span>
</body>

其前端显示如下：

2.2，ID 选择器

<body>   
 <style>
/*意为控制名为div的元素的样式*/
        div{          
            background-color: rgb(18, 243, 232);
        }
/*意为控制名为span的元素的样式*/
        span{           
            background-color: darkgreen;
        }   
/*控制id为s的元素的样式*/
        #s{
            background-color: #66CC99;
        }
    </style>
    <div>杀生丸</div>   
    <span>杀生丸</span>
    <div id="s">杀生丸</div>
</body>

其前端显示如下：

但需要注意的是元素的 id 赋值的命名方式一般多用于 js 控制

此处补充一个小知识点：即元素的颜色设置

1）直接使用单词，例如 red，blue

background-color: darkgreen;

2）使用十六进制数表示

 background-color: #66CC99;

3）使用rgba表示

 background-color: rgb(255,0,0)
 background-color: rgba(255,0,0,0.1)

rgb 是表示一个颜色的函数，由三个参数组成，每个参数的取值范围是 [0, 255]。

rgba 是表示一个颜色的函数，由四个参数组成，第四个参数表示的透明度，其取值范围是 [0, 1]

2.3，类选择器

<body>   
 <style>
/*意为控制名为div的元素的样式*/
        div{          
            background-color: rgb(18, 243, 232);
        }
/*意为控制名为span的元素的样式*/
        span{           
            background-color: darkgreen;
        }   
/*控制id为s的元素的样式*/
        #s{
            background-color: #66CC99;
        }
/*控制class为s的元素的样式*/
        .s{
            background-color: blue;
        }
    </style>
    <div>杀生丸</div>   
    <span>杀生丸</span>
    <div id="s">杀生丸</div>
    <div class="s">杀生丸</div>
</body>

其前端显示如下：

2.4，后代选择器

<body>
    <style>
/*控制class为a里面的class为c的元素的样式*/
        .a .c{
            background-color: red;
        }
/*控制class为a的直系子元素中里面的class为c的元素的样式*/
        .a>.c{
            background-color: blue;
        }
    </style>
   <div class="a">
       <div class="c">杀生丸</div>
       <div>
           <div class="c">杀生丸</div>
       </div>       
   </div>
</body>

其前端显示如下：

3，元素的盒子模型

HTML元素可以视作为一个盒子，包含外边距、内边距和边框三部分。

<body>
    <style>
        div {
        width: 100px;
        height: 100px;
        background-color: rgb(0, 255, 200);
        /* margin：外边距（上、右、下、左） */
        margin: 10px 20px 30px 40px;
        /* padding：内边距（上、右、下、左）
        padding 会影响盒子的宽高，
        */
        padding: 10px 20px 30px 40px;
        /*
        border 边框，同样也会影响盒子的宽高，       
        设置边框的样式为实线 */       
        border-style: solid;
        /* 设置边框的宽度 */
        border-width: 4px;
        /* 设置边框的颜色 */
        border-color: rgb(0, 98, 128);
        /*
        border-style、border-width 和 border-color可以合并写成如下形式：
          border: solid 4px rgb(0, 98, 128);
        */
        }
        </style>
        <div>杀生丸</div>
        <div>杀生丸</div>
</body>

其前端显示如下：

4，元素间的关系

如果一个元素在某个元素内部，则该元素是外部元素的子元素

  <div class="a">
       <div class="b">杀生丸</div>
       <div>
           <div class="c">杀生丸</div>
       </div>       
</div>
/*在这个示例中，b是a的子元素，c是b的子元素*/

5，父相子绝

如果父元素采用相对定位即position:relative，则子元素可以在父元素内建立平面直角坐标系来进行绝对定位即position:absolute。如果父元素没有设置相对定位的话，则绝对定位参考的坐标系原点是页面的左上角。

小示例：爱心显示

<body>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(235, 48, 85);
        }
       .first{
          position: relative;
/*外边距*/
          margin: 200px auto auto auto;
/*旋转*/
          transform: rotate(45deg);
        }
        .second{
          position: absolute;
          left: -100px;
          top: 0;
          border-radius: 50%;
/*border-radius 指的是盒子内部与某两个边形成的内切圆的半径，包含 左上，右上，右下，
左下 四个半径值，对应的是四个角。如果其值全部设置为 50%，则表现为一个圆形，如果
盒子本身是正方形，则表现为正圆，如果盒子本身是长方形，则表现为椭圆。*/
        }
        .third{
          position: absolute;
          left: 0;
          top: -100px;
          border-radius: 50%;
        }

    </style>
    <div class="first">
        <div class="second"></div>
        <div class="third"></div>
    </div>    
</body>

结果显示如下：

6，CSS动画

呼吸灯：

<body>
    <style>
        span{
            display: inline-block;          
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: green;
            animation-name: g;
            animation-duration: 0.5s;
            animation-iteration-count:infinite; 
        }

        .r{           
            background-color: red;
            animation-name: r;
            animation-duration: 0.5s;
            animation-iteration-count: infinite; 
        }
           
        .y{           
            background-color: yellow;
            animation-name: y;
            animation-duration: 0.5s;
            animation-iteration-count: infinite; 
        }
        @keyframes g{
            0%{ 
               opacity: 0.1;
            }
            100%{               
                opacity: 1;}
        }
        @keyframes r{
            0%{ 
                background-color: rgba(255, 0, 0, 0.1);
            }
            100%{          
                background-color: rgba(255, 0, 0, 1);}
        }
        @keyframes y{
            0%{ 
                background-color: rgba(251, 255, 0, 0.1);
            }
            100%{               
                background-color: rgba(251, 255, 0, 1);}
        }
    </style>
    <div>
        <span></span> 绿灯：一切正常
    </div>
    <div>
        <span class="r"></span>红灯：出现异常
    </div>
    <div>
        <span class="y"></span>黄灯：出现警告
    </div>
</body>

由于插入视频过于麻烦，所以不展示结果了。

进度条

<body>
    <style>
        .box{
            width: 600px;
            height: 30px;
            border: 1px solid rgb(0, 255, 221);
        }
        .bar{
            width: 0px;
            height: 30px;
            background-color: aquamarine;
            animation-name: b;
            animation-duration: 5s;
            animation-fill-mode: forwards;
        }
        @keyframes b{
            0%{
                width: 0px;
            }
            100%{
                width: 600px;
            }
        }
    </style>
    <div class="box">
        <div class="bar"></div>
    </div>
</body>

旋转图片：

<body>
    <style>
        img{
            animation-name: im;
            animation-duration: 1s;
            animation-fill-mode: forwards;            
        }
        @keyframes im{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(180deg);
            }
        }
    </style>
    <img src="./refresh.png"/>
</body>