前端CSS的演变

　　学习ECMAScript6以后涉及的知识越来越多，以前一些没有特别在意的知识点需要做归纳整理了。
　　比如CSS部分，以前我写样式使用的是CSS，现在主流的是使用Less，还有Sass、Scss、Styleplus来完成样式的编写，虽然Webpack借助额外的程序对这一部分转译为CSS语法，但是作为一个合格的前端开发者了解和掌握CSS的演变还是挺重要的，对于CSS 预处理器应该熟悉至少一种 CSS 预处理器，如 Sass、Less 等，并能使用它进行开发。
　　CSS （Cascading Style Sheets） 是一种用于描述网页的外观和布局的语言，最早是由 W3C （World Wide Web Consortium） 在 1996发布。
　　HTML负责网页内容，JavaScript负责控制网页的行为，CSS负责网页的显示，这个是不是有点类似于MVC模式？
　　CSS发布至今已经很强大了，但仍然有一些限制比如不支持变量或嵌套等，所以有了预处理器，就是为了前端开发者更灵活地书写CSS，预处理器负责将样式代码转译为CSS代码，比如耳熟能详的Less、Sass等。
　　Less是2009年由一个叫 Alexis Sellier 的人发布的， 它增加了变量和嵌套规则等额外功能。
　　Sass是2007年由 Hampton Catlin 和 Nathan Weizenbaum 发布的， 它增加了变量、嵌套、混合等功能。
　　Less和Sass是目前被广泛使用的 CSS 预处理器，使得 CSS 的编写更加简单和高效。
　　Sass的写法类似于Python，强调严格的缩进，这个我不习惯，基本上就不用了。

　　1、目前主流的CSS预处理器

　　⑴　Less（Leaner style Sheets），它是一种类似 Sass 的 CSS 预处理器，提供了变量、嵌套、混合等特性。
　　⑵　Sass（Syntacally awesome style Sheets），它是一个强大的 CSS 扩展语言，提供了变量、嵌套、混合、循环等
　　⑶　Stylus，它是一种类似 Sass 和 Less 的 CSS 预处理器，提供了变量、嵌套、混合等特性。
　　⑷　PostCSS，它是一个用于处理 CSS 的工具集，可以用来进行语法转换、代码规范检查、优化等操作。
　　⑸　CSS in JS，它是一种将 CSS 代码嵌入到 JavaScript 中的方式，常用的库有 styled-components，emotion等。

　　举例（Less）

　　上面的Less代码需要通过转译器转译为CSS代码后才能正常使用，只是简单地演示了嵌套和&的用法，如果要在网页里直接应用，需要加载编译器，我使用了less-min.js。

　　效果图：

　　在《JavaScript(2)：纯JavaScript代码生成动态表格和动态效果》 中，我是通过JavaScript来实现上面的效果的，可是纯CSS也能实现同样的效果，CSS已经很强了！

　　Less在线预览（转CSS）：https://lesscss.org/less-preview/
　　Sass在线预览（转CSS）：https://www.sass.hk/css2sass/

　　2、CSS的演变

　　CSS 被广泛应用于网页和移动应用的布局和设计中。

　　⑴　在最初的版本中，CSS 支持了基本的文本样式，如字体、颜色和对齐方式。随着版本的更新，CSS 添加了许多新的特性，如盒模型、浮动、定位和网格布局等。
　　⑵　CSS 2.0 在 1998 年发布， 添加了更复杂的布局功能，如浮动和定位，以及支持多列布局和和页面打印。

　　★、绝对定位和浮动：使用position: absolute;和float: left/right;可以让元素在页面中绝对定位或浮动。

/*绝对定位*/
#myDiv {
    position: absolute;
    left: 100px;
    top: 50px;
}

/*浮动*/
#myImg {
    float: left;
}

　　★、选择器: CSS 2.0引入了新的选择器，如后代选择器、类选择器和伪类选择器等。

/*后代选择器*/
#myList li {
    //样式规则
}

/*类选择器*/
.highlight {
    //样式规则
}

/*伪类选择器*/
a:hover {
    //样式规则
}

　　★、多列布局: CSS 2.0支持多列布局，可以使用column-count和column-width属性来设置列的数量和宽度。

#myContent {
    column-count: 2;
    column-width: 300px;
}

　　★、盒模型: CSS 2.0引入了盒模型的概念，使用width、height、padding、border和margin属性来控制元素的大小和位置。

#myBox {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 20px;
}

　　⑶　CSS 3.0 在 1999 年发布，其中包括了许多新的特性，如动画、转换、过渡和媒体查询等。

　　★、圆角: 使用border-radius属性可以给元素设置圆角。

#myDiv {
    border-radius: 10px;
}

　　★、阴影: 使用box-shadow属性可以给元素设置阴影。

#myDiv {
    box-shadow: 5px 5px 10px #888888;
}

　　★、过渡: 使用transition属性可以让元素在某些属性改变时过渡到新的值。

#myDiv {
    transition: background-color 1s ease;
}

　　★、动画: 使用animation属性可以让元素运行动画。

#myDiv {
    animation: myAnimation 2s infinite;
}

@keyframes myAnimation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

　　★、线性渐变: 使用linear-gradient属性可以给元素设置线性渐变背景。

#myDiv {
    background: linear-gradient(to right, #ff0000, #ffff00);
}

　　★、多背景: 使用background-image属性可以给元素设置多个背景图像。

#myDiv {
    background-image: url(img1.png), url(img2.png);
}

　　★、媒体查询: 使用@media规则可以根据屏幕大小和设备类型应用不同的样式。

@media screen and (min-width: 600px) {
    //样式规则
}

　　随着网页设计和开发的不断进化，CSS也在不断发展和演变。随着 CSS3 的推出， CSS 已经支持了许多新的特性，如响应式设计、动画和 3D 变换等。在后来的版本中， CSS 也添加了许多新的特性，如 flexbox 和 grid 布局，使得前端开发更加灵活和高效。
　　目前，CSS4.0还没有发布，但是它已经在开发中，已知的一些新特性可能包括但不限于：
　　新的选择器，如:matches()、:not()、:dir()等；
　　媒体查询的扩展，如:hover、:any-pointer等；
　　新的布局模型，如:Grid Layout、Flex Layout等；
　　新的文本特性，如:text-align-last、text-justify等；
　　新的背景特性，如:background-clip、background-origin等。