自早期以来，互联网发生了很大变化。最大的区别之一？看起来如何。

In fact, the internet looks so good nowadays that we can forget what websites really are — a bunch of files storing text and media content. In a way, the goal of modern web design is to make us forget that fact and simply enjoy the ride. For that, we have CSS to thank. Download Now: Free Intro Guide to HTML & CSS

After HTML, CSS isthe最重要的语言要学习在线体验。这是因为在过去的几十年中，前端网络设计的进步导致用户的期望不断上升。如果网站无法符合我们的视觉标准，它会削弱我们的经验：充其量，我们认为该网站背后的组织缺乏。最糟糕的是，我们离开页面，永远不会返回。

Basically, if content is king, CSS is second-in-command. So, any site owner or web-savvy marketer should at least know the fundamentals.

在本指南中，您将了解开始阅读和编写CSS所需的一切，包括：

Before continuing, you should understand thebasics of HTML。我们将谈论很多元素，标签，classes， 和ids— make sure you have these down!

What is CSS?

CSS是一种定义网页设计和布局的语言。换句话说，CSS控制着将网页加载到浏览器中时的外观。我们将此设计称为页面的“样式”。CSS是用于样式的标准语言，通常与HTML（定义网页内容的语言）一起使用。

CSS stands for Cascading Style Sheets. “Style Sheets” refers to the CSS document itself, and “Cascading” refers to how style rules are applied to page elements. I’ll explain what that means in more detail later on, but let’s first learn what CSS does.

CSS使用什么？

Without CSS, the web as we know it would look nothing like it does today. To illustrate, takethis HubSpot blog post:

screenshot of a hubspot blog post with page styling

看起来很正常，对吗？但是，实际上，在这个看似基本的页面上，CSS实际上有很多。如果我们禁用HubSpot适用于HTML的CSS，我们会看到这一点：

screenshot of a hubspot blog post without css styling

通过退回CSS窗帘，我们看到它增加了用户体验的程度。

实际上，即使上面的屏幕截图中的内容也具有浏览器对其进行的一些样式。这种称为默认样式的基本样式使HTML通过在段落之间添加空间以及扩大和大胆的标题来使HTML更加清晰。没有这些，我们的示例看起来像这样：

Hubspot博客文章的屏幕截图，没有任何页面样式

是的。我不在乎该帖子有多信息 - 看起来很糟糕。

这里的关键要点是CSS几乎存在于每个网站上，对我们的在线体验至关重要。CSS使我们可以为我们想要的任何页面元素设置样式。从color, totypography, to动态页面布局, CSS does the heavy lifting.

HTML和CSS有什么区别？

HTML和CSS齐头并进，构建我们所知道和喜欢的网页。但是，这些是不同的语言，重要的是要了解它们的不同目的。

HTML (Hypertext Markup Language) determines the内容of a web page, including text, links, images, videos etc. An HTML file lists all of the “things” on a page, but it doesn’t specify how these things look when displayed in a browser.

CSS, as we now know, controls thestyle这些要素。CSS确保了HTML内容以设计师打算的方式出现在用户身上。

您可能想知道：为什么将这两种语言分开？这是一个合理的问题，因为HTML和CSS一起工作。答案是，分开样式和内容使开发网站变得更加容易。

A brief history lesson: When HTML was first introduced in the 1990s, styling was much less of a consideration — the focus was more on just presenting information on a web page. Once developers had that down, the next step was adding rudimentary visual embellishments like colors and fonts.

HTML样式的第一个实现是特殊的HTML标签和属性，会影响文本的外观。该解决方案奏效了，但对于设计师而言，这远非理想的选择，尤其是随着网站的增长。那些构建大型在线属性的人必须将样式应用于每个HTML文件中的每个页面元素。

You can imagine how this would become a tad maddening. Hence, CSS was created to style HTML without having to change the HTML files directly. Since then, there have been several updates to CSS that add new capabilities — the current standard isCSS3。

Benefits of CSS

事实证明，将内容代码与样式代码分开有很多好处。这些包括：

  • Less coding:Developers can use CSS to apply the same styling to multiple pages and page elements across a website, saving huge amounts of time and reducing the chance of errors. Modifying a site-wide style requires changing just a snippet of code.
  • 更多样式选项：您可以使用CSS做很多事情，远远超过原始HTML造型系统所允许的要多得多。有了清晰的视野，CSS的专业知识和一些耐心，您可以完全自定义一个网站，以符合您的喜好。
  • 标准化：由于CSS是用于造型网页的统一语言，因此开发人员或设计师可以通过查看CSS文件来了解任何网站的样式。
  • 更好的性能：CSS减少了重复的样式代码的量。较少的代码意味着较小的文件，较小的文件意味着更快的页面加载时间。

如何写CSS

We’ve explored why the CSS language does and why it’s important (other than what “cascading” means — we’ll get there, trust me). Now, let’s code some.

Those familiar with HTML will notice that CSS syntax looks a little different. Instead of listing page content, CSS lists the style rules that are assigned to HTML elements, an entire HTML document, or even multiple HTML documents. These rules are processed by the web browser loading the HTML file.

A rule in CSS looks like this:

典型CSS规则的图

您会注意到四个主要组成部分：选择器，声明，属性和值。让我们分解其中的每一个。

What is a CSS Selector?

CSS规则总是始于一个选择器。的希利ctor indicates the part of the document where the rule is applied. When processing CSS code, the browser uses the selector to “select” the targeted elements and apply style rules to them. The selector is followed by one or more declarations inside curly braces.

