前端学记之CSS-引入方式、语法、浏览器私有属性等

最新推荐文章于 2024-10-10 20:59:20 发布

victor_wk

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量277

点赞数

分类专栏： css 文章标签：前端

本文链接：https://blog.csdn.net/victor_wk/article/details/78874826

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

引入方式

外部样式表

<link rel="stylesheet" href="../css/test.css">

内部样式表

<style>
        body{
            background-color: red;
        }
        p{
            margin-left: 20px;
        }
</style>

内嵌样式表

<p style="color: red;margin-left: 20px">this is a paragraph</p>

语法

.test{
    margin: 20px;
    background-color: red;
    height: 50px;
    line-height: normal;
}

浏览器私有属性
safari chrome: -webkit-
firefox: -mox-
ie: -ms-
opera: -o-

.pic{
    -webkit-transform-origin: 50px;
    -moz-transform-origin: 40px;
    -ms-transform-origin: 30px;
    -o-transform-origin: 20px;
    transform-origin: 10px;
}

属性值语法

margin: [<length>|<percentage>|auto]{1,4};

length,percentage,auto:基本元素

关键字：auto,solid,bold……
类型：length，percentage，auto
符号：／，
特殊关键字：inherit，initial

|：组合符号

空格：有顺序规定
&&：没有顺序
||：至少出现一个，无序
|：至传左右一个
[]:

1，4:数量符号

无
+：出现一次或多次
？：可出现可不出现
{}：可出现的区间{1，4}
*：可出现0、1、多次
#：需要出现一次或多次，多次以，号分隔

@规则语法

@import "study1.css";
@charset "UTF-8";
@media print {
    body{
        font-size: 10pt;
    }
}
@keyframes frames {
    0%{
        top: 0;
    }
    50%{
        top: 30px;
    }
    100%{
        top: 0;
    }
}