:CSS-color settings-empirical point of view免费ppt模版下载-道格办公

CSS-color settings

The color setting must be very familiar! In CSS, you can use color values ​​to set the color of an element. Commonly used color values ​​are as follows: 1. Keyword color value: use predefined color keywords, such as red (red), blue (blue), green (green) a

Long time no see everyone! I'm back with an update! Thank you all for following my account! Comparing

I want to try the newly opened function of inserting advertisements. The smart inserting function is enabled. Don’t be confused by advertisements and don’t know where the real pictures are.

Everyone should be familiar with color settings, and you will be exposed to setting background colors or text colors.

When I first came into contact with color settings, I was often depressed because I didn’t know enough English about colors. When I set them, they were all red, green , blue and other colors, superficial words like the color of a beautiful background or text must be not enough! Not enough! Not enough!

Set color by color name

Hahaha Although I said above that setting by color name is superficial, it also has a name in today's tutorial!

Although this method is not easy (basically impossible) to get the interface effect you want, it is very convenient to use it for testing! And the colors are striking! So still need to know!

Personally, I don’t think it’s necessary to fight with English color names. It’s good to know a few basic vocabulary for easy use.

<p >red'>Set color by color name</p>

Explanation: The style of the p tag is: the background color is set to red

The effect is as follows

Set the color by hexadecimal

You may have seen this color setting method #FFA900, #F00.

It seems to be a color setting method that can be surprised or frightened by typing on the keyboard. As for why some are 6 characters behind #, and some are 3 characters after #, I don’t understand, and I don’t understand what characters can be used to represent colors.


Here we need to know the three primary colors of red, green and blue. You can search for the specific concepts. The RGB we mentioned later is also redR ED GreenGREEN BlueBLUE is composed of the initials of the three primary colors.


Then we want to talk about the hexadecimal system. We use the decimal system in math class, with a decimal number, and the hexadecimal system, as the name implies, means a decimal number. [0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F] This is 0-15 in hexadecimal.


Colors are defined by a hexadecimal notation (of the form #FFA900) consisting of red, green and blue values ​​(RGB). The minimum value of each color is 0 represented by hexadecimal #00, and the maximum value is 255 represented by hexadecimal #FF.


So it is not just to type 6 letters on the keyboard to get the color. The letters are the representation of 10~15 in the decimal system in the hexadecimal system.


<p >#FF0000</p>


<p >#F00</p>


Explanation: The style of the p tag is: the background color is set to #FFFF00

The style of the p tag is: the background color is set to #FF0


The effect is as shown below

You can see that they have the same color, and every two digits of the hexadecimal representation of the color can be omitted, so there will be a color represented by 3 characters.

Set color by RGB

We mentioned the three primary colors and the hexadecimal system above, The minimum value of each color is 0 represented by hexadecimal #00, and the maximum value is 255 represented by ten #FF in hexadecimal. The way of RGB is just another form.

When I write small webpages, I like to use RGB to set the color, because most screenshot tools provide the RGB code of the color, which is a good reference for color matching.

<p >

RGB set the color

</p>

Explanation: The style of the p tag is: the background color is set to rgb(111,111,011)


The effect is as follows

Set color via RGBA

RGBA has one more A than RGB. This A means to add transparency to the color.

RGBA (red, green, blue, alpha) The Alpha parameter is between 0 and 1.

0 is completely transparent, 1 is completely opaque.


<p>

The color of the RGB setting

</p>

<p>

RGBA set the color

</p>

Explanation: The style of the p tag is: the background color is set to rgb(111,111,011)

The style of the p tag is: the background color is set to rgba(111,111,011,0.5)


The effect is as follows

Comparing the above picture, we can see the effect of setting the transparency to 0.5.

Thank you for watching this update! (✪ω✪)

I will try my best to write more, and I hope to find time for a bigger one. I always write how to write the navigation bar, and I want to overcome procrastination and write a middle block.

Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/CSScolor%20settings.html

Like (810)
Reward 支付宝扫一扫 支付宝扫一扫
single-end

Related Suggestion