topic

CSS from And up to I

Imagine such situation: you have made a serious site. And suddenly after a while understand: a font not that, a background not that, colors not those, etc. All should be changed. Burdened with care of liked visitors, you hurry to correct defects in all 500 (for example) pages of your site. On it leaves all the day. At the best … As it to avoid? The answer is simple - to use cascade tables of styles.

First of all, I want you to warn: if you do not know HTML from this clause{article} new you do not learn{find out} anything. Simply because will not understand. CSS are thought up specially for expansion of opportunities HTML, therefore before to undertake cascade tables, I would advise you to study language of marks of hypertexts (that is HTML). As it is a lot of time it will not borrow{occupy}, and tutorials on HTML you can find great variety.

But we shall return to our rams:).

Everyone who did{made} webs - pages, so to say, manually (on HTML, instead of in WYSIWYG-editors), know, how few opportunities give this language when he is used "in the pure state" (I I have in a kind, without any auxiliary means). For example, positioning of elements, formatting of lists, job with background images is not full list of that can bring a headache to programmers on HTML. And it is valid, hypertext language is so imperfect, that at times simple pages can have a huge not readable code. Besides, the author of page cannot define{determine} beforehand adjustments of a browser of the user, that essentially limits number of variants of performance of the information on page.

It is impossible to say, that developers of browsers did not undertake attempts to change the given situation. In early versions of browsers CERN for platform NEXT to the author of page was enabled to redefine adjustments of default of a browser through a HTML-marking. But this approach has not received continuation in commercial products and gradually "zavjal".

Other way of management of adjustments of a browser - programming on JavaScript. This language now becomes more and more popular, however has one lack - great volume of a code that does{makes} it{him} not by the most optimum means. At least, on the nearest some years.

But the output{exit} nevertheless is. And a name to him - CSS (Cascading Style Sheets). Or, in Russian, cascade tables of styles. Well-known firm Microsoft has developed specifications of cascade tables. Likely therefore, by the way, Internet Explorer supports CSS in the a little bit greater degree, than Netscape (though NN6 has made in this area the hugest step forward). Yes, by the way, not bad supports cascade tables browser Opera (though and it is worse, than her{it} " the senior brothers "). Therefore I advise everyone who will use on pages CSS, to get even a Netscape and the Explorer and to check the creations both there, and there.

Initially CSS were created to separate the maintenance{contents} of page from accompanying additional tags of the description. We shall assume, we should write the certain expression often repeating in the text, green color, a font distinct from a font of the text and, besides, to italicize. If you want to do without only means HTML it will be necessary for you to write each time something of type:

Not too difficultly, but if this recording it is necessary to repeat tens times it not very convenient any more. CSS enables to set the description of object only once. Besides, it is possible to describe all styles for several pages or all site in one separate file and all your pages will have completely identical kind - identical fonts, tables, frameworks. Thus if you something want to change in registration of the site, you will need to change only one file - in what to contain corresponding styles of the description. Besides CSS allows to use set of additional effects for registration of pages. That too it is important.

Thus, zadumka was good. But it has turned out know as. Till now any browser does not support cascade tables on all of 100 %. Even IE. And consequently many opportunities CSS remain while unclaimed. When to me in hands translation of specifications CSS in the original for the first time has got, I read them as science fiction: so much all useful is given in our order with cascade tables of styles. But, alas, the certain part from them is correctly supported while only.

So, we shall start.

And we shall start with how tables of styles are included in the HTML-document. The information on styles can settle down or in a separate file, or is direct in a code of a web - page. The question will be where and in what form in the document the author of page can describe style and as he can refer to the style determined in the other document.

For application CSS in a HTML-page exists four basic ways. We shall consider in detail each of them.

1. Redefinition of style in an element of a marking.

Generally speaking, this method results in loss of main advantage CSS - opportunities of branch of the information from the description of performance of this information. However him{it} all the same often use. To describe style in such a way it is necessary to apply attribute STYLE at the given element of HTML-page. His{its} general{common} syntax is those:

<element STYLE = " property: value; property: value "> the text or any other object </element>

We shall leave consideration of concrete properties on then for now we shall see as cascade tables in general work. Here the first example:

<P STYLE = " font-size: 14pt; font-style: italic; background-color: lime "> This paragraph will be printed by italics, a font with the size of 14 items{points}, and on a light green background. </P>

Thus, to the text made between tegami <P> and </P>, the corresponding styles described behind attribute STYLE have been applied. This attribute can be applied inside any element of a marking. However an allowable set of pairs " property: value " in each concrete case will differ a little (about it we shall talk further).

