CSS 之语法与规则（Rule）

原创

样子2018 2022-05-25 09:32:23 博主文章分类：CSS ©著作权

©著作权归作者所有：来自51CTO博客作者样子2018的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、规则

Name 名称	Description 简介
!important	提升指定样式条目的应用优先权。
/comment/	CSS中的注释 /* 这里是注释内容 */
@import	指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明
@charset	在外部样式表文件内使用。指定该样式表使用的字符编码。
@media	指定样式表规则用于指定的媒体类型和条件。
@font-face	设置嵌入HTML文档的OpenType字体。
@page	设置页面容器的版式，方向，边空等。
@keyframes	指定动画名称和动画效果。

二、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语法与规则</title>
    <style>
        #sport {
            position: relative;
            width: 500px;
            height: 400px;
            border: 1px solid #ddd;
        }

        #staff {
            position: absolute;
            z-index: 3;
            bottom: 10px;
            left: 10px;
            overflow: hidden;
            width: 180px;
            height: 8px;
            border-radius: 3px;
            background: #ddd;
            line-height: 20;
            -moz-animation: staff 3s linear;
            -webkit-animation: staff 3s linear;
            -o-animation: staff 3s linear;
            -ms-animation: staff 3s linear;
            animation: staff 3s linear;
        }

        #ball {
            position: absolute;
            z-index: 3;
            bottom: 20px;
            left: 90px;
            overflow: hidden;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            box-shadow: 0 0 10px rgba(204, 102, 0, .8);
            background: #F6D66E;
            background: -moz-linear-gradient(top, #fff, #F6D66E);
            background: -webkit-linear-gradient(top, #fff, #F6D66E);
            background: -o-linear-gradient(top, #fff, #F6D66E);
            background: -ms-linear-gradient(top, #fff, #F6D66E);
            background: linear-gradient(top, #fff, #F6D66E);
            line-height: 20;
            -moz-animation: ball 3s linear;
            -webkit-animation: ball 3s linear;
            -o-animation: ball 3s linear;
            -ms-animation: ball 3s linear;
            animation: ball 3s linear;
        }

        @-moz-keyframes ball {
            0% {
                -moz-transform: translate(0, 0);
            }
            5% {
                -moz-transform: translate(-90px, -100px);
            }
            18% {
                -moz-transform: translate(0, -350px);
            }
            35% {
                -moz-transform: translate(200px, 0);
            }
            46% {
                -moz-transform: translate(380px, -160px);
            }
            60% {
                -moz-transform: translate(250px, -350px);
            }
            78% {
                -moz-transform: translate(60px, 0);
            }
            100% {
                -moz-transform: translate(0, 0);
            }
        }

        @-webkit-keyframes ball {
            0% {
                -webkit-transform: translate(0, 0);
            }
            5% {
                -webkit-transform: translate(-90px, -100px);
            }
            18% {
                -webkit-transform: translate(0, -350px);
            }
            35% {
                -webkit-transform: translate(200px, 0);
            }
            46% {
                -webkit-transform: translate(380px, -160px);
            }
            60% {
                -webkit-transform: translate(250px, -350px);
            }
            78% {
                -webkit-transform: translate(60px, 0);
            }
            100% {
                -webkit-transform: translate(0, 0);
            }
        }

        @-o-keyframes ball {
            0% {
                -o-transform: translate(0, 0);
            }
            5% {
                -o-transform: translate(-90px, -100px);
            }
            18% {
                -o-transform: translate(0, -350px);
            }
            35% {
                -o-transform: translate(200px, 0);
            }
            46% {
                -o-transform: translate(380px, -160px);
            }
            60% {
                -o-transform: translate(250px, -350px);
            }
            78% {
                -o-transform: translate(60px, 0);
            }
            100% {
                -o-transform: translate(0, 0);
            }
        }

        @-ms-keyframes ball {
            0% {
                -ms-transform: translate(0, 0);
            }
            5% {
                -ms-transform: translate(-90px, -100px);
            }
            18% {
                -ms-transform: translate(0, -350px);
            }
            35% {
                -ms-transform: translate(200px, 0);
            }
            46% {
                -ms-transform: translate(380px, -160px);
            }
            60% {
                -ms-transform: translate(250px, -350px);
            }
            78% {
                -ms-transform: translate(60px, 0);
            }
            100% {
                -ms-transform: translate(0, 0);
            }
        }

        @keyframes ball {
            0% {
                transform: translate(0, 0);
            }
            5% {
                transform: translate(-90px, -100px);
            }
            18% {
                transform: translate(0, -350px);
            }
            35% {
                transform: translate(200px, 0);
            }
            46% {
                transform: translate(380px, -160px);
            }
            60% {
                transform: translate(250px, -350px);
            }
            78% {
                transform: translate(60px, 0);
            }
            100% {
                transform: translate(0, 0);
            }
        }

        @-moz-keyframes staff {
            0% {
                -moz-transform: translate(0, 0);
            }
            6% {
                -moz-transform: translate(260px, 0);
            }
            20% {
                -moz-transform: translate(300px, 0);
            }
            30% {
                -moz-transform: translate(300px, 0);
            }
            40% {
                -moz-transform: translate(200px, 0);
            }
            65% {
                -moz-transform: translate(40px, 0);
            }
            79% {
                -moz-transform: translate(0, 0);
            }
            100% {
                -moz-transform: translate(0, 0);
            }
        }

        @-webkit-keyframes staff {
            0% {
                -webkit-transform: translate(0, 0);
            }
            6% {
                -webkit-transform: translate(260px, 0);
            }
            20% {
                -webkit-transform: translate(300px, 0);
            }
            30% {
                -webkit-transform: translate(300px, 0);
            }
            40% {
                -webkit-transform: translate(200px, 0);
            }
            65% {
                -webkit-transform: translate(40px, 0);
            }
            79% {
                -webkit-transform: translate(0, 0);
            }
            100% {
                -webkit-transform: translate(0, 0);
            }
        }

        @-o-keyframes staff {
            0% {
                -o-transform: translate(0, 0);
            }
            6% {
                -o-transform: translate(260px, 0);
            }
            20% {
                -o-transform: translate(300px, 0);
            }
            30% {
                -o-transform: translate(300px, 0);
            }
            40% {
                -o-transform: translate(200px, 0);
            }
            65% {
                -o-transform: translate(40px, 0);
            }
            79% {
                -o-transform: translate(0, 0);
            }
            100% {
                -o-transform: translate(0, 0);
            }
        }

        @-ms-keyframes staff {
            0% {
                -ms-transform: translate(0, 0);
            }
            6% {
                -ms-transform: translate(260px, 0);
            }
            20% {
                -ms-transform: translate(300px, 0);
            }
            30% {
                -ms-transform: translate(300px, 0);
            }
            40% {
                -ms-transform: translate(200px, 0);
            }
            65% {
                -ms-transform: translate(40px, 0);
            }
            79% {
                -ms-transform: translate(0, 0);
            }
            100% {
                -ms-transform: translate(0, 0);
            }
        }

        @keyframes staff {
            0% {
                transform: translate(0, 0);
            }
            6% {
                transform: translate(260px, 0);
            }
            20% {
                transform: translate(300px, 0);
            }
            30% {
                transform: translate(300px, 0);
            }
            40% {
                transform: translate(200px, 0);
            }
            65% {
                transform: translate(40px, 0);
            }
            79% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(0, 0);
            }
        }
    </style>
</head>
<body>
<div id="sport">
    <span id="ball">弹球</span>
    <span id="staff">滑杆</span>
</div>
</body>
</html>