css简介
什么是CSS (What is CSS)
CSS (an abbreviation of Cascading Style Sheets) is the language that we use to style an HTML file, and tell the browser how should it render the elements on the page.
CSS ( 层叠样式表 ( Cascading Style Sheets )的缩写)是我们用来设置HTML文件样式的语言，它告诉浏览器它应如何呈现页面上的元素。
It was grown out of the necessity of styling web pages. Before CSS was introduced, people wanted a way to style their web pages, which looked all very similar and “academic” back in the day. You couldn’t do much in terms of personalization.
它是出于对网页进行样式设置的需要而开发的。 在引入CSS之前，人们想要一种样式化网页的方式，这些网页在当时看上去都非常相似且具有“学术性”。 就个性化而言，您不能做太多事情。
HTML 3.2 introduced the option of defining colors inline as HTML element attributes, and presentational tags like center and font, but that escalated quickly into a far from ideal situation 😱.
HTML 3.2引入了将内联颜色定义为HTML元素属性的选项，以及诸如center和font类的表示性标签，但这种方法很快就升级为远离理想状态的情况😱。
CSS let us move everything presentation-related from the HTML to the CSS, so that HTML could get back being the format that defines the structure of the document, rather than how things should look in the browser.
CSS使我们可以将所有与表示相关的内容从HTML移到CSS，这样HTML可以恢复为定义文档结构的格式，而不是浏览器中的外观。
CSS is continuously evolving, and CSS you used 5 years ago might just be outdated, as new idiomatic CSS techniques emerged and browsers changed.
CSS不断发展，随着新的惯用CSS技术的出现和浏览器的改变，您5年前使用CSS可能已经过时了。
CSS简史 (A brief history of CSS)
Before moving on, I want to give you a brief recap of the history of CSS.
在继续之前，我想简要回顾一下CSS的历史。
CSS was grown out of the necessity of styling web pages. Before CSS was introduced, people wanted a way to style their web pages, which looked all very similar and “academic” back in the day. You couldn’t do much in terms of personalisation.
CSS的产生是出于对网页样式的需要。 在引入CSS之前，人们想要一种样式化网页的方式，这些网页在当时看上去都非常相似且具有“学术性”。 就个性化而言，您不能做太多事情。
HTML 3.2 introduced the option of defining colors inline as HTML element attributes, and presentational tags like center and font, but that escalated quickly into a far from ideal situation.
HTML 3.2引入了将颜色内联定义为HTML元素属性以及表示性标签(例如center和font ，但是这种方法很快就升级到了理想的境地。
CSS let us move everything presentation-related from the HTML to the CSS, so that HTML could get back being the format that defines the structure of the document, rather than how things should look in the browser.
CSS使我们可以将所有与表示相关的内容从HTML移到CSS，这样HTML可以恢复为定义文档结构的格式，而不是浏览器中的外观。
CSS is continuously evolving, and CSS you used 5 years ago might just be outdated, as new idiomatic CSS techniques emerged and browsers changed.
CSS不断发展，随着新的惯用CSS技术的出现和浏览器的改变，您5年前使用CSS可能已经过时了。
It’s hard to imagine the times when CSS was born and how different the web was.
很难想象CSS诞生的年代以及网络的不同之处。
At the time, we had several competing browsers, the main ones being Internet Explorer or Netscape Navigator.
当时，我们有几种竞争的浏览器，主要的是Internet Explorer或Netscape Navigator。
Pages were styled by using HTML, with special presentational tags like bold and special attributes, most of which are now deprecated.
页面是使用HTML设置样式的，带有特殊的呈现标记，例如bold和特殊属性，现在已弃用了其中的大多数标记。
This meant you had a limited amount of customisation opportunities.
这意味着您的定制机会有限。
The bulk of the styling decisions were left to the browser.
大部分样式决定留给浏览器。
Also, you built a site specifically for one of them, because each one introduced different non-standard tags to give more power and opportunities.
另外，您为其中一个站点专门构建了一个站点，因为每个站点都引入了不同的非标准标签以提供更多功能和机会。
Soon people realised the need for a way to style pages, in a way that would work across all browsers.
很快，人们意识到了一种需要在所有浏览器上都可以使用的样式页面的方法。
After the initial idea proposed in 1994, CSS got its first release in 1996, when the CSS Level 1 (“CSS 1”) recommendation was published.
在1994年提出最初的想法后，CSS于1996年发布了CSS Level 1(“ CSS 1”)建议书，并首次发布。
CSS Level 2 (“CSS 2”) got published in 1998.
CSS Level 2(“ CSS 2”)于1998年发布。
Since then, work began on CSS Level 3. The CSS Working Group decided to split every feature and work on it separately, in modules.
从那时起，就开始了CSS级别3的工作。CSS工作组决定将每个功能拆分并分别在模块中进行。
Browsers weren’t especially fast at implementing CSS. We had to wait until 2002 to have the first browser implement the full CSS specification: IE for Mac, as nicely described in this CSS Tricks post: https://css-tricks.com/look-back-history-css/
浏览器在实现CSS方面并不是特别快。 我们必须等到2002年，才能使第一个浏览器实现完整CSS规范：适用于Mac的IE，如本CSS Tricks帖子中所描述的： https ： //css-tricks.com/look-back-history-css/
Internet Explorer implemented the box model incorrectly right from the start, which led to years of pain trying to have the same style applied consistently across browsers. We had to use various tricks and hacks to make browsers render things as we wanted.
Internet Explorer从一开始就错误地实现了框模型，这导致多年来试图在浏览器中始终使用相同样式的痛苦。 我们必须使用各种技巧和黑客手段来使浏览器呈现所需的东西。
Today things are much, much better. We can just use the CSS standards without thinking about quirks, most of the time, and CSS has never been more powerful.
今天的情况好多了。 大多数情况下，我们无需考虑怪癖就可以使用CSS标准，而CSS从未如此强大。
We don’t have official release numbers for CSS any more now, but the CSS Working Group releases a “snapshot” of the modules that are currently considered stable and ready to be included in browsers. This is the latest snapshot, from 2018: https://www.w3.org/TR/css-2018/
我们现在没有CSS的正式发布号，但是CSS工作组发布了一些模块的“快照”，这些模块目前被认为是稳定的，可以在浏览器中使用。 这是自2018年以来的最新快照： https ： //www.w3.org/TR/css-2018/
CSS Level 2 is still the base for the CSS we write today, and we have many more features built on top of it.
CSS Level 2仍然是我们今天编写CSS的基础，并且我们在其之上构建了更多功能。
CSS看起来如何 (How does CSS look like)
A CSS rule set has one part called selector, and the other part called declaration. The declaration contains various rules, each composed by a property, and a value.
CSS 规则集的一部分称为选择器 ，另一部分称为声明 。 声明包含各种规则 ，每个规则由一个属性和一个值组成 。
In this example, p is the selector, and applies one rule which sets the value 20px to the font-size property:
在此示例中， p是选择器，并应用一个规则，该规则将20px的值设置为font-size属性：
p {
font-size: 20px;
}Multiple rules are stacked one after the other:
多个规则一个接一个地堆叠：
p {
font-size: 20px;
}
a {
color: blue;
}A selector can target one or more items:
选择器可以定位一个或多个项目：
p, a {
font-size: 20px;
}and it can target HTML tags, like above, or HTML elements that contain a certain class attribute with .my-class, or HTML elements that have a specific id attribute with #my-id.
并且可以像上面那样定位HTML标记，也可以定位包含具有.my-class的特定类属性HTML元素，或定位具有#my-id的特定id属性HTML元素。
More advanced selectors allow you to choose items whose attribute matches a specific value, or also items which respond to pseudo-classes (more on that later)
使用更高级的选择器，您可以选择属性与特定值匹配的项，也可以选择对伪类作出响应的项(稍后会详细介绍)
分号 (Semicolons)
Every CSS rule terminates with a semicolon. Semicolons are not optional, except after the last rule, but I suggest to always use them for consistency and to avoid errors if you add another property and forget to add the semicolon on the previous line.
每个CSS规则都以分号结尾。 除最后一条规则外，分号不是可选的，但我建议始终使用它们以保持一致性，并避免在添加其他属性而忘记在前一行添加分号时出错。
格式和缩进 (Formatting and indentation)
There is no fixed rule for formatting. This CSS is valid:
格式化没有固定的规则。 此CSS有效：
p
{
font-size: 20px ;
}
a{color:blue;}but a pain to see. Stick to some conventions, like the ones you see in the examples above: stick selectors and the closing brackets to the left, indent 2 spaces for each rule, have the opening bracket on the same line of the selector, separated by one space.
但很痛苦。 遵循一些惯例，如您在上面的示例中看到的那样：坚持选择器和左方括号，在每个规则上缩进2个空格，在选择器的同一行上将左方括号隔开一个空格。
Correct and consistent use of spacing and indentation is a visual aid in understanding your code.
正确，一致地使用间距和缩进有助于理解代码。
如何在网页中加载CSS (How do you load CSS in a Web Page)
CSS can be loaded in a page in 3 ways: with a style tag in the page head, with an external CSS file, and inline in tags. CSS is attached to an HTML page in different ways.
用：CSS可以在页面加载有3种方式style的页面标签head的标签，与外部CSS文件，内联。 CSS以不同方式附加到HTML页面。
1：使用link标记 (1: Using the link tag)
The link tag is the way to include a CSS file. This is the preferred way to use CSS as it’s intended to be used: one CSS file is included by all the pages of your site, and changing one line on that file affects the presentation of all the pages in the site.
link标记是包含CSS文件的方式。 这是按预期使用CSS的首选方式：站点的所有页面都包含一个CSS文件，更改该文件的一行会影响站点中所有页面的显示。
To use this method, you add a link tag with the href attribute pointing to the CSS file you want to include. You add it inside the head tag of the site (not inside the body tag):
要使用此方法，请添加一个带有href属性的link标签，该标签指向要包含CSS文件。 您将其添加到网站的head标签中(而不是body标签中)：
<link rel="stylesheet" type="text/css" href="myfile.css">The rel and type attributes are required too, as they tell the browser which kind of file we are linking to.
rel和type属性也是必需的，因为它们告诉浏览器我们要链接到哪种文件。
2：使用style标签 (2: using the style tag)
Instead of using the link tag to point to separate stylesheet containing our CSS, we can add the CSS directly inside a style tag. This is the syntax:
无需使用link标记指向包含我们CSS的单独样式表，而是可以将CSS直接添加到style标记中。 这是语法：
<style>
...our CSS...
</style>Using this method we can avoid creating a separate CSS file. I find this is a good way to experiment before “formalising” CSS to a separate file, or to add a special line of CSS just to a file.
使用这种方法，我们可以避免创建单独CSS文件。 我发现这是一种在将CSS“形式化”到单独文件之前进行实验或在文件中添加一行特殊CSS的好方法。
3：内联样式 (3: inline styles)
Inline styles are the third way to add CSS to a page. We can add a style attribute to any HTML tag, and add CSS into it.
内联样式是将CSS添加到页面的第三种方法。 我们可以将style属性添加到任何HTML标记，然后在其中添加CSS。
<div style="">...</div>Example:
例：
<div style="background-color: yellow">...</div>css简介
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
