什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
css如何引入
- 外部样式表(推荐)
- 通过
<link>引入css - 通过
@import引入样式，放入 css 中
- 通过
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>
- 内部样式表
- 将 CSS 放在页面的
<style>元素中。
- 将 CSS 放在页面的
<style>
h1 { background: orange; }
</style>
- 内嵌样式(不推荐)
<p style="background: orange; font-size: 24px;">CSS 很 👍<p>
css语法
selector{
property1:value;
property2:value;
....
}
选择器
属性声明 = 属性名:属性值
注释 /* */
浏览器私有属性
-
chromesafari- -weikit -
-
firefox- -moz-
-
IE- -ms-
-
opera- -o-
为了兼容不同的浏览器,我们需要用到这些私有属性
.pic{
-weikit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
属性值语法
例:
margin:[<length>|<percentage>|auto]{1,4}
基本元素 组合符号 数量符号
组合符号
- 组合符号 -
空格
-
<'font-size'><'font-family'>空格隔开的两个基本属性- 必须出现,顺序不能错
- 合法值: 12px arial
- 不合法值: 2em 或者 arial 14px
- 组合符号 -
&&
-
<length>&&<color>&&连接的基本属性- 必须出现但顺序没有关系
- 合法值:green 2px 或者 10px red
- 组合符号 -
||
-
underline||overline||line-through||bink- 至少出现一个,顺序无关
- 合法值: underline 或者 overline underline
- 组合符号 -
|
-
<color>|transparent- 只能出现一个
- 合法值 orange 或者 transparent
- 组合符号 -
[]
-
bold[thin||<length>]- 主要是分组的作用, []里可以看做一个整体,再和外面属性计算
- 合法值: bold thin 或者 bold 2em
数量符号
- 数量符号 -
无
-
<length>- 基本元素只能出现一次
- 合法值:1px
- 数量符号 -
+
-
<color-stop>[,<color-stop>]+- +加号可以出现一次或者多次
- 合法值:#fff , red或者blue, green 50%,gray
- 数量符号 -
?
-
insert?&&<color>-
?可以出现也可以不出现 - 合法值:red 或者insert blue
-
- 数量符号 -
{}
-
<length>{2,4}- 最少出现几次,最多出现几次,上例说最少出现2次,最多4次
- 数量符号 -
*
-
<time>[.<time>]*- *表示可以出现0次,1次或者多次
- 数量符号 -
#
-
<time>#- 出现一次或多次,中间用逗号隔开
- 合法值: 2s,4s
属性值例子
padding-top:<length>|<percentage>
padding-top:1px;
padding-top:1em 5%; (错)
border-width:[<length> |thick|medium|thin]{1,4}
border-width:2px;
border-width:2px small; (错)
box-shadow:[inset? &&[<length>{2,4}&&<dolor>?]]#|none
box-shadow:3px 3px rgb(50%,50%,50%),red 0 0 4px inset;
box-shadow:inset 2px 4px,2px blue; (错)
@规则语法
- @ 标识符 xxx;
- @ 标识符 xxx {};
