When you create a Web site design with CSS, you experience a situation where the same flags may appear differently in different places. How to do, there is a way is to use the direct insertion described in the above section, one after another to the property settings, if the type of flag is relatively small, this can also be a bit boring, if more.
The solution is to adopt the style class.
A style class, as its name implies, is a classification of styles that requires several different CSS attributes for a particular type of flag depending on the style, or it can be divided into several classes of the entire style rather than just one type of flag.
First, the establishment of style classes
Style classes can be set up in the way we talk about the external file and document header in the previous section, but not in the direct insert form. It is established in the following two kinds of formats:
In the first way, we can create a style class for a type of flag, such as:
In the example above, all paragraph logo fonts are in the Arial, size 10pt, color red, due to the need for typesetting is divided into three style classes, have different typesetting properties, from this example you can see cascading style sheet is cascading, the significance of this.
The second way is to use the style class that it prescribes, not specific to a certain type of flag, but other types of flags can be used. Such as:
It sets three style classes, and almost all types can reference them.
One thing to note is that style classes do not conflict with the unified style that we talked about in the previous section, and style classes emphasize stylistic differences, while the unified form emphasizes the same style. They are often combined with each other to achieve style of superposition, so that the Web page style in the overall unity of the basis of their own and colorful.
Ii. references to style classes
A reference to a style class is simple, just set the class property value to the style class name after the flag, and the reference format is as follows:
< logo class= "style class name" >
As we have above, the style class created in the first way is referenced in a paragraph flag,
<p class= "Isleft" > Hello, welcome you to the Web page production Learning corner </p>.
To remind you again, the style class set in the first way can only be used for flags of the type of flag that the style class belongs to, and the second is unrestricted.
If we want to dynamically change a style that references a style class, you can modify the ClassName property of the flag object by scripting language as follows:
The identification number of the flag you want to modify. Style.classname= "Style class name", such as for a flag <p id= "P1" class= "Isleft" >hello</p> modified to the right style, modify the statement in the scripting language as follows:
P1.style.classname= "Isright"