20180629-前端系统学习-CSS语法

一、小知识点

1. CSS是由各种规则集组成，而规则集由选择器和声明块组成。

2. 注释由/*开头，*/结尾，不能嵌套。

二、属性语法

/*上下左右都是10px*/
margin: 10px;
/*上下10px，左右15px*/
margin: 10px 15px;
/*上10px，右15px，下20px，左15px*/
margin: 10px 15px 20px;
/*上10px，右15px，下20px，左15px*/
margin: 10px 15px 20px 25px;
/*上下10px，左右居中*/
margin: 10px auto;

1. 属性名：属性名是一个标识符

2. 浏览器私有属性：对于未兼容的属性，浏览器厂商设置的私有属性。（先写私有再写标准的css3属性）

div{
-webkit-webkit: border radius 40; /*chrome,safari*/
-moz-webkit: border radius 40;/*firefox*/
-ms-webkit: border radius 40;/*IE*/
-o-webkit: border radius 40;/*opera*/
webkit: border radius 40;
}

三、属性值语法

属性值中可以出现任何token。圆括号，单双引号都要成对出现。

 

• 关键字

auto, solid, bold, ease-in……

inherit, initial（特殊关键字）

• 类型

基本类型（<length>, <percentage>, <color>……）

其他类型（<"padding-width">, <color-stop>……）

• 符号（/,）

border-radius:10px 20px 30px 40px/5px 10px 15px 20px;

font-family:"Times New Roman", Georgia, Serif;

四、属性值类型

1. 整数和实数

 

• 整数值<integer>

<integer>由一个或多个“0“到”9”的数字组成

img{z-index:1;}

• 实数值<number>

<number>既可以是一个<integer>，也可以是0个或者多个数字，后面跟着一个小数点和一个或多个数字

/*1.2倍font-size*/
p{font-size:1.2rem}

2. 长度、百分比

h1{margin: 0.5em;} /*em */
h1{margin: 0;} /*0后面的单位可选择是否携带*/

p{font-size: 10px;}
p{line-height: 120%} /*120% of 'font-size'*/

• 长度（相对和绝对）<length>

格式：<number>（有或没有小数点）后面紧跟一个标识符

• 百分比值<percentage>

格式：一个<number>后面紧跟着‘%’

3. URL、URI

 

• URI值（统一资源标识符包括URL等） 

用来指定属性值中URI的函数标记是“url()”

body{background:url(http://www.baidu.com/baidu.png);}

4. 颜色<color>

body{
    color: black;
    color: white;
    color: rgb(255, 0,0);
    color: #FF0000;
    color: #F00;
}

• 关键字（black，white等）
• RGB规范的值

5. 不支持的值、计数器.、字符串

 

五、属性值语法定义

 

1. 组合符号-&&

“与”组合符：连接各个部分，顺序随意。

 

• 合法值

text-shadow:1px 1px #ccc;

text-shadow:#ccc 1px 1px;

• 不合法值

text-shadow:#ccc;

2. 组合符号-||

“或”组合符：表示其连接的所有组成元素是可选的，次序任意，但是至少其中一个要出现。

 

• 合法值

text-decoration:#f00 solid underline;

text-decoration:#f00 solid;

• 不合法值

text-decoration:12px;

3. 组合符号-|

“互斥”组合符：表示只能出现一个值。

 

• 合法值

width:12px；

width:50%；

• 不合法值

width:12px 10%;

4. 组合符号-[]

方括号：将整个基本元素组成一个整体，用来强调组合的优先级。

 

• 合法值

text-indent:30px;

• 不合法值

text-indent:30px 20px;

5. 数量符号-无

数量符号：用来描述一个元素可以出现多少次。若不标注，则表示这个元素恰好出现一次。

 

• 合法值

width:1px;

width:10em;

• 不合法值

width:1px 2px;

6. 数量符号-*

*：表示可以出现零次、一次、多次。

 

• 合法值

background-image:url("1.jpg");

background-image:url("1.jpg"),url("2.jpg");

 

• 不合法值

background-image:12px;

7. 数量符号-？

问号：表示可选，即出现零次或一次。但是不能出现多次。

 

• 合法值

font:italic small-caps bold 18px;

font:18px;

• 不合法值

font:bold bold 18px;

8. 数量符号-{}

大括号：包含两个以都好分隔的证书A与B，表示最少出现A次，最多出现B次。

 

• 合法值

margin:1px 2px 3px 4px;

margin:1px 3px;

• 不合法值

margin：1px 2px 3px 4px 5px；

9. 数量符号-#

#：表示可以出现一次或者多次，但是其多次出现必须以逗号分隔。

 

• 合法值

font-family:helvetica,verdana;

font-family:helvetica;

• 不合法值

font-family:helvetica verdana；

六、@规则语法

 

@规则有如下：

 

@media 媒体查询

@keyframes 动画

@font-face 自定义的web字体

@import 从其他样式表导入样式规则

@charset web脚本文件中使用的字符编码

@namespace 用来定义使用在css样式表中的xml命名空间

@page 设置页面容器的版式和方向

@supports 检测是否支持某个css特性

@document 表示写在css样式表中的条件规则

 

@media示例