css css2 css3_学习CSS的最佳方法

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-06-27 05:29:12 发布 375 阅读 AI 写同款· GEO 优化 ›

css css2 css3

无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都会提供一个新的全面的学习指南来帮助您在线学习CSS。 查阅 学习CSS：完整指南 。

CSS与HTML协同工作; HTML整理了页面结构，CSS使其看起来很漂亮，并增加了微妙的交互级别。作为一名网页设计师，您应该真正掌握这两种语言。即使您自己不进行编码，了解它们的工作原理也会帮助您为Web设计。

掌握基础知识：什么是CSS？

CSS代表级联样式表 ; 包含适用于HTML（或XML，以及其他一些结构格式）的样式规则的文档。多个样式规则可以指向一个HTML元素，在这种情况下，需要一种方法来确定哪个规则应生效。术语级联描述了从通用规则向下筛选直到遇到最具体的规则的过程。然后选择该规则来执行其工作。

通过CSS，可以将表示与结构分离。它解决了在HTML中混搭样式规则的需求，如下所示：

保持文件整洁和干燥。

Web浏览器读取CSS。他们获取标记文档，然后将样式规则应用于该文档中的元素。

它们并不总是对样式规则进行相同的解释，随着浏览器的发展，对新样式建议的支持也随之增加。通常，浏览器制造商自己会尝试CSS属性，希望他们的建议会被用户采纳。

归根结底，CSS属性是否标准化取决于万维网联盟（W3C）。

掌握基础知识：学习语法

CSS语法包括一些基本部分；规则，选择器，声明，属性和值。

这个CSS规则包含我们刚才提到的所有其他位和鲍勃。

选择器指向HTML标记中的元素，然后花括号中的声明定义了应如何设置这些元素的样式。单个规则中可以有多个声明。每个声明都包含具有关联值的属性。

您可以通过多种方式从简单的类型选择器中选择HTML元素：

然后，我们有了类选择器 ，它指向所有已应用特定类的元素。看一下这个标记及其对应CSS：

注意：与您听到的相反，没有CSS类之类的东西。有针对HTML类的 CSS选择器 。您可以在tantek.com和456 Berea St.上阅读有关此内容的更多信息。

有很多可能的选择器需要学习。还有更多的属性可供使用（在W3C网站上查看此列表）。稍后，我们将研究作业，在此期间您将被要求学习大量的作业。尽可能多的指尖就能使您成为更好CSS编码器！

作业1：遵循初学者的课程

现在，您已经对CSS是什么有了基本的了解，是时候适当地学习了。在线上有许多新手课程将为您提供帮助；这里只有几对绝对值得一试：

Code Academy CSS简介是其Web基础课程的一部分。如果您热衷于参与并获得回报，那么所有Code Academy的课程都将为您带来负担。免费跟随并完成交互式测试，以获取即时反馈和建议。

如果您遵循我们的“学习HTML的最佳方法”概述，那么您将很熟悉Tuts + Premium 30天学习HTML和CSS的知识。在这门免费课程中，Jeffrey Way从绝对的入门开始带您学习HTML和CSS基础。

Code School CSS Cross Country提供与Code Academy类似的交互方式，但是要完成课程，您需要成为注册会员（当前每月25美元）。

作业2：多次进行样式设置

当Dave Shea于2003年5月推出CSS Zen Garden时，他的目的是演示可以使用不同的样式表以无限方式设置单个HTML文档的样式。对于全球设计师来说，这是一个绝妙的概念，也是一个真正的灯泡时刻。

为什么不自己做类似的事情？进行简单的标记（Chris Coyier的“ 无序列表导航”是最佳选择）：

<nav>
	<ul>
		<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
		<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
		<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
		<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
		<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
	</ul>
</nav>

只需更改样式，即可查看可以实现多少种不同的效果。

在这个Webdesigntuts +社区研讨会上，有近100位读者提交了他们的样式表，以获得一个简单的无序列表。从结果中可以看出，一点点的想象力可以使CSS发挥很大的作用！

作业3：跟随大师

如果人们知道CSS，他们会在Twitter上发布推文-这是科学事实。注意CSS名人在做什么，您将学到很多东西。您应该遵循以下几个twitters：

..和..

订阅css-weekly.com时事通讯，每周都会在您的收件箱中发送一封CSS打包的邮件。

额外

为什么不在GitHub或CodePen等社交编码网站上找到自己的英雄？像这样的网络，最好的事情是每个人互相提供的建议。如果您遇到CSS问题，那么有人会比您先遇到问题，并且愿意帮忙。

作业4：找出浏览器支持

