topic

Effect bukvicy

In tipograficheskikh editions very much often it is possible to meet bukvicu - selected on the size and color the first letter of the first paragraph. Beautifully so it would be looked … to itself such at a site! The some people are limited to use of figures, but suddenly the visitor has disconnected show of pictures. Then there will be no bukvicy, a beauty: from it{her} remain only empty kvadratik. The decision of a problem becomes application CSS.

First-letter

The pseudo-element first-letter just also is engaged in management of the first letter of the set block. He searches for the first element and appropriates{gives} to him the specified values. Style of a spelling is very simple.

Example:

p:first-letter {font-size:200 %; color: lime; float: left}

</Style>

<p> Very much even the stylish paragraph </p>

In an example the letter ' O ' becomes green and increased twice, thus the text of her will flow round from the right party . If the offer begins about inverted commas she together with the letter will be part first-letter.

Besides other a pseudo-element it is possible to share with classes and identifiers.

Example:

DIV.effect:first-letter {color: gold}

*Litera:first-letter {font-size:1.5; float:left}

First-line

Operates just as and first-letter. A difference only in objects of allocation: first-line visually changes the first line in the block necessary to you.

Example:

p:first-line {font-variant: small-caps}

</Style>

<p> Slightly raised line, <br>

But this part than especial is not allocated. </p>

The first line in the paragraph is written by small capital letters: very effective allocation of the beginning of clause{article} in any magazine.

" It would be interesting to use both pseudo-classes in one block " - you will say. And such in CSS it is possible. It is necessary to define{determine} only two times an element and the paragraph decorated in your style will not keep itself waiting.

Example:

DIV*beautiful:first-line {font-weight: bolder; color: * 0f0}

DIV*beautiful:first-letter {font-size:16px; font-style: oblique; color: * f00}

</Style>

<div id=beautiful> your clause{article} most <br> stat`jastaja clause{article} in the world. </div>