"常说，要认识一个人 ①，大概了解一下背景，然后见面时打招呼讲什么语言规矩范礼 ②，她回应了，声音很好听，你会继续选择 ③ 用选择什么语气对待？而且又怎么漂亮，相信自己不会拒绝 ④ 的，来预先处理 ⑤ 好情绪，好让彼此能有一个新的开始 ⑥，给生活一个甜美的谜底吧 ⑦ "
——有心人做有心事哦，晚安EmilyChen！



（一）CSS简介

CSS（Casadaing Style Sheet）层叠样式表，她的使命是把结构和表现分离，让HTML文件变小，提高加载速度，提升用户体验。


（二）语法及其规范

【1】语法

  • 外联样式表
  • 内部样式表
  • 行内元素表<style="color:red;"

【2】规矩

  • 层叠性（样式冲突即后来居上，“长江后浪推前浪，前浪死在沙滩上”）
  • 继承性（子承父业，“龙生龙凤生凤，老鼠生的小孩会打洞”）
  • 优先级（选择器权重计算的数位之间没有进制，比如“10个a赶上一个类”的说法不存在）

地位身份
0继承、*
1元素、伪元素
10类、伪类、属性
100id
1000style=""行内
无穷!important

【3】规范

Ⅰ建议遵循以下顺序
布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

Ⅱ其他
CSS里的属性值，单引号 '  '
类命名（banner广告、拼音、敏感词会被浏览器插件过滤，不利于SEO），单词之间使用下划线'_'


（三）选择器

家族成员
单一通配符*{}

元素a {}

属性input[type="text"] {}

类.class {}

id#id {}
复合后代ol a

子代ul>li

相邻兄弟h1+p

并集div,img

伪类常见:hover、:focus


结构伪类:first-child、nth-of-type


伪元素::before、::after


（四）常用布局

【1】基本

三种

网格div

浮动float清除浮动clear父因子浮动而引起高度为0的塌陷，清除后可让父回流自动检测高度
定位position相对relative不脱标，边偏移后占原位置

绝对absolute脱标，不占原位置，子绝父相

固定fixed绝对定位的特殊，只以浏览器为父
  • float、absolute、fixed改变了display属性
  • 清除浮动有三种clear:both、clearfix:after、overflow:hidden


【2】设计

竖列、圣杯、双飞翼

（五）预处理器

less、scss、stylus、postcss



（六）CSS3新属性

六个

圆角border-radius

转换transform2D位移 translate（）三个属性均有x，y轴； 对行内标签没效果 ； 位移后不占位置

2D旋转 rotate（）单位deg，度数为正则顺时针； 转换中心点transform-origin

2D缩放 scale（）以1为默认，数字为倍数；

3D同上多了z轴， 近小远大

3D左手定则x轴：水平向右 x右是正值；


y轴：垂直向下 y下是正值；


z轴：垂直屏幕 往外是正值


transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg

3D呈现transform-styletransform-style: preserve-3d;


子元素开启立体空间，代码写给父级，但是影响的是子盒子
动画animation动画名 持续时间 运动曲线 何时开始 播放次数 是否反向 始或终状态;简写不含 animationplay-state

animation-play-state:  puased;暂停动画，经常和鼠标经过等其他配合使用

animation-direction  ： alternate想要动画走回来 ，而不是直接跳回来
过渡transition过渡属性 花费时间 运动曲线 何时开始;属性：宽度高度/背景颜色/内外边距；过渡所有的属性用all


花费时间： 0.5s


运动曲线： 默认 ease （可以省略）


谁做过渡给谁加
阴影shadow水平位置 垂直位置 模糊距离 影子大小 颜色box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);


应用于文本text-shadow、盒子box-shadow
渐变gradients

  • 因为主流浏览器暂时不支持C3部分特性，需要添加浏览器研发团队的前缀
  • 如webkit、ms、moz、o，使用：-webkit-border-radius:15px;


（七）压缩的CSS

区别

min.cssminify把原css文件压缩大小，删除不必要的空格、回车、制表符


常应用于运营生产阶段
.css
注释完整，文档可读性强


常应用于试验开发阶段