css css2 css3_学习CSS的最佳方法

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：

• @chriscoyier
• @csswizardry
• @smashingmag
• @snookca
• @MeyerWeb
• @zeldman
• @simplebits
• @nettuts （当然）
• @wdtuts （您还没有？！）

..和..

• 订阅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：预处理器枪战” 。

SMACSS

SMACSS （或CSS的可伸缩和模块化体系结构）是Jonathan Snook开发的一个概念，旨在消除CSS文件的笨拙可维护性。 它并没有教授新的语言，而是提出了一些方法，可以使您的当前CSS更有条理。

编写模块化CSS可使您获取大量样式代码并将其放入其他项目，而不会破坏其余样式。 最好地进行特异性管理。

结论

毫无疑问，凭借HTML和CSS之类的技能，您将成为一名更好的Web设计师。 遵循我们概述的两个学习 过程 ，您会顺利进行的。

如果您有任何CSS学习建议，请在评论中大声疾呼！

翻译自: https://webdesign.tutsplus.com/tutorials/the-best-way-to-learn-css--webdesign-11906

css css2 css3