请问前端学习 CSS 有啥好的资料么

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 640 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近有点想整全栈开发，发现 js 学习还是比较容易上手，但是样式这个完全是盲人摸象请问各位，你们在学习前端的时候，CSS 这块是咋学的？

第 1 条附言 · 2023-02-07 16:22:04 +08:00

非常感谢各位的帮助
我先学个基础，先用各位提到的网络资源，有个大概了解了再买推荐的书系统学习
后续会回来写个学习总结😂交作业

CSS

请问

学习

盲人摸象

26 条回复 • 2023-03-02 19:34:39 +08:00

wu67

2023-02-07 15:39:02 +08:00

扫一遍大漠的图解 CSS3.
有个具体印象, 以后随用随查, 或者查 mdn 都行.

Light3

2023-02-07 15:42:11 +08:00

https://developer.mozilla.org/zh-CN/

看学什么程度了
没一点基础的话就手册看一遍
找个网页 html+css 堆一个
再搞 vue 也好是别的也好就好来了

chengxy

2023-02-07 15:44:11 +08:00

在每个分类上（布局、定位、颜色、文本、动画）常用的属性本来就不多，记不清楚可以去 MDN 查询用法。

cydysm

2023-02-07 15:45:30 +08:00 via iPhone

css 世界张鑫旭
或者看他 blog

dfkjgklfdjg

2023-02-07 15:48:21 +08:00

