1.4.1css简介

概念

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

发展史

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

引入

• 外部样式表

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

• 内部样式表

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

• 内嵌样式

    this is a paragraph

使得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: [||auto]{1,4}
基本元素，组和符号，数量符号

基本元素

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

组和符号－空格

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

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

组和符号－&&

&&
两个都要出现，顺序不要求

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

组合符号－||

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

• 合法值
  -underline
  -overline underline

组和符号－|

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

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

组和符号－[]

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

• 合法值
  -bold thin
  -bold 2em

数量符号－无

基本元素只能出现一次

• 合法值
  -1px
  -10em

数量符号－＋

[,]+
出现一次或者多次

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

数量符号－？

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

• 合法值
  -inset blue
  -red

数量符号－{}

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

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

数量符号－*

[,]*

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

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

数量符号－#

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

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

属性值例子

• padding-top:|
• 合法值
  -padding-top:1px
• 不合法值
  -padding-top:1em 5%
• box-shadow:[inset?&&[{2,4}&&?]]#|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
  引入外部字体，十页面中字体更加丰富