Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to modify the font color of css. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

In css, you can use the color property to modify the font color, which sets the color of the text by adding "color: color value;" to the element that contains the font text. Color values can be defined using color names, hexadecimal values, RGB or RGBA values, HSL, or HSLA values.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

If you want to change the color of a font in css, you can use the color property.

Body {color: red} h2 {color: # 00ff00} p. Ex {color: rgb (0 0,255)} this is heading 1

This is an ordinary paragraph. Notice that the text of this paragraph is red. The default text color on this page is defined in the body selector.

This paragraph defines the class= "ex". The text in this paragraph is blue.

Effect picture:

Description:

The color attribute can be used to set the color of the text; this attribute sets the foreground color of an element (in the HTML representation, the color of the element's text).

Syntax:

Color: color valu

Css color values are written as follows:

1. Use the color name

Although about 184 colors have been named, they are really supported by various browsers, and there are only 16 color names recommended by the CSS specification, as shown in the following table.

Table the color names recommended by the 1:CSS specification

/ * Color black pure black silver light gray navy light blue blue light blue green dark green lime light green teal indigo blue aqua deep red red scarlet purple deep purple fuchsia magenta olive brown yellow Yellow bright yellow gray dark gray white shell white * /

It is not recommended to use color names in web pages, especially on a large scale, to avoid some color names not being parsed by browsers or differences in the interpretation of colors by different browsers.

2. Hexadecimal color

The hexadecimal symbols # RRGGBB and # RGB (for example, # ff0000). "#" is followed by 6 or 3 hexadecimal characters (0-9, Amurf).

This is the most commonly used color selection method, such as:

# f03#F03#ff0033#FF0033

RGB, red-green-blue (red-green-blue (RGB))

Specifies that the color value is the color of the rgb code, and the function format is rgb (R _ Magi G ~ B). The value can be an integer or a percentage of 0-255.

Rgb (255pc0551) rgb (255p0pje 51) rgb (100% recollection 0% meme 20%) rgb (100% meme 0% meme 20%)

Expansion: RGBA, Red-Green-Blue-Alpha (RGBa)

RGBA extends the RGB color mode to include alpha channels that allow you to set the transparency of a color. A means transparency: 0 = transparent; 1 = opaque.

Rgba / * 10% opaque * / rgba / * 40% opaque * / rgba / * 70% opaque * / rgba / * opaque, i.e. red * /

4. HSL, hue-saturation-brightness (Hue-saturation-lightness)

The hue (Hue) represents an angle of the color ring (that is, a ring that represents a rainbow).

Saturation and lightness are expressed as percentages.

100% is full saturation, while 0% is a grayscale.

100% lightness is white, 0% lightness is black, and 50% lightness is "average".

Hsl (120100% 25%) / * dark green * / hsl (120100% 50%) / * green * / hsl (120100% 25%) / * light green * /

Expansion: HSLA, hue-saturation-lightness-alpha (HSLa)

HSLa extends from the HSL color mode and includes alpha channels that specify the transparency of a color. A means transparency: 0 = transparent; 1 = opaque.

Hsla (240100% beacon 50% mine0.05) / * 5% opaque * / hsla (240100% pc50%, 0.4) / * 40% opaque * / hsla (240100% 50%, 0.7) / * 70% opaque * / hsla (240100% 50%, 1) / * completely opaque * /

5 、 transparent

A special color value that represents a transparent color. It can be used directly as a color.

For example: color:transparent sets the font color to transparent

Body {background:hsl (270100% 50%)} p {font-size:50px; font-family: "boldface"; / * browser private property * /-webkit-text-fill-color:transparent;/* sets text transparency * / / * use rgba (0memo 0re0); you can also implement full transparent mode * /-webkit-text-stroke:2px yellow / * set the text transparently, and then set a border to achieve hollowed-out words * / / * W3C standard attributes * / / * text-fill-color:transparent;*/ / * text-stroke:2px yellow;*/}

2012 has passed, the busiest is Yuanfang, what do you think?

Note: when using color to set the color of a text font, you need to use a reasonable matching of background color and text color, which can improve the readability of the text.

On "css how to modify font color" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.