Formatting a block of pseudo-classes and pseudo-elements

Block formatting

A block in cascading sheets of styles is considered to be a fragment of the page or its full volume, placed in containers <P> and <DIV> , and <BODY> (if the page as a whole). The formatting of the block is to change its parameters, such as: width and height of the block, external and internal indents from its borders, assignment of color and appearance as separate lines (borders), and the general background.

Dimensions of the block in styles are specified in the width and height properties, while, as in all cases, negative values ​​can not be specified in such cases. In some cases, for the design of the pages you have to resort to the variable dimensions of the block. To do this, CSS provides the properties min-width , min-height (minimum width and height of the block) and max-widht / max-height (their maximum values).

External indents from the block dictate parameters: margin , margin-left , margin-right , margin-top and margin-bottom . Similarly, the padding property is found.

When specifying the background of a div block, you need to apply the background-color property, the choice of which value is indistinguishable from the general application of colors. In case you want to use any image as a background , then apply the background-image property, while in the value specify the address and file name of the desired image. Limit the repetition of the image in the background of the block with the background-repeat property and its values: repeat-x (repeat on the X-axis), repeat-y (on the Y axis) and no-repeat (without repetitions). If necessary, fix the background image, in order for it to remain stationary while scrolling, use the value fixed in the background-attachment property .

To change the block frame parameters, properties that begin with the word BORDER are used. So with the help of border-width it is possible to set the same values ​​for all four borders of the block, and the border is described in the values border-left-width , border-right-width , border-top-width and border-bottom-width . In a similar view, apply: border-color (the color of the frame of the frame of the block) and border-style (the appearance of the lines). About the last property, you need to add that they have several values ​​that we have not yet learned:

  • Solid, groove, ridge, double - the frame lines will be solid, dented, convex and double, respectively.
  • Inset - the block is completely depressed.
  • Outset - a volumetric view of the block.
  • None - no lines.

From the above, we can assume that the style of the block can have the following form:

.box {width: 200px; Height: 100px; Margin-left: 5px; Margin-right: 5px; Margin-top: 10px; Margin-bottom: 15px; Padding: 5px; Border-width-left: 1px; Border-width-right: 0px; Border-width-top: 0px; Border-width-bottom: 5px; Border-color: # 202020; Border-style: solid}

Formatting pseudo-classes and pseudo-elements

This category includes elements of Web-pages, which are difficult to attribute to ordinary elements. Pseudo-classes are links , first-child and lang (language). In the CSS 2.0 specification, they are described as:

  • A: link - properties of the normal link.
  • A: active - the properties of the active link.
  • A: visited - the properties of the visited link.
  • A: hover - the properties of the link when you hover the mouse over it.
  • A: focus - link property at focus
  • First-child - selects the first element among the following.
  • Lang - formatting of elements depending on the use of languages ​​on the page.

In cascading style sheets, when formatting links, the same values ​​apply as for normal text. When describing other pseudo-classes in CSS, the symbol ">" is preceded by their values.

Pseudo-elements in styles include properties:

  • First-letter - formats the first character for the first line.
  • First-line - a separate formatting of the first line of the text block is assigned.
  • After - assigns the location of the object after the current element.
  • Before - assigns the location of the object to the current element.