Skip to content
This page has been auto-translated and may contain errors.View in English

介绍

docs.scrimba.com
Juno

欢迎来到CSS手册!我是Juno,这是我最喜欢教授的网页开发部分。HTML提供页面的结构,而CSS是让它栩栩如生的地方:颜色、间距、字体、整个页面的外观。

我们将从最初的CSS代码开始,逐步构建,一次学习一个概念。如果你能写一些HTML,那么你已经准备好学习这里的所有内容了。

没有问题是太基础的,按照自己的节奏来,我们会一起完成!

Juno

欢迎来到CSS手册。我是Ace,我喜欢保持实用性。你已经可以构建页面了,所以这里我们重点是把那个结构变成你真正想要发布的布局。

每章都是这样:先讲概念,再讲怎么做:读它、试它、建它。在布局这里,CSS从装饰的感觉变成了工程的感觉,这才是有趣的地方。

Juno

欢迎来到CSS手册。我是Sol,我已经写了足够长时间的样式,每个错误都犯过一遍。这些文档是给想知道CSS如何实际解析你写的代码的人准备的,而不仅仅是哪个属性改变哪个像素。

这里有正确解释的级联、布局边界情况,以及大多数教程会跳过的性能和可访问性细节。CSS看起来很宽容,但样式能渲染和样式能在不同屏幕上保持稳定之间的差距才是真正的工作所在。仔细阅读,质疑一切,包括我说的话。

这本手册是为那些能写一些HTML,想让页面看起来和他们想象的一样的人准备的。CSS是Cascading Style Sheets的缩写,是描述页面外观的语言:它的颜色、字体、间距以及屏幕上一切的排列。HTML说的是页面上有什么;CSS说的是它应该怎样呈现。有两个术语你会在整个过程中看到:一个属性是你可以设置样式的一件事,比如colorfont-size,一个选择器是你如何用CSS指向你想要设置样式的元素。这里的每个概念都是完整地写出来的,有深度、示例,以及需要快速答案时可以搜索的东西。

你不需要任何设计背景就可以开始。如果你能在页面上放一个标题和一个段落,你就有足够的开始知识了,其他的一切都会在需要时引入。CSS是几乎每个网页开发者学的第二语言,在HTML之后,因为没有它的页面不过是无样式的文本。

这本手册从基础开始逐步建立。你将学会如何将样式附加到页面并指向正确的元素,盒模型如何控制间距和大小,如何使用颜色和字体,然后如何用弹性布局和网格布局页面并使其适应任何屏幕。每个想法本身都很小,它们堆积在一起形成你真正能发布的界面。

这里的方法是解释每一部分CSS做什么以及为什么,而不仅仅是要输入什么。任何人都可以从示例中粘贴一个属性并看到屏幕上的东西改变。而在那和构建适应性布局、保持可读性、保持易于修改之间的距离就是理解浏览器如何在你的样式重叠时决定它们的含义。这种理解才是任何单一项目都经不起的。

JunoCSS奖励尝试 CSS有一个很棒的特点:你改变什么,立即就能看到结果。调整一个颜色,移动一些间距,页面就在你面前更新了。这种快速反馈使它成为网页开发中最好的学习实验部分之一,所以在阅读时要尝试一些东西。
JunoCSS奖励尝试 CSS给你一个紧凑的反馈循环:改变一个值,看它渲染,调整。利用这一点。建立对布局的真实感觉的最快方式是打开浏览器工具,现场改变属性,看什么动。这本手册中的所有东西都是用来尝试的,不仅仅是读的。
JunoCSS奖励尝试 反馈循环是CSS最好的教学工具,所以使用浏览器的开发者工具作为实验室:检查盒模型,切换声明,实时观看级联选择一个赢家。读关于特异性是一回事;在样式面板中看一个规则输给另一个才是真正的学习。

认识你的指南

这本手册由三位指南主持,你选择哪一位给你讲解。内容对所有人都是相同的;你的指南设定讲述的语气,在适应的页面上,每个部分的深度。

  • Juno教授初级课程:温暖耐心,用清晰的类比,不做任何假设。
  • Ace教授中级课程:实用且先做优先,直奔你真正做的事。
  • Sol教授深入课程:机制、权衡以及其他人都跳过的生产细节。

你可以随时从任何页面顶部的选择器切换指南,或者打开右下角的首选项来改变你的指南、语言或字体大小。

准备好后,这本手册就开始了。下一章什么是CSS,涵盖CSS真正是什么,它如何与HTML配对,以及整个其余课程所基于的规则、选择器和属性的小词汇表。

更喜欢通过建设来学习?Scrimba的免费HTML和CSS课程通过五个项目和75多个交互式挑战涵盖相同的内容。