Basics of HTML

  1. Terms and Definitions
  2. Principles of WEB 2.0
  3. The structure of the HTML-document
  4. Main metatags
  5. Formatting Text HTML
  6. Lists html-page
  7. Text fixed format
  8. Selected text html-page
  9. Change font options
  10. Graphics html-page
  11. Tables html-page
  12. Hyperlinks
  13. IMAGEMAP
  14. Frames

CSS-based

  1. What is CSS
  2. CSS syntax
  3. Style classes
  4. Combined styles
  5. CSS table
  6. CSS cascading rules
  7. Recommendations applying styles
  8. Font options
  9. Line breaks, vertical alignment
  10. Background settings
  11. Parameters of the paragraph
  12. List options
  13. The parameters of the cursor
  14. Options indentation
  15. Parameters frame
  16. Parameters selection
  17. Display options
  18. Containers


   

CSS cascading rules

In previous lessons we have been studied for various types of CSS styles: the style override tag, style class, combined style, built-in style. Styles can be defined in the internal or external style sheets. Each of the sheets was considered by us alone. Now we have to figure out the priority of styles as one and the same element html-pages can be simultaneously used several different styles.

Priority styles or rules cascade , which describe the behavior of the browser in the formation of the final design:

Novice to understand the rules of the cascade is difficult, therefore, explain their work on examples.

Let us assume that we have created an external style sheet style.css:

.text {color: Red}
#txt {font-size: 12px}
STRONG {
	color: Yellow;
	font-style: italic
	}

The html-page, we used internal style:

<STYLE>
	.text {color: Blue}
	STRONG {font-size: 20px}
</STYLE>

Consider the html-code of the page:

EXAMPLE 1:

<P><STRONG>Yellow italic bold size 20 pixels.</STRONG></P>

When both an external and internal style sheets, browser primarily handles and stores in its memory an external style sheet, and then - an internal table. If the external and internal table vstrachayutsya same CSS selectors, the browser adds the attributes forming the resulting style. In our example, the resulting style override tag STRONG will look like this:

STRONG {
	color: Yellow;
	font-size: 20px;
	font-style: italic
	}

It is a style browser will be used in our example 1.

EXAMPLE 2:

<P ID="txt" STYLE="font-weight: bold">Bold text size of 12 pixels.</P>

Browser attribute to the named style txt, which is downloaded from the external table, add an attribute to the built-in style. The resulting style will be as follows:

#txt {
	font-size: 12px;
	font-weight: bold
	}
EXAMPLE 3:

<P CLASS="text">Text blue.</P>

In Example 3, the attributes of style class text asking the same option - the color of the text: in the outer table - red; the inner table - blue. In such cases, the browser follows the rules cascade, which say that the style of the inner table has a higher priority, so the text will be decorated in blue.

Important attributes of styles

The CSS standard allows the possibility of breaking the rules of cascade. To do this, the attribute style selector should be allocated by means of values !important

STRONG {
	font-size: 12px;
	color: Red !important
	}

In this example, the text decorated tag <STRONG> , will always be displayed in red, even if the color parameter will be overridden in a particular style.

Please note that may be important only individual style attributes in the definition of the style, the rest of the style attributes that are not declared important to be subject to the standard rules of cascading style sheets.


TOP ↑