Some remarks concerning to syntax would like to say at once. Attribute STYLE is written by the big letters only for the sake of convenience. It is possible to write it{him} somehow, so: style or even so: sTyLe - the effect will be absolutely identical. Set of pairs " property: value " necessarily undertakes in inverted commas, each pair is separated from the subsequent semicolon.

2. Accommodation of the description of style in heading of the document.

The description of styles is carried out by this way with the help of an element (instead of attribute) 'STYLE', the document placed in heading, i.e. between tegami <HEAD> and </HEAD>.

It is the most widespread way of application of cascade tables. Thus he the most reliable. The general{common} syntax at this way is those:

<HEAD>

Element {property: value; property: value}

</STYLE>

</HEAD>

Now in all the document the element described with the help 'STYLE' in heading, will be formatted and represented on the screen according to the style established for him{it}, if only he will not be redefined with the help of attribute STYLE (see item{point} 1) or means usual HTML. By the way, parameter TYPE = "text/css" is obligatory and serves for the instruction{indication} to a browser to use CSS. I shall result an example:

<HEAD>

B {color: red; font-si ze: 120 %}

</STYLE>;

</HEAD>

<BODY>

...

To define{determine} some elements identical styles, it is possible to use grouping. Then all elements need to be listed one after another through a point, so:

H1, H2, H3 {text-decoration: line-though}

Such recording means, that headings of the first, second and third levels will be displayed crossed out.

CSS gives us one more remarkable opportunity: definition of classes. With the help of classes it is possible to appropriate{give} styles not to all identical elements of page, and it is selective. Though classes are badly supported by a Netscape, however they give such flexibility of the control over elements, that sometimes it is simply impossible to refuse them. To use a class, it{he} is necessary for defining{determining} in the beginning inside an element 'STYLE', and then to refer to this class in any element inside 'BODY' with the help of attribute CLASS:

<HEAD>

.imja_klassa {property: value; property: value}

</STYLE>

</HEAD>

<BODY>

...

<element CLASS = "classname"> something, that will be formatted according to the styles set in a class </element>

...

</BODY>

Example:

<HEAD>

.x {width: 160px}

.y {padding: 15px}

</STYLE>

</HEAD>

<BODY>

<TABLE BORDER=1 BGCOLOR=gray BORDERCOLOR=white <

<TR>

<TD> JAchejka1 </TD>

<TD CLASS = "x"> JAchejka2 </TD>

</TR>

<TR>

<TD CLASS = "y"> JAchejka3 </TD>

</TR>

</TABLE>

</BODY>

In this example JAchejka2 it is formatted according to a class "x" for which elements the width in 160 pixels is established, and JAchejka3 - according to a class "y" for which all elements the internal space ("stuffing") in 15 pixels is established. JAchejke1 any of classes is not appropriated{given}, therefore she is formatted according to standard standards HTML, and also according to described in tege <TABLE> to attributes.

We admit{allow}, that on a plan of the author all elements 'CITE' (the logic marking, is used usually for allocation of the name of any book or clause{article} and it is displayed by italics), located inside headings 'H3', should be deduced{removed} by violet color. Thus all elements 'CITE' outside of heading 'H3' should have color by default (that is black). For convenient use of cascade tables in this case exists so-called contextual selectors. For example, in our case of necessary result it is possible to reach{achieve} so:

H3 CITE {color: purple}

Here the element 'H3' is as though a mask of search. The described style (color: purple) it is applied only to last element (in this case 'CITE'), and only when the result of search is positive. We shall show job of the contextual selector on the given example:

<BODY>

<H3> In this heading it is used <CITE> an element of a logic marking 'CITE' </CITE> </H3>

</BODY>

3. The link to an external file of the description of styles.

The description of styles can be imported to any page from an external file which is necessary for creating beforehand and to appropriate{give} to him expansion .css. The maintenance{contents} of this file should be the descriptions of styles constructed with syntax, considered in item{point} 2. Connection of an external file is carried out with the help of an element 'LINK' which can settle down both in heading, and in a body of the document:

Value of attribute REL should be necessary "stylesheet".

4. Import of the description of styles.

It is analogue the way of the task of descriptions described above. With his{its} help also it is possible to refer to external files of cascade tables:

@import: url (http: // path/to/your/css)

</STYLE>

Imported style can be redefined with the help of any listed before methods. However such way of connection of external files is not recommended for the reason, that he is supported far from being by all browsers.

For today, perhaps, all. Success!