css技巧
Cascading Style Sheets sound intimidating. The name alone conjures up images of cryptic code and syntax too difficult for the layperson to grasp. In reality, however, CSS is one of the simplest and most convenient tools available to Web developers.
级联样式表听起来令人生畏。 单单这个名字就让人想起了外行人难以理解的密码和语法图像。 但是，实际上，CSS是Web开发人员可以使用的最简单，最方便的工具之一。
This article is actually a chapter from the SitePoint Book The CSS Anthology: 101 Essential Tips, Tricks & Hacks.
本文实际上是SitePoint《 CSS Anthology：101基本技巧，窍门与技巧》一书的一章。
This book is aimed at people who need to work with CSS – Web designers and developers who have seen the cool CSS designs out there, but don’t have the time to wade through masses of theory and debate in order to create a site. Each problem is solved with a working solution that can be implemented as-is or used as a starting point.
本书面向需要使用CSS的人们–那些已经看到了酷炫CSS设计的Web设计师和开发人员，却没有时间花大量的时间进行理论和辩论来创建站点。 每个问题都可以通过一个可以按原样实现或用作起点的工作解决方案来解决。
This book isn’t a tutorial; while Chapter 1, Getting Started with CSS covers the very basics of CSS, and the early chapters cover simpler techniques than those that follow, you will find the examples easier to grasp if you have a basic grounding in CSS.
这本书不是教程。 虽然第1章“ CSS入门”涵盖了CSS的基础知识，而前几章介绍了比其后的技术更简单的技术，但是如果您具有CSS的基础知识，那么您会发现这些示例更容易掌握。
This series of chapters will comprise the first four chapters from The CSS Anthology: 101 Essential Tips, Tricks & Hacks.
这一系列的章节将包括CSS Anthology的前四章：101基本技巧，窍门和技巧 。
Chapter 1: Getting Started with CSS
第1章：CSS入门
This chapter does not follow the same format as the rest of the book – it’s simply a quick CSS tutorial for anyone who needs to brush up on the basics of CSS. If you’ve been using CSS in your own projects, you might want to skip this chapter and refer back to it on a needs basis, if you find you want to look into basic concepts in more detail.
本章的格式与本书其余部分的格式不同-它只是需要快速学习CSS基础的任何人的快速CSS教程。 如果您在自己的项目中一直使用CSS，则可能希望跳过本章，并根据需要重新参考本章，如果您想更详细地研究基本概念。
Chapter 2: Text Styling and Other Basics
第2章：文本样式和其他基础知识
This chapter covers techniques for styling and formatting text in your documents; font sizing, colors, and the removal of annoying extra white space around page elements are explained as the chapter progresses. Even if you’re already using CSS for text styling, you will find some useful tips here.
本章介绍了用于样式化和设置文档中文本格式的技术。 随着本章的进行，将对字体大小，颜色以及消除页面元素周围多余的空白区域进行说明。 即使您已经在使用CSS进行文字样式设置，您仍可以在此处找到一些有用的技巧。
Chapter 3: CSS and Images
第3章：CSS和图像
Combining CSS and images can create powerful visual effects. This chapter looks at the ways in which you can do this, and covers background images (not just on the body), and positioning text with images, among other topics.
将CSS和图像结合在一起可以创建强大的视觉效果。 本章介绍了执行此操作的方法，并介绍了背景图像(不仅限于人体)，以及使用图像定位文本以及其他主题。
Chapter 4: Navigation
第4章：导航
We all need navigation, and this chapter explains how to do it, CSS-style. The questions of CSS replacements for image-based navigation, CSS "tab" navigation, combining background images with CSS text to create attractive and accessible menus, and using lists to structure navigation in an accessible way are addressed in this chapter.
我们都需要导航，本章将介绍CSS样式的导航方法。 本章讨论了以下问题：用CSS替换基于图像的导航，CSS“选项卡”导航，将背景图像与CSS文本组合以创建有吸引力且可访问的菜单，以及使用列表以可访问的方式构造导航。
For information, see the book’s page.
有关信息， 请参见本书的页面 。
But now, let’s get started with CSS!
但是现在，让我们开始使用CSS！
In this first chapter, which takes a different format than the rest of the book, I’ll guide you through the basics of CSS and show you how it can be used to simplify the task of managing a consistently formatted Website. If you’ve used CSS to format text on your sites, you may want to skip this chapter and jump straight to the solutions that begin in Chapter 2, Text Styling and Other Basics. And, if you’d rather read this information offline, you can download the .pdf version of the first 4 chapters here.
在第一章中，本书采用与本书其余部分不同的格式，我将向您介绍CSS的基础知识，并向您展示如何使用它来简化管理格式一致的网站的任务。 如果您使用CSS在网站上设置文本格式，则可能要跳过本章，直接跳到第2章，文本样式和其他基础知识中开始的解决方案。 而且，如果您希望离线阅读此信息，则可以在此处下载前4章的.pdf版本 。
CSS is a language that’s used to define the formatting applied to a Website, including colors, background images, typefaces (fonts), margins, and indentation. If you’ve never used CSS before, you could be forgiven for thinking, "Well, I do all that now with HTML tags. Why would I need CSS?" It’s a valid question that’s best answered with an illustration of the problems that can arise when we define styles using HTML.
CSS是一种用于定义应用于网站的格式的语言，包括颜色，背景图像，字体(字体)，边距和缩进。 如果您以前从未使用过CSS，那么您可能会想到，“好吧，我现在使用HTML标记完成所有操作。为什么我需要CSS？” 这是一个有效的问题，最好通过举例说明在使用HTML定义样式时可能出现的问题来回答。
At present, a popular design choice is to use a sans-serif font (such as Arial, Verdana, Tahoma, etc.) for the main body text of a site. Since most Web browsers default to a serif font like Times New Roman, creating a complex Web page layout using a sans-serif font will often involve a lot of <font> tags. In a complex layout, you might see ten or twenty <font> tags dedicated to applying the same font to all text on a page. Multiply this by five – the number of pages on a modest site – and we’re in the neighborhood of one hundred tags. A beefier site might have fifty pages or more, in which case you’re looking at one thousand <font> tags, all of them dedicated to applying that one basic, consistent style to your document’s text.
当前，一种流行的设计选择是使用无衬线字体(例如Arial，Verdana，Tahoma等)作为网站的主体文本。 由于大多数Web浏览器默认使用类似于Times New Roman的衬线字体，因此使用sans-serif字体创建复杂的Web页面布局通常会涉及许多<font>标记。 在复杂的布局中，您可能会看到十个或二十个<font>标签，这些标签专用于将同一字体应用于页面上的所有文本。 将其乘以五(一个适中站点上的页面数)，就可以看到一百个标签。 一个功能更强大的网站可能有五十页或更多，在这种情况下，您要查看一千个<font>标记，它们全部致力于将一种基本的一致样式应用于文档的文本。
Now here’s the kicker: your client calls you late one Friday afternoon to say, "Verdana is nice, but everyone uses it. Let’s use Tahoma instead." Fancy search-and-replace tools aside, you’re now faced with the task of adjusting one hundred, one thousand, or even more <font> tags to make what, from your client’s perspective, seems like a very simple change. You can kiss that ski weekend you had planned goodbye. And, try not to groan aloud – it doesn’t go over well with most customers.
现在开始了：您的客户在一个星期五下午晚些时候给您打电话，说：“ Verdana很不错，但是每个人都在使用它。让我们改用Tahoma。” 除了精美的搜索和替换工具之外，您现在还面临着调整一百，一千甚至更多<font>标签以进行从客户的角度来看看起来很简单的更改的任务。 您可以亲吻原定计划的滑雪周末。 而且，请不要大声吟-大多数客户都无法接受。
If you know your HTML, you may be thinking that the <basefont> tag, which lets you set the default font to be used throughout a page, provides a nice solution to this problem. But even then, you’d have to adjust one tag for each page of your site. Add another font style to the equation (if, say, you wanted to use a different font for that fancy navigation bar of yours), and the problem returns in full.
如果您知道HTML，则可能会想到<basefont>标记(该标记使您可以设置要在整个页面中使用的默认字体)提供了解决此问题的不错方法。 但是即使如此，您仍必须为网站的每一页调整一个标签。 在方程式中添加另一种字体样式(例如，如果您想为您的花哨导航栏使用其他字体)，问题将完全解决。
Another reason why you shouldn’t use HTML to format your site is that these presentational elements are deprecated (flagged to be removed in future specifications) and can’t be used if you wish to follow a Strict DOCTYPE such as HTML 4.01 Strict or XHTML 1.0 Strict. While your page will still be valid if you use a transitional DOCTYPE, it’s good practice to avoid using these deprecated elements where possible. As you’ll discover through the examples in this book, CSS allows you to do lots of things that you can’t do with HTML alone, so there are many reasons why you should use CSS – but let’s stop talking and see some CSS in action!
不应使用HTML格式化网站的另一个原因是，这些表示性元素已弃用(标记为将来的规范中将被删除)，并且如果您希望遵循严格的DOCTYPE(例如HTML 4.01 Strict或XHTML)，则不能使用它们1.0严格 如果您使用过渡的DOCTYPE，虽然页面仍然有效，但是最好避免使用这些不推荐使用的元素。 正如您通过本书中的示例所发现的那样，CSS允许您完成许多单独使用HTML不能完成的工作，因此有许多原因应使用CSS –但是，让我们停止谈论并在其中看到一些CSS。行动！
The basic purpose of CSS is to allow the designer to define a style (a list of formatting details such as fonts, sizes, and colors) and then, to apply it to one or more portions of one or more HTML pages using a selector. Let’s look at a basic example to see how this is done.
CSS的基本目的是允许设计人员定义样式(格式详细信息列表，如字体，大小和颜色)，然后使用选择器将其应用于一个或多个HTML页面的一个或多个部分。 让我们看一个基本的例子，看看如何做到这一点。
Consider the following HTML document outline:
考虑以下HTML文档大纲：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title>A Simple Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body> <h1><font face="sans-serif" color="#3366CC">First Title</font> </h1> <p>...</p> <h2><font face="sans-serif" color="#3366CC">Second Title</font> </h2> <p>...</p> <h2><font face="sans-serif" color="#3366CC">Third Title</font> </h2> <p>...</p> </body> </html>This document contains three headings, created using <h1> and <h2> tags. To make these headings stand out more, I used <font> tags to display them in a light blue, sans-serif font (Windows browsers will display them in Arial, for example). Notice the repetition involved, even at this basic level. I had to specify the details of the font I wanted three separate times. Wouldn’t it make sense to define the font just once, then apply it to my headings? Here’s the CSS version:
本文档包含使用<h1>和<h2>标记创建的三个标题。 为了使这些标题更加突出，我使用了<font>标记以浅蓝色无衬线字体显示它们(例如，Windows浏览器将以Arial显示它们)。 注意所涉及的重复，即使在此基本级别上也是如此。 我必须指定我想要的字体的详细信息三个不同的时间。 仅定义一次字体，然后将其应用于我的标题是否有意义？ 这是CSS版本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title>A Simple Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> h1, h2 { font-family: sans-serif; color: #3366CC; } </style> </head> <body> <h1>First Title</h1> <p>...</p> <h2>Second Title</h2> <p>...</p> <h2>Third Title</h2> <p>...</p> </body> </html>All the magic lies between the <style> tags in the <head> of the document, where we define our light blue, sans-serif font and apply it to all <h1> and <h2> tags in the document. Don’t worry about the syntax; I’ll explain it in detail in a moment. Meanwhile, the <font> tags have completely disappeared from the <body>, leaving our document looking a lot less cluttered. Changes to the style definition at the top of the page will affect all three headings, as well as any other headings that are added to the page.
所有的魔术都位于文档<head>中的<style>标记之间，在这里我们定义了淡蓝色的无衬线字体，并将其应用于文档中的所有<h1>和<h2>标记。 不用担心语法。 我将在稍后详细解释。 同时， <font>标记已从<body>完全消失，从而使我们的文档看起来不那么混乱。 对页面顶部样式定义的更改将影响所有三个标题以及添加到页面的任何其他标题。
Now that you have an idea of what CSS does, let me explain the different ways of using CSS styles in your HTML documents. The simplest way of putting CSS styles into your Web pages is to use the <style> tag, as I did in the example above. This lets you declare any number of CSS styles by placing them inside the <style> tag, as follows:
现在您已经了解了CSS的功能，让我解释一下在HTML文档中使用CSS样式的不同方法。 将CSS样式放入Web页面的最简单方法是使用<style>标记，就像我在上面的示例中所做的那样。 这使您可以通过将它们放置在<style>标记内来声明任意数量CSS样式，如下所示：
<style type="text/css"> CSS Styles here </style>The type attribute specifies the language that you’re using to define your styles. CSS is the only language in wide use as of this writing, and is indicated with the value text/css.
type属性指定用于定义样式的语言。 在撰写本文时，CSS是唯一被广泛使用的语言，并以值text/css 。
While it’s nice and simple, the <style> tag has one major disadvantage. Specifically, if you want to use a particular set of styles throughout your site, you’ll have to repeat those style definitions in a <style> tag at the top of every one of your site’s pages.
虽然很简单，但<style>标记有一个主要缺点。 具体来说，如果要在整个网站中使用一组特定的样式，则必须在每个网站页面顶部的<style>标记中重复这些样式定义。
A more sensible alternative is to put those definitions in a plain text file (usually given a .css filename), then link your documents to that file. Any changes to the style definitions in that one file will affect all the pages that link to it. This achieves the objective of site-wide style definitions mentioned earlier.
另一个更明智的选择是将这些定义放入纯文本文件(通常使用.css文件名)，然后将文档链接到该文件。 对一个文件中的样式定义所做的任何更改都会影响链接到该文件的所有页面。 这样可以达到前面提到的站点级样式定义的目的。
To link a document to a CSS text file (say, styles.css), place a <link> tag in the document’s header:
要将文档链接到CSS文本文件(例如， styles.css )，请在文档的标题中放置一个<link>标记：
<link rel="stylesheet" type="text/css" href="styles.css" />Let’s return to the original example in which three headings shared a single style; that document would now look like this:
让我们回到原始示例，其中三个标题共享一个样式。 该文档现在看起来像这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title>A Simple Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <h1>First Title</h1> <p>...</p> <h2>Second Title</h2> <p>...</p> <h2>Third Title</h2> <p>...</p> </body> </html>The styles.css file would contain the style definition:
styles.css文件将包含样式定义：
h1, h2 { font-family: sans-serif; color: #3366CC; }As with an image file, you can reuse this styles.css file across as many pages as you need. Not only will it save you typing, it also ensures a consistent look to the headings across your entire site.
与图像文件一样，您可以根据需要在多个页面上重用此styles.css文件。 它不仅可以节省您的键入时间，还可以确保整个网站的标题保持一致。
Every CSS style definition has two components: the selector, which defines the tags to which the style will be applied, and the properties, which specify what the style actually does. In the previous example, the selector was h1, h2, specifying that the style should apply to all <h1> and <h2> tags. The remainder of the style definition comprised the attributes, specifying the font and color that should be applied by the style. In this section, I’ll describe the basic CSS selector types and give examples of each.
每个CSS样式定义都有两个组成部分： 选择器 (用于定义将应用样式的标签)和属性 (用于指定样式的实际作用)。 在上一个示例中，选择器为h1 ， h2 ，指定样式应应用于所有<h1>和<h2>标记。 样式定义的其余部分包含属性，这些属性指定样式应使用的字体和颜色。 在本节中，我将描述基本CSS选择器类型并给出每种示例。
Tag Selectors
标签选择器
The most basic form of selector is that which we have already seen. By naming a particular HTML tag, you can apply a style definition to every occurrence of that tag in the document. This is often used to set the basic styles that will appear throughout a Website. For example, the following might be used to set the default font for a Website:
选择器的最基本形式是我们已经看到的形式。 通过命名特定HTML标记，可以将样式定义应用于文档中该标记的每次出现。 这通常用于设置将在整个网站中显示的基本样式。 例如，以下可能用于设置网站的默认字体：
body, p, td, th, div, blockquote, dl, ul, ol { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color: #000000; }This rather long selector is a list of tags, all of which will take on the style definition (font, size, and color). In theory, the <body> tag is all that’s needed (as all the other tags appear inside the <body> tag, and would thus inherit its properties), but many browsers don’t properly carry style properties into tables and other elements. Thus, I specified the other elements for the sake of completeness.
这个相当长的选择器是一个标签列表，所有标签都采用样式定义(字体，大小和颜色)。 从理论上讲， <body>标记就足够了(因为所有其他标记都出现在<body>标记内，并因此会继承其属性)，但是许多浏览器没有将样式属性正确地携带到表和其他元素中。 因此，为了完整起见，我指定了其他元素。
Pseudo-Class Selectors
伪类选择器
The formatting of the <a> tag in HTML is more versatile than is the formatting of most other tags. By specifying link, vlink, and alink attributes in the <body> tag, you can set the colors for the various states of the links in your page (unvisited, visited, and being clicked on, respectively). CSS provides its own way of doing this, and adds a fourth state that’s applied when the mouse hovers over the link. Consider the following example:
HTML中<a>标记的格式比大多数其他标记的格式更通用。 通过在<body>标记中指定link ， vlink和alink属性，可以为页面中链接的各种状态(分别是未访问，访问和点击)设置颜色。 CSS提供了自己的方式，并添加了当鼠标悬停在链接上时应用的第四个状态。 考虑以下示例：
a:link { color: #0000FF; } a:visited { color: #FF00FF; } a:hover { color: #00CCFF; } a:active { color: #FF0000; }This code contains four CSS style definitions. Each of the selectors uses what is termed a pseudo-class of the <a> tag. The first, link, applies to unvisited links only, and specifies that they should be blue. The second, visited, applies to visited links, and makes them magenta. The third style definition, hover, overrides the first two by making links light blue when the mouse is moved over them, whether they’ve been visited or not. The final style definition makes links red when they’re clicked on. Because active appears last, it overrides the first three, so it will take effect whether the links have been visited or not, and whether the mouse is over them or not.
此代码包含四个CSS样式定义。 每个选择器都使用<a>标记的伪类 。 第一个是link ，仅适用于未访问的链接，并指定它们应为蓝色。 第二个， visited ，应用于访问的链接，并使它们变为洋红色。 第三个样式定义hover ，通过将链接移到鼠标上(无论是否访问过)时，链接变为浅蓝色，来覆盖前两个。 最终的样式定义使链接在单击时变为红色。 由于active显示在最后，因此它会覆盖前三个，因此无论链接是否被访问以及鼠标是否位于链接上都将生效。
Class Selectors
类选择器
Assigning styles to tags is all well and good, but what happens if you want to assign different styles to identical tags occurring in different places within your document? This is where CSS classes come in. Consider the following style, which makes all paragraph text in the page blue:
为标签分配样式是一件好事，但是，如果您想为文档中不同位置出现的相同标签分配不同样式，会发生什么呢？ 这是CSS 类出现的地方。请考虑以下样式，该样式会使页面中的所有段落文本变为蓝色：
p { color: #0000FF; }Now, what if you had a sidebar on your page with a blue background? You wouldn’t want text in the sidebar to be blue as well, because it would be invisible! What you need to do is define a class for your sidebar text, then assign a CSS style to that class:
现在，如果您的页面上有一个带有蓝色背景的侧边栏怎么办？ 您也不希望边栏中的文本也为蓝色，因为它是不可见的！ 您需要做的是为侧边栏文本定义一个类，然后为该类分配CSS样式：
p { color: #0000FF; } .sidebar { color: #FFFFFF; }This second rule uses a class selector that indicates that the style should be applied to any tag of the sidebar class. The period indicates that a class is being named, instead of a tag. To create a paragraph of text of the sidebar class, you add a class attribute to the tag:
第二条规则使用类选择器，该选择器指示应将样式应用于sidebar类的任何标签。 句点表示正在命名一个类，而不是标签。 要创建sidebar类的文本段落，请向标签添加类属性：
<pclass="sidebar">This text will be white, as specified by the CSS style definitions above.</p>Now, what if there were links in your sidebar? By default, they’d be rendered just like any other links in your page; however, add a class="sidebar" attribute to the tag, and they’ll turn white, too:
现在，如果您的侧边栏中有链接，该怎么办？ 默认情况下，它们的呈现方式与您页面中的其他链接一样； 但是，向标签添加class="sidebar"属性，它们也会变成白色：
<p class="sidebar">This text will be white, <a class="sidebar" href="link.html">and so will this link</a>.</p>That’s pretty neat, but what if you wanted to make the links stand out a bit more by displaying them in bold text? Adding the bold text attribute to the sidebar class will make your whole sidebar bold. You need a CSS selector that selects links of the sidebar class only. By combining a tag selector with a class selector, you can do exactly that:
那很整洁，但是如果您想通过以粗体显示的链接使链接更加突出呢？ 将bold文本属性添加到sidebar类将使整个侧边栏变为粗体。 您需要一个CSS选择器，仅选择侧边栏类的链接。 通过将标签选择器与类选择器结合使用，您可以做到这一点：
p { color: #0000FF; } .sidebar { color: #FFFFFF; } a.sidebar:link, a.sidebar:visited { font-weight: bold; }Note that we’ve also used the :link and :visited pseudo-classes to specify <a> tags that are links (as opposed to <a name="..."> tags that are not).
请注意，我们还使用了:link和:visited伪类来指定作为链接的<a>标记(而不是不是链接的<a name="...">标记)。
Note also that our sidebar links are still white – both of the styles pertaining to the sidebar class apply to our sidebar links. If we specified a different color in the third style, however, links would adopt that new color, because the third selector is more specific, and CSS styles are applied in order of increasing selector specificity.
还要注意，我们的侧边栏链接仍然是白色的–与侧边栏类有关的两种样式都适用于我们的侧边栏链接。 但是，如果我们在第三种样式中指定了另一种颜色，则链接将采用该新颜色，因为第三种选择器更加具体，并且CSS样式按照选择器特异性增加的顺序应用。
Incidentally, the process of applying multiple styles to a single page element is called, and is where Cascading Style Sheets got their name.
顺便说一句，将多个样式应用于单个页面元素的过程称为“级联样式表”的名称。
Contextual Selectors
上下文选择器
If your sidebar happens to contain a lot of links, it becomes tedious to assign the sidebar class to every single <a> tag. Wouldn’t it be nice to use a selector to select any link that appeared inside a paragraph of the sidebar class? That’s what contextual selectors are for: selecting a tag based on its context, that is, based on the tag(s) that contain it.
如果您的侧边栏碰巧包含很多链接，则将sidebar类分配给每个<a>标记将变得很繁琐。 使用选择器选择出现在侧边栏类的段落内的任何链接不是很好吗？ 这就是上下文选择器的作用：根据标签的上下文(即，基于包含标签的标签)选择标签。
Here’s the new CSS:
这是新CSS：
p { color: #0000FF; } .sidebar { color: #FFFFFF; } p.sidebar a:link, p.sidebar a:visited { font-weight: bold; color: #FFFFFF; }And here’s the updated HTML:
这是更新HTML：
<p class="sidebar">This text will be white, <a href="link.html">and so will this link</a>.</p>As you can see, a contextual selector provides a list of selectors separated by spaces that must match tags "from the outside in." In this case, since the link (matched by the a:link or a:visited selector) occurs inside a sidebar paragraph (matched by the p.sidebar selector), the style applies to the link.
如您所见，上下文选择器提供了一个选择器列表，这些选择器之间用空格隔开，这些空格必须与“从外到内”的标记匹配。 在这种情况下，由于链接(与a:link或a:visited选择器匹配)出现在侧边栏段落(与p.sidebar选择器匹配)内，因此样式适用于链接。
Note that, to keep the link white, we had to add that color to the CSS attributes for the links, as the style for the sidebar class no longer applies to the links.
请注意，为了使链接保持白色，我们必须将该颜色添加到链接CSS属性中，因为sidebar类的样式不再适用于链接。
ID Selectors
ID选择器
Similar to class selectors, ID selectors are used to select one particular tag, rather than a group of tags. The tag that you select is identified by an ID attribute as follows:
类似于类选择器，ID选择器用于选择一个特定的标签，而不是一组标签。 您选择的标签由ID属性标识，如下所示：
<p id="sidebar1">This paragraph is uniquely identified by the ID "sidebar1".</p>An ID selector is simply the ID preceded by a hash (#). Thus, the following style will make the above paragraph white:
ID选择器只是在ID前面加上一个井号(＃)。 因此，以下样式会使上面的段落变为白色：
#sidebar1 { color: #FFFFFF; }ID selectors can be used in combination with the other selector types. The following style, for example, applies to unvisited links appearing in the sidebar1 paragraph:
ID选择器可以与其他选择器类型结合使用。 例如，以下样式适用于出现在sidebar1段落中的未访问链接：
#sidebar1 a:link { font-weight: bold; color: #FFFFFF; }Other selector types exist, but they’re not widely used. Support for them in some browsers (especially Netscape 4) is buggy at best.
存在其他选择器类型，但并未广泛使用。 在某些浏览器(尤其是Netscape 4)中对它们的支持充其量是最好的。
CSS Properties
CSS属性
In the examples used so far in this chapter, we’ve used several common CSS properties like color, font-family, font-size, and font-weight. In the rest of the book, we’ll be using these properties – and a lot more.
在本章到目前为止使用的示例中，我们使用了一些常见CSS属性，例如颜色，字体系列，字体大小和字体粗细。 在本书的其余部分中，我们将使用这些属性–以及更多。
This chapter has given you a taste of CSS and its usage at the most basic level. If you haven’t used CSS before, but have a basic understanding of the concepts discussed in this chapter, you should be able to start using the examples in this book. The examples in the early chapters of this book are somewhat simpler than those found near the end, so, if you haven’t worked with this technology before, you might want to begin with the earlier chapters. These will build on the knowledge you gained in this chapter to get you using and, I hope, enjoying CSS.
本章向您介绍了CSS及其最基本的用法。 如果您以前没有使用过CSS，但是对本章中讨论的概念有基本的了解，那么您应该可以开始使用本书中的示例。 本书前几章中的示例比末尾的示例要简单一些，因此，如果您以前从未使用过该技术，则可能要从前几章开始。 这些将以您在本章中获得的知识为基础，以使您能够使用CSS，并且希望您喜欢CSS。
Watch out for the next chapter of The CSS Anthology: 101 Essential Tips, Tricks & Hacks — it’ll be on SitePoint soon. Or, if you can’t wait, download the fist 4 chapters free now.
请注意“ CSS Anthology：101基本技巧，窍门和技巧”的下一章-即将在SitePoint上发布。 或者，如果您等不及了，请立即免费下载《拳头》第4章 。
翻译自: https://www.sitepoint.com/css-anthology-tips-tricks-1/
css技巧
