在我们关于如何创建网站的夜校系列的第一部分中，我们学习了一些关于网页的基本知识：HTML。在今天的课程中，我们将开始使用样式和CSS将衣服放到我们的网站上。

上面的视频将引导您了解将样式应用于HTML文档中元素的三种方法。它假设你已经看了第一课，所以如果你没有，你可能想先看。在本课结束时，您将了解如何向网页中的元素添加样式属性。额外的参考资料，请查看下面的文本。

你需要什么

• 用于编写HTML的纯文本编辑器
• 您可以选择web浏览器来测试您的HTML
• 希望加强你对网络工作方式的了解

正如你所见，不需要太多就可以开始了。

什么是样式和css(styles and css)？

CSS代表层叠样式表，它是浏览器用来解释网页上元素的外观的语言。CSS语言非常容易理解：您可以定义特定的CSS属性，这些属性涵盖元素尺寸（宽度和高度）、文本（重量、样式、字体类型、颜色等）、位置和间距（边距和填充）等所有内容。

本质上，如果它与元素的外观有关，那么它就与CSS有关。为了扩展上面的隐喻，HTML和文档中的元素是站点的骨架。它们提供了结构。CSS装饰你的网站，使它看起来漂亮或不。那部分取决于你的设计风格。

例如，写出来后，CSS看起来有点像这样：如果我想给一段文本添加一种颜色，那么相应的CSS属性就是，不出所料，color。要定义color属性，只需键入color、冒号、声明样式，然后以分号结束。例如，颜色：红色；

如何将css应用于元素

当然，您需要知道在哪里应用CSS样式，以便页面上的元素反映它们(你不能只输入颜色：红色；任劳任怨，期待结果。您可以通过以下三种方式之一使用CSS将样式应用于网页上的任何元素：

• Inline styles: This method is best for quick, one-off styles that you want to apply to one element without a lot of overhead. You can add inline styles to any element by defining the style attribute of an element. For example:

  <p style="color:red;">The text inside this paragraph tag will be red.</p>

  You can define more than one property using inline styles as long as you remember the semicolon between them:

  <p style="color:red; font-family:Helvetica; font-size:20px;">The text inside this p tag will be red, 20-pixels wide, and use Helvetica.<p>

  Internal stylesheets: Inside the document (often inside the head), you can define styles for elements in the page using selectors. Internal stylesheets look like this:

  <code><style type="text/css"> h3 { color:red; font-family:Helvetica; font-size:20px; } </style>

  In the example above, the h3 is the selector. It's saying, "All H3 elements on this page should use the following styles." You can also define selectors using classes or element IDs.

  External stylesheets: These stylesheets move the CSS to an external file ending with .css (for example, style.css. The syntax for external stylesheets is exactly like what you saw with internal stylesheets, but you don't need the style declaration. Instead, you link to your external stylesheet like so:

  <link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />

  In this instance, I've got the style.css file inside a stylesheets folder, and I'm telling the web browser: "When you load the page, looks for the CSS here." Everything inside looks the same as what goes inside the style tags of internal stylesheets.

何时使用类、ID和元素选择器？

大多数情况下，为了便于组织，您会希望使用外部样式表。但是如何决定使用哪些选择器呢？让我们快速浏览一下您的选项：

• Element selectors: You should use an element selector when you want most elements of that type to look the same way on your page. So if you wanted all h2 elements to be 30 pixels, you could add the following to your CSS file:

  <code>h2 { font-size:30px; }

  From then on, every h2 will respect that style unless you override it.

  Class selectors: Classes are useful for broad styles that you want to apply to more than one element, but it may be a style that you want to use a little more selectively than you would when using the element selector. In the video, I defined the very boring red class like so:

  <code>.red { color:red; }

  Using the dot (.) before the text "red", I've told my browser that this selector is a class I'm creating. Now, in any element in my page, I can add an attribute of class="red" and its text will be red.

  ID selectors: Defined in CSS by a preceding hash (#), the ID selector is for one specific element and one element only. Essentially this provides a way to adjust styles for one specific element without using inline styles—keeping all your styling in one place. (IDs are also very useful for JavaScript, but that's well beyond our scope here.) If I wanted an 800x600px div with a red background called my_red_div, it would look like this:

  <code>#my_red_div { width:800px; height:600px; background:red; }

观看视频，看看这一切在实践中。阅读是一回事，但当你能看到它时，一切就变得更有意义了。

就这样？

简而言之，是的！当然CSS还有很多，还有一些更高级的方法来处理CSS选择器，这样你就可以缩小元素继承样式的范围，但这才是最基本的。唯一缺少的东西：属性！

不过，我不打算浏览所有可用的CSS属性（坦率地说，我们在本课中没有时间）。与大多数编程的本质一样，您将从搜索选项中学到比我在一个快速指南中提供的更多的东西。以下是您可能需要浏览的一些CSS引用：

• w3css引用
• 添加了Bytes的CSS备忘单
• 分开的名单

我很想在评论中听到更多喜欢的参考工具！我对这类东西基本上是个谷歌搜索者。我不是CSS专家，但我已经花了大量的时间为我自己的宠物项目黑客CSS，相信我：一点点有很长的路要走，但有很多你可以学习，如果你想深入。

你可以联系亚当帕什，这篇文章的作者，在小费[email protected]. 你也可以在Twitter和Facebook上关注他。