正如我们前面提到的，浏览器并非总是平等地解释您的样式。如果您要使用Internet Explorer的较旧版本（在采用CSS方面落后于时代），则尤其如此。现代浏览器（例如Google Chrome，Mozilla Firefox，Apple Safari，Opera甚至是Internet Explorer 10 ）具有更主动的更新管理，从而降低了旧版本长时间浮动的可能性。

也就是说，这些浏览器之间的差异，无论它们是最新的是什么。一个浏览器将很好地支持某些CSS，而另一浏览器会以不同的方式对其进行解释，因此，出于此原因，建议您注意浏览器。

以下是一些有用的资源，它们将对您有所帮助：

BrowserStack完全是当今可用的最佳跨浏览器测试工具。使用它来查看不同的浏览器和平台如何与CSS混淆。
克里斯·科耶尔（Chris Coyier）的“ 如何处理供应商前缀”介绍了基础知识。
Smashing Magazine上的跨浏览器CSS编码原理涵盖了使用多个浏览器时可能会遇到的一些CSS问题。
我可以使用...是一个宝贵的网站，用于检查哪些浏览器支持哪些CSS属性。
Prefixr将CSS转换为跨浏览器友好的语法。如果您使用的该属性需要特定于浏览器的特定前缀，Prefixr将为您提供帮助。这仅在使用CSS3属性时才有意义。
Prefixfree是与Prefixr类似的工具，它“使您仅在各处使用未加前缀CSS属性。它在后台运行，仅在需要时将当前浏览器的前缀添加到任何CSS代码中。”

作业5：看书

无论您是一本又一本地阅读它们，还是需要快速参考时便将它们拿出来，最好的行业书籍都是无与伦比的学习方法。

CSS已经写了很多次了，但是这些出版物是我的主笔：

HTML和CSS Book是绝对入门的精美插图指南，此外该网站还提供了所有代码段和示例。
CSS： CSS教父Eric Meyer 的权威指南。
CSS：《失踪手册》现在（以技术术语而言）已有数年历史，但仍被许多人认为是CSS基础知识的入门书籍。
Dan Cederholm撰写的CSS3 For Web Designers （在作业3之后您将在Twitter上关注的人，对吗？）是A Book Apart早期的书籍之一。不适合绝对的初学者，但即使是平装本也可以。
Smashing Magazine的CSS Essentials（eBook）。

作业6：限制选择器和特定性

随着您获得信心，您CSS词汇量将会增加。您将把CSS属性提交给内存，以及各种选择元素的方式。现在是时候把它提高一个档次并认真学习一些CSS选择器了。

您必须在Nettuts +上记住的30个CSS选择器确实涵盖了您。
CSS技巧上的选择器年鉴

学习CSS选择器还意味着要专一。

哪些选择器会覆盖其他选择器？为了提高编码效率，我应该在选择器中使用的最低限度语法是什么？我经常派人去学习特异性规则的地方是Andy Clarke的CSS：Specificity Wars 。一个启发性的可视化图，显示选择器在相互碰撞时的表现（以及黑暗的力量）。

作业7：更进一步

CSS是一个非常复杂的学科。一旦掌握了基础知识，就有许多途径可供进一步研究。例如：

CSS3

CSS3不断发展。采用了新的属性，其他属性被浏览器完全删除，有时语法甚至发生变化。掌握CSS Gradients将是您使用Photoshop的棺材中的另一个钉子；为什么在可以CSS的情况下使用快照图像呢？

请参阅CSS3。请参阅所有正确CSS3实施，并为不支持的浏览器建议使用备用。另外，请查看Tuts + Premium上的CSS3 Essentials ，以使您的知识有所提高。

媒体查询

响应式Web设计允许您更改流畅的Web布局，具体取决于访问页面的方式。 CSS3媒体查询可帮助此过程，根据情况提供不同CSS规则。看一下响应式Web设计：入门的可视指南。

CSS预处理器

事实证明CSS可能更好。一旦开始将CSS用于实际项目，您可能会得出相同的结论。维护大型CSS文件很困难，重复是很常见的-为什么您不能使用变量来存储十六进制颜色的值，而不是一遍又一遍地键入它？ Sass，LESS和Stylus等CSS预处理器可以解决所有这些问题，甚至更多。甚至无需“重新学习”类似的语言（如果需要，可以坚持使用普通CSS），您可以利用预处理器的强大功能。

如果您有兴趣了解更多信息，请查阅“进入LESS” ，“ 掌握SASS”和“ Sass vs.LESS vs. Stylus：预处理器枪战” 。