在学习 CSS 的过程中, 了解并掌握 CSS 的语法是至关重要的, 在这里总结一下相关的语法.
一, CSS 写法:
CSS 代码
选择器 {
属性名: 属性值
}
二, 写在什么地方:
有三种方式, 分别为: 行内样式, 内部样式, 外部样式.
行内样式
直接写在 html 标签内, 写于 style 属性当中
HTML 代码
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- <div style="background:red;width:15px;height:15px;">
- </div>
- </body>
- </HTML>
内部样式
写在头部标签内, 置于 style 标签内部
HTML 代码
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style type="text/css">
- .exp{ height: 150px; width: 200px; background-color: #123456; box-shadow:
- 0 0 8px #132478; }
- </style>
- </head>
- <body>
- <div class="exp">
- </div>
- </body>
- </HTML>
外部样式
在 head 中用 link 标签引入, 置于 CSS 文件中
HTML 代码
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <link rel="stylesheet" type="text/css" href="style.css">
- </head>
- <body>
- <div class="exp">
- </div>
- </body>
- </HTML>
CSS 代码
- .exp{
- height: 30px;
- width: 20px;
- background-color: #123456;
- box-shadow: 0 0 1px #132478;
- }
三, 注释:
CSS 代码
- .exp{
- background: #123444; /* 背景色, 注释用此符号 */
- height: 90px;
- width: 80px; //CSS 中的注释不能用此符号, 和 HTML 有所不同
- }
注:
在写法上, 浏览器的私有属性放在前面, 标准属性放在后面.
私有属性需要加前缀:#####<Chrome/Safari > 加 - webkit-,<Firefox > 加 - moz-,<IE > 加 - ms-,<opera > 加 - o-.
四, 属性值语法:
- [table=100%,#eeece1,#dddddd,1,0,center]
- [tr]
- [td=1,1,33.33%]##### 基本元素 [/td]
- [td=1,1,33.33%]##### 组合符号 [/td]
- [td=1,1,33.33%]##### 数量符号 [/td]
- [/tr]
- [tr]
[td=1,1,33.33%] 关键字 [/td]
[td=1,1,33.33%] 空格 [/td]
[td=1,1,33.33%] 无 [/td]
[/tr]
[tr]
[td=1,1,33.33%] 类型 (基本类型:<length>; 其他类型:<color-stop>)[/td]
- [td=1,1,33.33%]&&[/td]
- [td=1,1,33.33%] [/td]
- [/tr]
- [tr]
[td=1,1,33.33%] 符号 [/td]
- [td=1,1,33.33%]||[/td]
- [td=1,1,33.33%]?[/td]
- [/tr]
- [tr]
- [td=1,1,33.33%]inherit,initial[/td]
- [td=1,1,33.33%]|[/td]
- [td=1,1,33.33%]{
- }[/td]
- [/tr]
- [tr]
- [td=1,1,33.33%][/td]
- [td=1,1,33.33%][][/td]
- [td=1,1,33.33%]*[/td]
- [/tr]
- [tr]
- [td=1,1,33.33%][/td]
- [td=1,1,33.33%][/td]
- [td=1,1,33.33%]#[/td]
- [/tr]
- [/table]
五, 组合符号:
1, 空格 数量与顺序必须保持一致
<'font-size'> <'font-family'>
合法值:
12px arial
不合法值:
12px 或者 arial 12px
2,&& 数量必须一致, 顺序随意
<length>&&<color>
合法值:
green 2px 或者 2em blue
不合法值:
blue 或者 5em
3,|| 必须出现一个, 顺序无关
underline||overline||linethrough||blink
合法值:
underline 或者 overline underline
4,| 只能出现一个
<color>|transparent
合法值:
123456 或者 transparent
不合法值:
#aabb33 transparent
5,[] 分组作用, 作为整体
bold [thin||<length>]
合法值:
bold thin 或者 bold 3px
七, 数量符号:
1, 无
<length> 只能出现一次
合法值:
1px 或者 10em
不合法值:
1px 3em 5px
2,+ 可以出现一次或多次
<color-stop>[,<color-stop>]+
合法值:
fff,red,yellow 或者 blue,red 50%,black
不合法值:
#123456
3,? 可出现, 也可不出现
inset?&&<color>
合法值:
inset #123445 或 #abcd33
4,{} 基本元素可以出现几次 (最少出现几次, 最多出现几次)
<length>{2,4} 最少出现两次, 最多出现四次
合法值:
1px 3em 或者 1px 3px 5em
不合法值:
3px
5, 可以出现 0 次, 1 次或者多次
<time>[,<time>]
合法值:
1s 出现 0 次
1s,5ms 出现 1 次
- 6,# 出现 1 次或多次, 中间用 "," 隔开
- <time># 相当于 <time>[,<time>]*
合法值:
2s,4s,8s
不合法值:
2s 4s
八,@规则语法:
1,@标识符 xxx;
2,@标识符 xxx{}
常用的:
@media 响应式布局
@keyframe 描述动画的中间步骤
@font-face 引入外部字体
来源: http://www.qdfuns.com/article/25950/a65b8b3a82f68aabdc56be3c3bddb792.html