概念
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
引入外部字体，十页面中字体更加丰富
网友评论