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

引入方式

• 外部样式表

<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};

1. length,percentage,auto:基本元素

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

1. |：组合符号

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

1. 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;    }}