有几种编写选择器的方法。CSS选择器的最基本类型是上面示例中使用的元素选择器。元素选择器通过其名称靶向HTML元素（例如，p,跨度,div,a）：

See the Pen元素选择器克里斯蒂娜·佩里奇（Christina Perricone）（@hubspot） 在CodePen。

也可以通过其类或ID属性来定位元素。类选择器将其写为（。），然后是类名称。ID选择器写为哈希（＃），后跟ID名称。

See the PenClass and Id Selectors克里斯蒂娜·佩里奇（Christina Perricone）（@hubspot） 在CodePen。

针对特定的子元素之内父元素，将选择器写为父元素，然后是子元素（介于两者之间的空间）：

See the Pen父/子选择者克里斯蒂娜·佩里奇（Christina Perricone）（@hubspot） 在CodePen。

You can even assign the same rule to multiple elements with the grouping selector. The grouping selector comprises two or more element names separated by commas. Order is not important in the grouping selector — the rule will be applied to all listed elements:

See the Pen分组选择器克里斯蒂娜·佩里奇（Christina Perricone）（@hubspot） 在CodePen。

You’ll see these basic selectors all over CSS files, but there are even more selector types that let you target page elements in various ways. To learn more about them, see ourCSS选择器指南。

什么是CSS声明？

选择器出现后，声明块，一对包含一个或多个CSS声明的卷发括号。CSS声明告诉浏览器如何造型所选元素 - 它由属性和值组成。

每个声明都以半隆结尾。尽管不是必需的，但通常将每个声明都放在新线上。这种做法使CSS声明更容易读取人类。

什么是CSS属性？

作为CSS声明的第一部分，CSS属性告诉浏览器应更改该元素的样式功能。有许多CSS属性影响不同的事物。例如，属性可以针对页面上元素的颜色，大小，字体，形状或位置。属性总是与至少一个值配对。财产及其价值由结肠隔开。

在谈论价值之前，一个重要的说明是：要生效声明，浏览器必须识别声明的属性。不幸的是，仅仅因为存在CSS属性并不意味着它在每个浏览器中都可以使用。当引入新属性时，Web浏览器需要实现它们，并且有些浏览器比其他浏览器要比其他浏览器更快地采用新的CSS功能。

这就是为什么CSS属性参考页面像这个包括一个“浏览器兼容性”一节。For each browser, the chart below lists the earliest compatible release (if available):

CSS属性的浏览器兼容性图表

Image Source

Common properties likecolor和宽度work on every browser, so you won’t have to worry about compatibility with these properties. When utilizing more obscure properties, however, keep cross-browser compatibility in mind — test your designs in common browsers (as well as desktop and mobile devices) to ensure all visitors will have the same experience.

What is a CSS value?

Every CSS property has its own set of values. The value specifies the styling of an element’s property. Here are some common properties and their values:

  • Color-related properties can take simple one-word values likeblue和red, as well as hex codes —＃33e0ff和＃FF5733— and RGB values —RGB（51，224，255）和RGB（255，87，51）。
  • 这宽度property takes can take a length value —Px(pixels), for instance — or a percentage, which sizes the element relative to the width of the parent container. For instance, a
    在 - 的里面<身体>标签设置为50%宽度将跨越视口宽度的一半。
  • 这font-family财产接受书面名称web-safe fonts喜欢Arial,Times New Roman， 或者导游。

See the PenCSS值克里斯蒂娜·佩里奇（Christina Perricone）（@hubspot） 在CodePen。

Some properties accept multiple values. The填充属性最多可以占用四个值，这些值分别设置了元素内容的上方，右下，下方和左侧的空间。

See the Pen带填充物克里斯蒂娜·佩里奇（Christina Perricone）（@hubspot） 在CodePen。

You can learn more about how padding and margins work in our guide to theCSS框型号。

CSS评论

像使用HTML一样，您可以写comments in CSS。浏览器会忽略评论，并在为您的代码提供上下文和注释中有用。

要在CSS中发表评论，请写/*，然后您的评论文本，然后以*/。


/*我是CSS的评论！*/

评论也可以用来测试您的CSS - 禁用规则或声明，只需“评论”代码，然后“删除”代码重新激活它：

See the PenCSS评论克里斯蒂娜·佩里奇（Christina Perricone）（@hubspot） 在CodePen。

如何将CSS添加到HTML

Of course, CSS doesn’t do us much good if it’s not linked to an HTML file. In this section, I’ll cover three ways to add CSS to HTML: external, internal, and inline.

External CSS

External CSS exists in its own file. This file is linked to an HTML document with atag. External CSS is the most common method for adding CSS to HTML, since one external stylesheet can dictate the style of multiple HTML documents. This enables developers to make site-wide changes with just one CSS file.

To create a CSS file, write your CSS code in any text editor orcode editor并使用.CSS扩展名保存文件。要将您的CSS文件链接到HTML文件，请将您的HTML文件和CSS文件放在同一文件夹中，然后将以下代码粘贴到其中<头>section of the HTML file:



...在哪里style.css是您的CSS文件的名称。此CSS文件中的规则将适用于任何引用它的HTML文件element above.

See the PenExternal CSS克里斯蒂娜·佩里奇（Christina Perricone）（@hubspot） 在CodePen。

Internal CSS

内部CSS是嵌入HTML文档中的CSS代码。它写在