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