本文共 2096 字，大约阅读时间需要 6 分钟。

@规则

1. import

@import“路径”； 导入另一个css文件

用法 ： html中 link 一个css，在link的css中写入@import “abc.css”即可引用两个css文件。

顺序为从上到下 被引用的css 不会覆盖link的。

2.charset

@charset “UTF-8”；****（必须写到第一行）

告诉浏览器这个css文件，使用的字符编码集是UTF-8；

3.font-face（web字体）

@font-face {       font-family: "自定义名";    src: url ("字体地址");}

进入浏览器时 自动下载字体样式，

Ctrl+shift+R：强制刷新；

4.media（媒体查询）

响应式网页设计；

1. 宽度以内

@media (max-width: 700px) {    ... }

2. 与操作 电视+宽度+横屏 “and”

@media tv and (min-width: 700px) and (orientation: landscape) {    ... }

3. 或操作 “，”

@media (min-width: 700px), handheld and (orientation: landscape) {    ... }

4. 非“not”
   not 关键字应用于整个媒体查询，在媒体查询为假时返回真

.

min,max.

• height
• width

media属性用于为不同的媒介类型规定不同的样式

• screen 计算机屏幕（默认值）
• tty 电传打字机以及使用等宽字符网格的类似媒介
• tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）
• projection 放映机
• handheld 手持设备（小屏幕、有限的带宽）
• print 打印预览模式 / 打印页 braille
• 盲人用点字法反馈设备
• aural 语音合成器
• all 适合所有设备

方向（orientation）

方向指定了设备处于横屏（宽度大于宽度）模式还是竖屏（高度大于宽度）模式

值：

• landscape(横屏)
• portrait(竖屏)

动画效果

动作 transition

transition 直译为过渡，即给属性变化添加过渡效果。

.blueball {     ...  opacity: 1;  transition: opacity 1s;  /* 改变 opacity 属性，持续1秒 */}.blueball:hover {     opacity: 0.3;}

观察上下区别

注： 这里的 transition 属性其实是一个简写形式，它由四部分组成，分别是（冒号后为默认值）：

transition-property: all; /* 过渡属性 */transition-duration: 0; /* 耗时 */transition-timing-function: ease; /* 效果，默认 ease（缓入缓出） */transition-delay: 0; /* 延迟 */

2、动画 animation

transition 只能做单个动作，如果动画包含多个动作，

这个动画明显由两个动作组成：蓝变绿，绿变橙。

两个连续的线段有三个关键点，

.blueball {     ...  background-color: #0080ff; /* 蓝色 */  position: relative;  animation: forward 4s; /* 执行 forward 动画，耗时 4s */}/* 三个关键帧： 起点（蓝色），蓝变绿，终点（橙色） */@keyframes forward {     0% {   left: 0; }  50% {   left: 200px; background-color: #009a61;}  100% {   left: 400px; background-color: orange;}}

@keyframes中的百分比，代表时间尺度上的百分比 ，

animation-name: none; /* 动画名称 */animation-duration: 0; /* 耗时 */animation-timing-function: ease; /* 效果，默认缓入缓出 */animation-delay: 0; /* 延迟 */animation-iteration-count: 1; /* 循环次数 */animation-direction: normal; /* 正放 or 倒放 */

TIME