Lecture
Inheritance refers to the transfer of formatting rules for elements that are inside others. Such elements are children, and they inherit some of the style properties of their parents, within which they are located.
Let's sort inheritance on the example of the table. A feature of the tables can be considered a strict hierarchical structure of tags. First comes the <table> container inside which <tr> tags are added, and then comes the <td> tag. If you set the text color in the styles for the TABLE selector, it is automatically set for the contents of the cells, as shown in Example 18.1.
Example 18.1. Color Inheritance
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Наследование</title> <style> TABLE { color: red; /* Цвет текста */ background: #333; /* Цвет фона таблицы */ border: 2px solid red; /* Красная рамка вокруг таблицы */ } </style> </head> <body> <table cellpadding="4" cellspacing="0"> <tr> <td>Ячейка 1</td><td>Ячейка 2</td> </tr> <tr> <td>Ячейка 3</td><td>Ячейка 4</td> </tr> </table> </body> </html> In this example, the entire table is set to red text, so it is also used in the cells, because the <td> tag inherits the <table> tag properties. It should be understood that not all style properties are inherited. So, the border sets the frame around the table as a whole, but not around the cells. Similarly, the value of the background property is not inherited. Then why is the background color of the cells in this example dark, since it is not inherited? The fact is that the background property has transparent as its default value, that is, transparency. Thus, the background color of the parent element "peeps" through the child element.
To determine whether the value of a style property is inherited or not, you need to look in the CSS Properties Reference and look there. Connecting your intuition in such a case is useless, it may fail.
Inheritance allows you to set the values of some properties once, defining them for parents of the upper level. Suppose you want to set the color and font for the main text. It is enough to use the body selector, add the desired properties for it, and the text color inside the paragraphs and other text elements will change automatically (Example 18.2).
Example 18.2. Text options for the entire webpage
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Наследование</title> <style> BODY { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */ color: navy; /* Синий цвет текста */ } </style> </head> <body> <p>Цвет текста этого абзаца синий.</p> </body> </html> In this example, the chopped font and paragraph text color is set using the BODY selector. Thanks to inheritance, there is no need to set the color for each element of the document separately. However, there are options when you still need to change the color for a separate container. In this case, you will have to redefine the necessary parameters explicitly, as shown in Example 18.3.
Example 18.3. Changing the properties of an inherited item
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Наследование</title> <style> BODY { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */ color: navy; /* Синий цвет текста */ } P.red { color: maroon; /* Темно-красный цвет текста */ } </style> </head> <body> <p>Цвет текста этого абзаца синий.</p> <p class="red">А у этого абзаца цвет текста уже другой.</p> </body> </html> In this example, the color of the first paragraph is inherited from the select
Comments
To leave a comment
Cascading CSS / CSS3 Style Sheets
Terms: Cascading CSS / CSS3 Style Sheets