1-如何学习CSS
CSS的用处
css也是前端最基础的知识点，是构建网页的基本元素，实现UI，先要设计对应的DOM结构，编写HTML代码和css代码实现UI效果，然后通过JavaScript来实现交互，所以学习CSS相当于是搬砖的第二步，认识砖块之后，接着和泥浆、砌墙、粉刷油漆，把砖块盖成漂亮的建筑物。CSS就是提供这些能力的特殊脚本语言。
🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡
🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡
🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡 🏡
写css是挺有趣的事情，可以用各种属性组合来实现你想要的样式，CSS提供的可能就是各种画笔和颜料，要做什么需要自己用想象力来创造。
学习方法
学习不用死记硬背，建议多动手练习，每种属性都试一试, 点击代码块右上角的"运行"就可以运行试一下，自己改改代码，跑一跑。
下面是一个我写的会动的 👀 的简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>w3cdoc</title>
<style>
body{
display: flex;
justify-content:center;
}
.container-eye{
position: absolute;
top: 0;
display: inline-block;
margin-left: -26px;
margin-bottom: 0;
margin-top: 0;
letter-spacing: -10px;
}
.eye {
position: relative;
display: inline-block;
border-radius: 50%;
width: 24px;
height: 40px;
background-color: #fff;
border: 1px solid #999;
margin: 0px;
box-shadow: inset 0px 0px 3px #999;
}
.eye:before{
content: '';
position: absolute;
bottom: 13px;
right: 10px;
width: 10px;
height: 10px;
background-color: #000000;
border-radius: 50%;
box-shadow: -1px -1px 1px 1px #514f4c, 0px 0px 1px 3px #9d5a00;
}
.eye::after {
position: absolute;
bottom: 20px;
right: 16px;
width: 3px;
height: 3px;
background-color: #ffffff;
border-radius: 50%;
content: '';
box-shadow: 0 0 4px 1px #ffffff;
}
</style>
</head>
<body>
<h1 class="container-eye">
<div class="eye"></div>
<div class="eye"></div>
</h1>
<script>
var eye = document.querySelectorAll('.eye');
document.addEventListener('mousemove', calculation);
function calculation(event) {
eye.forEach((item, index) => {
var x = item.offsetLeft + item.clientWidth / 2; // 眼睛的x坐标
var y = item.offsetTop + item.clientHeight / 2; // 眼睛的y坐标
var rad = Math.atan2(event.pageX - x, event.pageY - y); // 鼠标和眼睛的坐标距离，然后用atan2函数计算出该点与(0, 0)点之间的弧度
var rot = (rad * (180 / Math.PI) * -1) + 90 - 30; // 转换成角度
item.style.cssText = 'transform: rotate(' + rot + 'deg)';
})
}
</script>
</body>
</html>
建议整体过一遍，看一遍，写一遍
为什么是英文教程
这里我废了九牛二虎之力，真是不容易找来了CSS基础知识的英文版本，这里面的英文单词、句子都比较简单，作为合格的工程师，程序员，后面不免要查看学习英文博客、英文文档，所以这里学习基础知识的时候，大家也可以练练英文。
毕竟这些技术都是外国人发明的，有些功能点哟个英语表达的更到位，需要仔细琢磨，翻译过来可能翻译的不准确，没法精确表达某些属性或者元素的含义，特别是css和js，大家后面看到就会有体会。
最后的篇章中我增加了一些总结，基本上都是工作中遇到的问题，供大家学习参考。
安装翻译插件
安装地址：https://magicfanyi.youdao.com/#/
翻译插件可以帮你翻译，同时学学英语！