AtoZCSS快速提示：利用Color属性

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. View the full screencast and transcript for color here.

本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 查看全部截屏和成绩单color 在这里 。

Welcome to our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) beginning with a letter from the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the color property for you.

欢迎来到我们的AtoZ CSS系列&＃xff01; 在本系列中&＃xff0c;我将探索不同CSS值(和属性)&＃xff0c;以字母中的一个字母开头。 我们知道有时屏幕截图还不够&＃xff0c;在本文中&＃xff0c;我为您添加了有关color属性的新快速提示/课程。

C代表color (C is for color)

The color property is used to change the color of text on the page, but what about the color of selected text?

color属性用于更改页面上文本的颜色&＃xff0c;但是所选文本的颜色呢&＃xff1f;

Using the ::selection pseudo element, text highlighted with the mouse can be styled. There are only a handful of properties that can be altered when styling the selected text. These are limited to:

使用::selection伪元素&＃xff0c;可以设置用鼠标突出显示的文本的样式。 在样式选定文本时&＃xff0c;只有少数几个属性可以更改。 这些仅限于&＃xff1a;

• color

  color

• background-color

  background-color

• cursor

  cursor

• outline

  outline

• text-decoration

  text-decoration

• text-shadow

  text-shadow

Even though you’re limited in the properties you can style with ::selection, you can still use the cascade to set different selection colors for different parts of the page.

即使您可以使用::selection样式的属性有限&＃xff0c;您仍然可以使用级联为页面的不同部分设置不同的选择颜色。

See the Pen tip-c by SitePoint (&＃64;SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( &＃64;SitePoint )提供的Pen tip-c 。

Test out this feature by highlighting some text in each of the paragraphs in the Codepen result.

通过在Codepen结果的每个段落中突出显示一些文本来测试此功能。

供应商前缀 (Vendor prefixes)

In Firefox the ::selection pseudo element still needs a -moz prefix and due to the way pseudo elements are parsed, a separate selector and block of styles is required; comma separating the two selectors won’t work.

在Firefox中&＃xff0c; ::selection伪元素仍然需要-moz前缀&＃xff0c;并且由于解析伪元素的方式不同&＃xff0c;因此需要单独的选择器和样式块。 逗号分隔两个选择器将不起作用。

/* this won&＃39;t work */
::selection,
::-moz-selection {
color: white;
background: green;
}
/* do this instead */
::selection {
color: white;
background: green;
}
::-moz-selection {
color: white;
background: green;
}

颜色发生器 (Color Generators)

There are a couple of great places to find and create color schemes for your projects. The following are some that I’ve found useful in the past:

有几个不错的地方可以找到和创建项目的配色方案。 以下是我过去发现有用的一些内容&＃xff1a;

• https://color.adobe.com/

  https://color.adobe.com/

• http://coolors.cc/

  http://coolors.cc/

• http://paletton.com/

  http://paletton.com/

• http://paintbycode.github.io/gradient-generator/

  http://paintbycode.github.io/gradient-generator/

翻译自: https://www.sitepoint.com/atoz-css-color/