Table of Contents
Is color a new attribute in css3?
Home Web Front-end Front-end Q&A Is color a new attribute in css3?

Is color a new attribute in css3?

Apr 22, 2022 pm 05:10 PM
css

Color is not a new attribute in CSS3. The color attribute has been used since CSS1. The color attribute is used to specify the color of text. You can use color names, hexadecimal characters, RGB (red, green, and blue), RGBA, HSL (Hue, Saturation, Lightness) and HSLA methods to set colors.

Is color a new attribute in css3?

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

Is color a new attribute in css3?

Color is not a new attribute in css3

color version: CSS1

The color attribute specifies the color of the text.

This attribute sets the foreground color of an element (in HTML representation, the color of the element's text); raster images are not affected by color. This color also applies to all borders of the element, unless overridden by border-color or another border-color property.

To set the foreground color of an element, the easiest way is to use the color attribute.

Color values ​​can be set in the following ways:

  • Color name Color name, such as red, blue, brown, lightseagreen, etc., are not case sensitive .​

  • Hex Hexadecimal symbols #RRGGBB and #RGB (such as #ff0000). "#" followed by 6 or 3 hexadecimal characters (0-9, A-F).

  • RGB, red-green-blue (RGB) specifies the color value as the color of the rgb code, the function format is rgb(R,G,B), The value can be an integer or percentage from 0-255.

  • RGBA, Red-Green-Blue-Alpha (RGBa) RGBa extends the RGB color mode to include an alpha channel, allowing you to set the transparency of a color. a represents transparency: 0=transparent; 1=opaque.

  • HSL, hue-saturation-lightness (Hue-saturation-lightness) Hue (Hue) represents an angle of the color wheel (that is, a ring representing a rainbow).

Saturation and brightness 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 "normal".

  • HSLA, Hue-Saturation-Lightness-Alpha (HSLa) HSLa extends from the HSL color mode and includes an alpha channel, which can specify the transparency of a color. a represents transparency: 0=transparent; 1=opaque.

The example is as follows:

1

2

3

4

5

body {color: #92a8d1;}

body {color: rgb(255,0,51);}

body {color: rgba(255,0,0,0.7);}

body {color: hsl(120,100%,25%) ;}

body {color: hsla(240,100%,50%, 0.7);}

Copy after login

The output result is as follows:

Is color a new attribute in css3?

Is color a new attribute in css3?

Is color a new attribute in css3?

Is color a new attribute in css3?

Is color a new attribute in css3?

##(Learning video sharing:

css video tutorial)

The above is the detailed content of Is color a new attribute in css3?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does placeholder mean in vue What does placeholder mean in vue May 07, 2024 am 09:57 AM

What does placeholder mean in vue

How to write spaces in vue How to write spaces in vue Apr 30, 2024 am 05:42 AM

How to write spaces in vue

How to get dom in vue How to get dom in vue Apr 30, 2024 am 05:36 AM

How to get dom in vue

What does span mean in js What does span mean in js May 06, 2024 am 11:42 AM

What does span mean in js

What does rem mean in js What does rem mean in js May 06, 2024 am 11:30 AM

What does rem mean in js

How to introduce images into vue How to introduce images into vue May 02, 2024 pm 10:48 PM

How to introduce images into vue

What is the function of span tag What is the function of span tag Apr 30, 2024 pm 01:54 PM

What is the function of span tag

What language is the browser plug-in written in? What language is the browser plug-in written in? May 08, 2024 pm 09:36 PM

What language is the browser plug-in written in?

See all articles