概念

cascading style sheet 成叠样式表
主要定义页面中的表现

发展史

1996 css1,1998 css2,2007 css2.1,2001 css3

引入

外部样式表

<head>
    <link rel="stylesheet" href="base.css">
</head>

用link标签引入外部样式表，href属性里写css文件地址

内部样式表

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

通过style标签引入，样式内容少时用内部样式。

内嵌样式

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

使得html与css杂合在一起不利于维护。不建议引用

语法

/*用户列表*/
.m-userlist{margin: 0 0 30px}
.m-userlist.list{position: relative;height: 93px;overflow: hidden;}
.m-userlist.list ul{margin: -13px 0 0 -13px;zoom:1;}

selector{property1:value;property2:value;}
大括号之前为选择器，大括号里面属性声明，每个属性声明用分号隔开，每个属性声明＝属性名：属性值
注释/* */

浏览器私有属性

chrome,safari
-webkit
firefox
-moz
IE
-ms-
opera
-o-
私有属性为了兼容不同浏览器书写如下

.pic{
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transrorm:rotate(-3deg);
}

把私有的属性写着前面，把标准的写着后面。

属性值语法

margin: [<length>|<percentage>|auto]{1,4}
基本元素，组和符号，数量符号

基本元素

关键字
-auto,solid,bold…
类型
基本类型（<length>,<percentage>,<color>…)
其他类型（<'padding-width'>.<color-stop>…)
符号（/,）
分割属性值
inherit,initial

组和符号－空格

<'font-size'> <'font-family'>
两个都要出现且顺序一致

合法值
－12px arial
不合法值
－2em
-arial 14px

组和符号－&&

<length>&&<color>
两个都要出现，顺序不要求

合法值
-green 2px
-1em blue
不合法值
-blue

组合符号－||

underline||overline||line-through||blink
至少出现一个顺序没有关系

合法值
-underline
-overline underline

组和符号－|

<color>|transparent
两个基本元素只能出现一个

合法值
-orange
-transparent
不合法值
-blue transparent

组和符号－[]

bold[thin||<length>]
分组作用，大括号里可以看作一个整体

合法值
-bold thin
-bold 2em

数量符号－无

<length>
基本元素只能出现一次

合法值
-1px
-10em

数量符号－＋

<color-stop>[,<color-stop>]+
出现一次或者多次

合法值
-#ff,red
-blue,green50%,gray
不合法值
-red

数量符号－？

inset?&&<color>
基本属性可以出现也可以不出现

合法值
-inset blue
-red

数量符号－{}

<length>{2,4}
基本元素可以出现几次，最少出现几次，最多出现几次

合法值
-1px 2px
-1px 2px 3px
不合法值
-1px

数量符号－*

<time>[,<time>]*

可以出现零次，一次或者多次

合法值
-1s
-1s,4ms

数量符号－#

<time>#
需要出现一次或者多次，中间需要用逗号隔开

合法值
－2s,4s
不合法值
-1ms 2ms

属性值例子

padding-top:<length>|<percentage>
合法值
-padding-top:1px
不合法值
-padding-top:1em 5%
box-shadow:[inset?&&[<length>{2,4}&&<color>?]]#|none
合法值
box-shadow:3px 3px rgb(50% 50% 50%),red 0 0 4px inset

@规则语法

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

@标识符 xxx;
@标识符 xxx {}

@规则

@media
用来做布局，设备只有符合了媒体查询条件，里面的样式才能生效
keyframes
用来描述css动画的中间步骤
font-face
引入外部字体，十页面中字体更加丰富

1.4.1css简介