前端专业名词解释——CSS相关

CSS

CSS（Cascading Style Sheets）层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。

CSS3的改进之处

这部分不完全，仅仅对重要且实用的一些功能做一个简单的介绍

1. 样式的转变添加了过渡

transition： CSS属性，过渡时长，效果曲线(默认ease)，延迟(默认0)；

2. 增加了动画效果

animation：名称，周期，运动曲线(默认ease)，延迟(默认0)，次数(默认1)，反向播放(默认normal)，暂停动画(默认running)；

3. 增加了形状转换功能

transform: 适用于2D或3D转换的元素(旋转、平移、缩放、倾斜等);
transform-origin：形状变化中心点;

4. 更多高效的选择器
   详细可去看w3c的CSS选择器参考手册

5. 增加了阴影、倒影、渐变、滤镜效果

6. 新的边框效果

border-image: 以图片为边框;
border-radius: 边框圆角;

7. 增加了背景显示区域的设置、多背景

background-clip: border-box(绘制包含border、padding、content的所有区域);
background-clip: padding-box(绘制包含adding、content的所有区域);
background-clip: content-box(绘制包含content的所有区域);

background-origin: 类似clip，origin表示从哪里开始绘制;

background-size: 设置背景大小;

8. 增加了文字换行及超出的省略号功能

word-break: normal(默认规则);
word-break: keep-all(在半角空格或连字符处换行);
word-break: normal(可在单词内换行);

text-overflow: ellipsis(超出省略号);
text-overflow: clip(超出截断);

9. 增加了rgba和hsla颜色表示方法

   • rgba相较rgb增加了透明度的设置
   • hsla(色相，饱和度，亮度，透明度)

10. 栅格化(grid)布局
    详情可查看Grid布局指南

11. 媒体查询
    可以实时判断屏幕尺寸，用于响应式

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算法设计跟大家一起分享

我们一起每天进步一点点！