Undolog.com

nei fogli di stile. Here are some brief tips on how to use class and id in style sheets. Keep in mind that once the use of advanced JavaScript techniques, such as the use of Ajax engine, may conflict with the advice set out here! And we'll see why at the end.

per legare un TAG ad uno stile, spesso si rimane confusi e non si capisce quale sia la differenza o, comunque, la scelta migliore tra i due. With the availability of both the attribute class="" that the attribute id="" to tie a tag to a style, often gets confused and do not understand what the difference is, or at least the best choice between the two. In truth score a tag by class or by the ' id for the CSS does not change anything, or almost. What changes is the way we think of the page and use it properly id and classes without finding ourselves then to repent of the choices made.

A note on inheritance

Before starting I would like to take this opportunity to emphasize an important behavior styles, or coscading or inheritance. In practice, a sub-element inherits the characteristics of the parent, unless you explicitly specify that it is !important . Let's see an example that may clarify this situational. Imagine you have created the following style sheet:

and the following HTML code:

As a result, the browser will actually be the one you want, the first paragraph will be rendered with font 14 pixels and the second paragraph with the font to 22 pixels! Let us now try to use class instead of id:

HTML:

The result on the browser (tested on FireFox 1.5 + and IE6), this time will be different! What has happened? ha ereditato il font-size del primo div con id c_box . The div with class d_box inherited the font-size of the first div with id c_box . An id , then, requires the classes "daughters" to inherit their attributes (although this is not valid for all styles). nella classe d_box , come mostrato qui sotto: To eliminate the problem you need to indicate explicitly, with the keywork !important , the font-size in the class d_box , as shown below:

In this way we impose to take into account the new style defined with the class d_box .

Using only the classes:

HTML:

As a result, the browser will be the initial one, both paragraphs will be rendered properly. Moral: attention then when you use cascading style ... if it is true that there is an immediate difference between classes and id is also true that their use is not entirely identical. Because otherwise there would be two ways of addressing?

Regulation

However, there is a way to know who "wins" when you set a style. This technique is usually called Cascade Rule 3.
It provides a value to each selectors or line declarative CSS. This value takes the form ABC.

1) add 1 to A for each id in the selector
2) add 1 to B for each class in the selector
3) add 1 to C for each tag in the selector

Let's see an example:

The highest value wins. If two rules have the same weight, wins the last defined.

Advice

One way might be this: use the class when the visual behavior of a TAG can vary depending on its container mother. Use id when the behavior of view is unique, ie independent of its parent container.

An illustrative example of this approach would be the following: the behavior of a hypothetical title. In this case we will use the class="title" and based on the upper container adjust the various behaviors. The CSS file would be:

In fact, even, things are even better because we have the TAG H<em>n</em> that help us. In an actual case the class title would be useless. In practice, the technique is to use the id as selectors of behavior (in fact they are often referred to as id-selector). A real situation might be so:

We have thus three different behaviors depending on the selector. The main rule could be the following: If this visually TAG will behave differently depending on the container use class !

In this series, among other things, includes many elements of the visual layout such as lists ul . These can behave differently depending on the container mother can have a look in the navigation bar, another on the main page, another in the sidebar, etc ... However what we need, in most cases, is the only selector id , the best use of TAG standards made ​​available to HTML.

quando si può, i TAG titolo H<em>n</em> , i TAG strong , acronym , code , insomma limitare div e span altrimenti rendiamo inutile l'uso degli stili, inondando inoltre la rete con bit supeflui. For example, it is good practice to use the lists ul or ol when you can, the title TAG H<em>n</em> , the TAG strong , acronym , code , in short, to limit div and span otherwise we make it unnecessary to use the styles, also flooding the network with supeflui bit. Often, in fact, do not even know all the HTML tags. Some Web Designer seem to ignore some of the most useful tag in the current HTML standards. Sure some TAG (as well as some of the attributes, events, styles, and, alas, various other little things ...) are confined in the standard of some specific browser, but there are many TAG fully supported by virtually all existing browsers (including Safari - apropos but Apple has he forgotten that he had developed its own browser?).

Style sheets, yet alas, are also subject to some misunderstanding scattered here and there. Web Designer to do is wait hoping for a future more standard and less variable. Use the id as selectors, therefore, can not escape being also involved in a side-effect associated with the use of Javascript. Through the language most widely used client side, if enabled in the browser, you can get a pointer to a specific tag or element on the page. . This is now solved with ease (some time ago was slightly more complex, due to the ever-present incompatibilities between browsers!) Via the getElementByID() made ​​available by the object document .

dell'elemento. As can be seen by the same method name, getElementByID() retrieves the pointer on the basis of ' id of the element. per rintracciare l'elemento. The problem that has to do with style sheets lies in the fact that the ' id in question is exactly the same one used by getElementByID() to find the element. Then imagine having to write a web application that manages a series of post-it on the screen, if anything with the position:absolute activated. This means that post-it on the page you could have an unknown number of n. . The web designer who wants to write the style sheet for this object, following our previous rule would choose to use a div container and give it a id="postIt" . In this way, follow our rule when a post-it does not behave itself in a visually different depending on the parent container. In our particular it is an object unique and therefore it is correct to associate to an ' id . The trouble comes when the programmer Javascript (the characters of this MiniStore are 2 different but the question would be equally embarrassing even for a single developer ...) attempts to get a pointer to a specific post-it! It soon realizes that he can not use the ID as a discriminator on the page as if there are multiple elements with the same ID then getElementByID() can not return a single pointer, the limit can return a list (array), a list of elements that are called all the same way.

This long and tedious discussion brings with it a note accordingly. In developing HTML / Javascript / CSS and in particular in the leaves of styles, much depends on the overview. There is not really a rule that applies to any solution. Being able to see the project in its completeness can help you more than the fixed rules.

This article was useful to you?:

Loading ...

Be Sociable, Share!

• 

• Tweet