CSS

CSS作用

层叠样式表
作用：美化页面

引用方式

• 内联样式：标签上
• 内部样式：style标签内
• 外部样式：src属性：地址 rel属性：类型

<link href="" rel="stylesheet" />

• 引用优先级：就近原则（!important 强制改变样式 (一般测试用)
  ）

选择器

• 引用优先级:特殊性原则
  id>class>标签>*
• 后代选择器：标签之间加
• • 空格：所有后代（下级标签、下下级标签...）

• • ：只选儿子（下级标签）

• 结构选择器：div:nth-child(1) 选择第一个div标签
• body>div:nth-child(3) p:nth-child(2) 选择body下第三个div下所有的第二个p标签
• 兄弟选择器：
• • + 下一个兄弟
• • ~ 所有兄弟
• 交集选择器 div.a: 既是div，class又是a
• 属性选择器
• • [href]{}:标签属性中有href属性的标签
• • [hrdf$=html] 以html结尾的 *包含 ^开头
• 伪类选择器：
• • div:nth-child 是第二个元素，并且是div
• • div:nth-of-type(2) 第二个div
• • li:last-of-type 最后一个类型为li
• • ：after伪类，添加一个空元素，清除浮动
• • .a：after{ content:"";display:block;clear:both }

属性

文本属性：

text-align: 水平位置
line-height:100px 垂直居中(和行高一致)
text-lndent: 20px 缩进
text-decoration: none 下划线
font: italic bold 20px/40px 仿宋
字体风格 粗细 大小/行高 类型

背景图片：

background：url() 120px 0px no-repeat
图片背景： 地址 坐标 不重复
background-size: 图片大小 背景渐变

盒子模型：div

margin 外边距 padding 内边距
float:left
clear:left 清除左浮动 both都清了
display：none 隐藏标签
display：block 块级元素显示
标准文档流
溢出处理（eg:图片溢出div空间）
overflow:hidden; 隐藏
visible：可见 scroll滚动条
div英文溢出：word-wrap:break-word
box-sizing:border-box 盒子大小不变，使用padding位置不变
content-box; 内容盒子 （默认）
boder-radius:10px 圆角

定位属性：position

• flxed：固定定位 自身不占，相对左上角
• relative：相对的 自身占位置，相对自身
• absolute：绝对定位 自身不占，已经定位的最近父级元素
• z-index z轴
• opacity：透明度

特殊字符：

&lt：小于 &gt：大于 &nbsp：空格
&quot：双引号 &copy：版权 hearts：红桃

锚伪类：

a标签

• a:link 访问前
• a:visited：访问后
• hover：鼠标浮动样式
• active：点击不松开

焦点

• input:focus 焦点 onblur 失去焦点

排除

• ul li:not(#a) 根据id、class、结构等排除

CSS动画

平移：transform:translate(5px,5px);
旋转：transform:rotate(20deg);
缩放：transform:scale(1.5);
CSS过度：transition:all 3s;

设置动画：@keyframes name{0%{} 100%{}}
引用动画：animation:name 3s forwards infinite alternate;
动画名 播放时间 播放后的状态 播放次数(5) 交替播放