CSS、CSS3、LESS、SASS、PostCSS
CSS
CSS(Cascading Style Sheets)层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。
CSS3的改进之处
这部分不完全,仅仅对重要且实用的一些功能做一个简单的介绍
- 样式的转变添加了过渡
transition: CSS属性,过渡时长,效果曲线(默认ease),延迟(默认0);
- 增加了动画效果
animation:名称,周期,运动曲线(默认ease),延迟(默认0),次数(默认1),反向播放(默认normal),暂停动画(默认running);
- 增加了形状转换功能
transform: 适用于2D或3D转换的元素(旋转、平移、缩放、倾斜等); transform-origin:形状变化中心点;
-
更多高效的选择器 详细可去看w3c的CSS选择器参考手册
-
增加了阴影、倒影、渐变、滤镜效果
- 新的边框效果
border-image: 以图片为边框; border-radius: 边框圆角;
- 增加了背景显示区域的设置、多背景
background-clip: border-box(绘制包含border、padding、content的所有区域); background-clip: padding-box(绘制包含adding、content的所有区域); background-clip: content-box(绘制包含content的所有区域);
background-origin: 类似clip,origin表示从哪里开始绘制;
background-size: 设置背景大小;
- 增加了文字换行及超出的省略号功能
word-break: normal(默认规则); word-break: keep-all(在半角空格或连字符处换行); word-break: normal(可在单词内换行);
text-overflow: ellipsis(超出省略号); text-overflow: clip(超出截断);
- 增加了rgba和hsla颜色表示方法
- rgba相较rgb增加了透明度的设置
- hsla(色相,饱和度,亮度,透明度)
-
栅格化(grid)布局 详情可查看Grid布局指南
- 媒体查询 可以实时判断屏幕尺寸,用于响应式
LESS
LESS(Leaner Style Sheets)是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性,使CSS更易维护和扩展,详情可查看less中文网
SASS
Sass(Syntactically Awesome Style Sheets)是一种CSS的预编译语言。它提供了变量、嵌套、混合、函数等功能,并且完全兼容 CSS 语法。Sass能够帮助复杂的样式表更有条理,并且易于在项目内部或跨项目共享设计,详情可查看SASS中文文档
PostCSS
PostCSS可以直观的理解为一个平台,基于这个平台可以运行一些插件,例如autoprefixer,用其可以很方便生成符合开发需求的CSS文件,详情可查看PostCSS官网
结语
欢迎热爱编程的小伙伴关注我的github博客
以及我的github仓库
里面有一些前端小技巧以及python算法设计跟大家一起分享
我们一起每天进步一点点!