1 CSS简介
1.1 CSS概念
Cascading Style Sheet——控制页面的样式；
1.2 CSS历史
1996:CSS1--> 1998:CSS2--> 2001:CSS3--> 2007:CSS2.1
注：CSS3并不是一个独立的版本，而是一个一个的模块儿；
1.3 CSS引入方式
样式表
- 外部样式表
<head>
<link rel="stylesheet" href="base.css">
</head>
- 内部样式表
<head>
<style>
body{background-color:red;}
</style>
</head>
内嵌样式
<p style="color:red;margin:20px;">This is a paragraph</p>
CSS基本语法
CSS主要由选择器、属性表达式和注释构成；
selector {
property1:value;
property2:value;
}
2 CSS属性表达式
2.1 属性声明
CSS属性声明=属性名：属性值；
CSS注释：/*+属性表达式+*/;
2.2 浏览器私有属性
- 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);
transform:rotate(-3deg);
}
2.3 属性值语法
基本元素+组合符号+数量符号
margin:[<lengh>|<percentage>|auto]{1,4}
2.4 基本元素
- 关键字：
auto,solid,bold... - 类型：
- 基本类型：
<length>/<percentage>/<color>... - 其他类型：
<'pading-width'>,<color-stop>...
- 基本类型：
- 符号：
/,, inherit,initial
2.5 组合符号
- 组合符号-空格
<'font-size'> <'font-family'>- 合法值：
font:12px arial; - 不合法值：
2em/arial 14px
- 组合符号-&&
<length>&&<color>- 合法值：
gren 2px;/1em blue - 不合法值：
blue/1em
- 组合符号-||
underline||overline||line-through||blink- 合法值：
underline/overline underline
- 组合符号-|
<color>|transparent- 合法值：
orange/transparent
- 组合符号-[]
bold[thin||<length>]- 合法值：
bold thin/bold 2em/bold thin 16px?
2.6 数量符号
- 数量符号-无
<length>- 合法值：
1px/10em - 不合法值：
1px 2px
- 数量符号-+
<color-stop>[,<color-stop>]+- 合法值：
#fff,red/blue,green 50%,gray - 不合法值：
red
- 数量符号-？
inset?&&<color>- 合法值：
inset blue/red
- 数量符号-{}
<length>{2,4}- 合法值：
1px 2px/1px 2px 3px
- 数量符号-*
<time>[,<time>]*- 合法值：
1s/1s,4ms
- 数量符号-#
<time>#- 合法值：
2s,4s - 不合法值：
1ms 2ms
2.7 属性值例子
padding-top:<length>|<percentage>- 正确实例：
padding-top:1px; - 错误实例：
padding-top:1em 5%;
- 正确实例：
border-[<length>|thick|medium|thin]{1,4}- 正确实例：
border-2px; - 错误实例：
border-2px small;
- 正确实例：
box-shadow:[inset?&&[<length>{2,4}&&<color>?]]#|none- 正确实例：
box-shadow:3px 3px rgb(50%,50%,50%),red 0 0 4px inset; - 错误实例：
box-shadow:inset 2px 4px,2px blue;
- 正确实例：
@规则语法
使用规则：@标识符 XXX;/@标识符 XXX{}
@import "subs.css";
@charset "utf-8";
@media print{
body{font-size:10pt}
}
@keyframes fadein{
0%{top:0;}
50%{top:30px;}
100%{top:0;}
}
其他@标识符：@media,@keyframes,@font-face,@import,@charset,@namespace,@page,@supports,@document