Application of CSS technology in web design

css| Design | Web page Design Multilayer mode form (cascading Style Sheet, CSS) is a technology that provides enhanced supplemental services for Hypertext Markup languages (hypertext Markup anguage, HTML), and can be used for each HTML label ( tag) to make exquisite decoration. HTML-only Web pages, the ability to modify the parts of the page is limited and the statement annoying lock, CSS is a powerful technology to make up for this flaw, it is simple in sentence, grammar, as long as the source code inserted style statements can easily achieve any text within the page color, background, borders, line spacing, the deletion of the word spacing and modification functions, Make the page more lively, so as to achieve satisfactory results.

CSS appears in the HTML with a style identifier, the format is: a pair of CSS technology on behalf of the style label, put the decorated HTML markup, the placement of the CSS attributes in the next pair of curly braces, each property assignment with ":", multiple attributes between ";" To separate, as an example:

Lt Style > A{text-decoration:none;color:yellow} a:hover{text-decoration:underline; color:purple} {font-size:20; Background:red;color:blue} lt; /style >

When the above code is inserted into any HTML document and the display is refreshed, all the anchor points become normal fonts. The color is yellow, but when you move the mouse over it, the cue character of the anchor changes to the underlined purple font; The text enclosed in the entire document will appear in the form of a red-bottom blue word and a font size of 20 pixels. If a paragraph of text requires additional modification, it can appear in a separate form, for example:

Lt;p style= "Font-size:30;font-weight:bolder; Background:white;color:blue "> ......... lt; /p >

The text is white and blue, 30 pixel size, and the font is bold. The following is a complete example of an HTML document with CSS technology:

Lt HTML > lt; Head > lt; Title > How to use CSS </title > lt; /head > lt; Body > lt; Style > A{text-decoration:none; background:red color:yellow} a:hover{text-decoration:line-through;background: Lime} h1{text-align:center; font-weight:900 order-style:ridge;border-width:medium;border-color:red} first{ font-size:15; Font-face: italics; color:blue;border-style:dotted; Order-width:thin;border-color:blue}. Second{font-size:20;word-spacing:10;background:aqua} lt; /style > Lt;h1 > with frame header 1

Move mouse over here, background changes

Lt /a > Lt;p > No CSS-Modified paragraph </p > lt; P class=first > Specify CSS-decorated paragraphs </p > lt;p class=second > Specify another CSS-modified paragraph </> lt; /body > Lt;/html >

From the example shown, CSS is a supplement to HTML, almost every HTML markup can be expanded to make the Web page full of vitality, showing a more perfect effect.