One of the most important themes in CSS is the theme of values and units of measurement. After all, this knowledge are the basis of any site. With them we can color the text of the section, adjust line spacing, or set this paragraph indented 10px from the rest of the page. For all this we need a strong and workable tool, which we will discuss with you. A lot of material, so we decided to split this topic into several components. Today we offer you the color and color models, methods for their assignments and reference when selecting the preferences and describe their capabilities.
But you first need to pay attention to the basic components of the values in CSS - the numbers and percentages. It is through these assistants CSS is a really powerful tool.
Numbers
In CSS, there are two types of numbers: integers (integer) and real (real). These types of numbers are the basis of all other types of values, but sometimes as values and can serve many other formats, which we discuss later. Starting with version CSS2.1, any real number is an integer with a floating decimal point. Also, numbers can be either positive or negative. It all depends on the properties.
Percentages
Percentage values - calculated real number. Percentage values are always expressed relative to another value. (For example: at the heart of "rubber" layout are percentages, calculated, and the magnitude of which depends on the size of the monitor visitor.)
Color
Probably the most popular question that I asked the children after the first acquaintance with html - «How can I change the background color / section / title?". And here we are faced with very interesting things. In ordinary life, we need only look at an object or structure, to say what color. And if a man is far from drawing, color models or design in general, the more often he would call about 20 colors. If we begin to explore this area, it turns out that the names of colors - great variety. How is it possible to describe all the colors in CSS? To do this, we and you have several options -
- using a color model RGB;
- using key words;
- color model used RGBA;
- use of percentages;
- to use the hexadecimal color model set.
Let's talk about each method in detail.
RGB color model
The basis of this model is the relationship of the three main constituent colors - Red (red), Green (Green), Blue (blue). This model is a major opportunity to pass virtually any color monitors and televisions, which we use in everyday life. If, for example, to disassemble your old monitor, you can see the three electron guns. These guns give us the opportunity to see the color, giving off at each point on the screen of electron beams with different intensity. It is at these points the intensity of the beam is combined, and we get a different color brightness. Each point is called a pixel. Though the technology far ahead, but the color output is realized by traditional principles.
RGB color model in CSS allows us to manage each of these three colors, changing only their intensity. Functional RGB recording format gives us the ability to set the color as a percentage from 0% to 100%, and in an integer value from 0 to 255.
To set the white color, we must write the following - rgb (100%, 100%, 100%), and black, respectively, rgb (0%, 0%, 0%). If it is we want to present the colors in the numerical value, then white - rgb (255, 255, 255), black - rgb (0, 0, 0).
To specify a green color, we will write rgb (0, 100%, 0), but if we want to have a light green color, it is enough to write this: rgb (0, 50%, 0). In this example, we have completely abandoned the red and blue colors. I have only the brightness of the green. If each thread, we define a color, then here is just a combination of magic happens.
Keywords
As we all know, every color in real life given your keyword (which is why green - a green :)). So in CSS: in order to meet the needs of people who do not want to understand all the charm of flowers, the base was introduced, which contained the key words: green, purple, white, yellow, etc. In total there are 17 CSS2.1 specification of colors, 16 of them - have been described in HTML4.01 plus orange. Here are the colors:
Of course, you can find a color that is not described in the specification and the browser displays it to us, such as lightgreen (Thanks to Eric Meyer). Nothing unusual about that, because most browsers support more than 140 colors, but here's the problem - if the key colors are displayed in the browser the same way, the probability that such a color as lightgreen, will be equally bright green everywhere, is very small.
h1 { color: green; }
h2 { color: aqua; }
h3 { color: purple; }
In fact, such an approach to specifying the colors are not really justified, even though it is simple, but little functionality makes it a virtually untapped.
RGBA color model
RGBA or Red Green Blue Alpha - is an enhanced model of the RGB, which is added to the value of the alpha channel, which allows us to specify the opacity of the color.
Alpha channel is responsible for the opacity of the color, which is given a range of numbers from 1 to 0. For a fully opaque color is enough to specify a value for total transparency - 0.
Usage is simple enough, take a green color and make it semi-transparent:
body {
background: rgba(24, 191, 36, .5);
}
In the semi-transparent colors in this example corresponds to the value of .5 (or 0.5, but 0 can be omitted). Of course, you can use the opacity, but he has his own distinction, which will be discussed in the article «RGBA and OPACITY - the difference being that".
RGBA on properties very similar to the image format. png, and therefore have similar problems displaying in browsers. IE6 makes them totally transparent.
RGBA color model provides tremendous opportunities for creativity. This model is recognized as the main specification CSS3. With its help, we can define a gradient, without the help of programs such as photoshop.
The percentages
We have already seen how you can specify colors using the interest, but would like to clarify here what time. Percentages, we can write the fractional numbers, for example, rgb (24.5%, 10.75%, 91.2%). How, then, comes the browser? He either ignores the fractional part, and uses only integer values, or rounding them up to the nearest integer. Then the example would look like this: rgb (25%, 11%, 91%). It also is important to remember the limits of the values (0 .. 100%, 0 .. 255). For the moment we try to specify the values that go beyond these boundaries, as we have them back. This record rgb (124%, 500%, 1000%) or rgb (-23, -257, 342) will be to understand how rgb (100%, 100%, 100%) and rgb (0, 0, 255), respectively. It is important to remember about this and not to violate these rules.
Also, for rounding and transferring of interest in a number of the specification uses a simple formula: if we know the exact percentage of each of the levels of RGB, then to get the final values, we just need to make a proportion of the number 255. (That is, take a percentage, multiply by 255 and divided by 100, the resulting value rounded to the nearest whole number).
Model hex (hex notation)
Probably the most popular model to date. Due to the problematic use of RGBA for old and do not understand browsers, hex color model of the job, or simply hex-model will help us even a single year. Hex model is as follows - # RRGGBB, and is defined by hexadecimal numbers in the range from 00 to FF. To be completed only by integers, the fractional part is missing. It is also allowed a shorter record - # RGB, if we choose the color, the value of which is as follows: # 666666, # AAFF88. Reduced entry will look like this: # 666 and # AF8. The browser simply duplicating each of the values. But here it must be remembered that the records of the form # 505050 can not be reduced.
All models are somehow lead to one thing - change the color on the page, background, etc. But the hex-use model is preferable. Short and accessible record, a huge range of colors, the ability to write short. That it is so popular, but do not forget the rgba. This model gives us the opportunity to create a truly progressive code, and, therefore, and projects. Why are we focused on this issue so much attention? Color plays a very important role when viewing the page, so knowing the subtleties of the job color models, we can create interesting and pleasant things, and thus know how it works from the inside.
.png "Model hex (hex notation)")