刷完 CSS 基础之后，多写布局就好了，搞清楚布局和定位就基本够用了。
如果想要提升的话，多刷 [CodePen]( https://codepen.io/) 和 [CSS-tricks]( https://css-tricks.com/)，CSS 是一个比较吃经验和脑洞的东西。

zackkson1991

2023-02-07 15:53:56 +08:00

我建议可以: 在你的项目中使用 tailwindCSS, 然后看人家里面对应的 CSS 用法. 然后, 熟练之.

LavaC

2023-02-07 16:00:23 +08:00

css 学到会写基础页面就行了，定义 div 的属性宽、高、颜色、边框、圆角、伪元素之类的，布局再学个浮动、绝对布局、flex 和 grid ，知道有这么回事，具体什么参数看 mdn 就好。

vivipure

2023-02-07 16:01:24 +08:00

多写，多练。
博客: css-tricks 和张鑫旭
书籍：《深入解析 CSS 》和《 CSS 世界》
基础入门的话可以看： https://web.dev/learn/css/
练习：到 dribbble 找设计稿然后用 css 大致实现。练多了就好了
这套组合拳打下来应该就够用了。

enchilada2020

2023-02-07 16:08:48 +08:00 via Android

真想好好学一遍那就搭配着 MDN 看 CSS 权威指南…刚学完 CSS 那会感觉自己可神了各种 hack 信手拈来（也没有
结果很多东西不常用全忘光了。。。现在调样式还是眉毛胡子一把抓靠好烦

corcre

2023-02-07 16:13:27 +08:00

学到会写基础页面+1, CSS 各种属性有点太多了, 反正我是记不过来, 我都是写完基础页面然后看看具体需要实现的效果再去查对应属性或者直接复制别人写好的...

retrocode

2023-02-07 16:18:52 +08:00

《 CSS 世界》主讲传统 css3 前的特性
《 CSS 新世界》主讲 css3 的新特性
工作先看《 CSS 世界》比较稳妥
学习先看《 CSS 新世界》追新特性不考虑兼容

thinkershare

2023-02-07 16:19:46 +08:00

先去学美术和设计配色，否则纯粹从技术上来说学了用处也不大。可能必须要学的只有布局，盒子模型，定位。其它动画，缓冲这些用到的时候再看看就好了。你都说要你要做全栈，注定不可能抠细节，否则 CSS 一门就会耗费你非常多精力，这个玩意要搞透彻也是很花费时间的。如果学 Style Object Model ，就更花费时间了。

allinoneok

2023-02-07 16:19:51 +08:00

这里 https://www.afterdo.com/notes/12

dk7952638

2023-02-07 16:22:00 +08:00

如果以后不想 all in 前端，直接 tailwind 吧

janwarlen

2023-02-07 16:23:52 +08:00

@thinkershare 是的，CSS 的技术和细节相当多（头皮发麻无法下手），目标定的能写基础的网页，先能够自娱自乐就行，有足够的经验和产品的想法再打算深入

LavaC

2023-02-07 16:40:53 +08:00

@LavaC 举个不恰当的对比，css 的使用体验很像选项被隐藏起来的 ps 。
比如我以前刚学的时候想给 div 加阴影，但是我不知道这个属性是什么，直接在编辑器输入阴影的单词“shadow”，编辑器就会候选一个"box-shadow"，这时候再在 mdn 看一下参数有什么，这个属性你就算学会了；字体同理，你输入一个 font ，自动候选出"font-weight"、"font-size"等属性，在你不知道某种效果该怎么加时，试试编辑器输入对应英文会很有帮助。

thinkershare

2023-02-07 17:17:53 +08:00

@janwarlen 其实只需要掌握一点，CSS 控制一个元素如何显示，所有关于显示的事情都可以交给它来处理。然后分块来处理，CSS3 是分块的，你可以一块一块的处理，按照能工作的程度去学习，我感觉最简单或者直接的是直接上 MDN ，然后发现某个 css rule 你无法完全理解透彻的时候，自己先实验(这个对于学习前端技术非常重要), 如果还是没理解就去搜索博客，如果还是不理解就去问答网站提问，最好还是不能理解的就去都 w3c 的规范文档。以前 css 大部分破事都是兼容性问题，现在其实好很多了，要感谢现在这个前端时代，Chrome 成为了 Web 事实上的标准。

amber0317

2023-02-07 17:32:20 +08:00

其实我也有这个疑问，CSS 怎么进阶呢？
自学前端，刷了一套课程，基本布局定位和简单样式都会做，能照着产品官网图抄一个差不多的出来，但经常看到别人分享的各种酷炫 CSS 效果，想学却感觉无从下手。只能硬读 MDN 吗

chenzhao0121

2023-02-07 17:36:18 +08:00 via iPhone

flex
position
grid
搜这三个关键字去学就行了。现在基本 flex 一把梭

wisetc

2023-02-07 18:17:57 +08:00

先把语法规则学会，然后抄一个网站的前端代码，比如 v2ex, 然后学学响应式布局，可以直接利用开源的 css 框架库

cheese

2023-02-07 19:07:21 +08:00

去 b 站搜各大培训机构的入门视频，了解最常用的样式，别一开始就看张鑫旭，旭哥真的大佬，但是他的博客没有做体系梳理的，不适合入门，适合遇到问题的时候去看他的解决方式

ns09005264

2023-02-07 20:20:22 +08:00

个人认为的 CSS 入门速通：块级元素和行级元素的认识； flex 布局的掌握； grid 布局的掌握； Position 属性的认识；

Leviathann

2023-02-07 20:23:52 +08:00

用 tailwind 学 css

AyaseEri

2023-02-08 13:03:20 +08:00

有个概念就够了
CSS 想精通，首先你得把 PS/Sketch 等设计工具玩转了。

uni

2023-02-08 13:26:44 +08:00

我当时是看 css 权威指南，我觉得完全 0 基础的话很值得一看

dddys

2023-03-02 19:34:39 +08:00

以下是 chatgpt 的回复
当然有很多好的资料可以学习 CSS ，以下是一些我推荐的资源：

MDN Web Docs: MDN 是一个权威的 Web 开发文档网站，提供详细的 CSS 教程和参考资料，覆盖各种 CSS 属性和技术。无论你是初学者还是高级开发者，都可以从 MDN 获得极大的帮助。

CSS Tricks: CSS Tricks 是一个知名的 CSS 教程和资源网站，提供了大量有用的 CSS 技巧和实用的 CSS 代码示例。CSS Tricks 上的文章涵盖了各种 CSS 主题，包括布局、响应式设计、动画、变换等等。

W3Schools: W3Schools 是一个非常受欢迎的 Web 开发教程网站，提供了丰富的 CSS 教程和演示示例。W3Schools 的 CSS 教程适合初学者，提供了易于理解的介绍和实例，是入门学习 CSS 的不错选择。

Codrops: Codrops 是一个聚焦于 CSS 和前端设计的网站，提供了大量有趣和实用的 CSS 技巧和效果。Codrops 上的文章通常涉及到一些高级 CSS 技术，对于有一定经验的开发者来说非常有用。

CSS Grid Garden: CSS Grid Garden 是一个互动式的 CSS 布局学习游戏，可以帮助你轻松地学习 CSS Grid 布局。这是一个非常有趣和实用的学习资源，适合初学者。

希望这些资源能够帮助你学习 CSS ，祝你学习愉快！