Inline Styles
An inline style is assigned to an element using the STYLE attribute. The
STYLE attribute lets you assign CSS properties directly to an instance of the
element. For example, using the STYLE attribute, you can make a paragraph blue:
<P STYLE="color:blue">This is a blue paragraph.</P>
This technique improves on the existing HTML-based model for
specifying text color. Prior to style sheets, the paragraph would be made blue using
the Font element:
<P><FONT COLOR="Blue">This is a blue paragraph.</FONT></P>
The advantages of using the inline style over the stylistic HTML
elements and attributes are as follows:
- Creates more compact HTML code
- Creates a smaller parsing tree, which leads to better performance
- Better separates the concepts of style and structure
Even inline styles are not in the true spirit of separating presentation
from content. The true definition of separating presentation from content is to
define all the styles outside the markup—for this, global or linked style
sheets are more appropriate.
The inline style sheet does provide some conveniences for creating
dynamic documents. For example, the style of an element can be quickly
changed when the mouse moves over it:
<H1 ONMOUSEOVER="this.style.backgroundColor = `yellow';"
ONMOUSEOUT="this.style.backgroundColor = ``;">
This element turns yellow when the mouse moves over it.
</H1>
This code works by accessing the inline style for the H1 element and
assigning a new value to the CSS
backgroundColor property. The document's display
is immediately updated to reflect the change to the style sheet. The inline
style is represented on every element through the
style property; style is an object-valued property through which scripts can access all the CSS properties. [Содержание]
|
