The application of CSS style sheet in web design

Source: Internet
Author: User

Multi-layer mode form (cascading Style Sheet, CSS) is a technology that provides enhanced supplemental services for Hypertext Markup Language (hypertext Markup Language, HTML), which can be decorated with exquisite decoration for each HTML tag. 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 the style label, 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:

< style >
a{text-decoration:none; color:yellow}
a:hover{text-decoration:underline; color:purple}
p{font-size:20; background:red; color:blue}
< /style >

----The above code is inserted into any HTML document and the display is refreshed, all 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

< P style= "FONT-SIZE:30; Font-weight:bolder; Background:white;color:blue ">

................

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

< html >
< head >
< title > 网页设计中如何使用CSS?webjx.com < /title >
< /head >
< body >
< style >
a{text-decoration:none; background:red; color:yellow}
a:hover{text-decoration:line-through; background:lime}
h1{text-align:center; font-weight:900;
border-style:ridge; border-width:medium; border-color:red}
p.first{font-size:15; font-face:楷体;
color:blue; border-style:dotted;
border-width:thin; border-color:blue}
p.second{font-size:20; word-spacing:10; background:aqua}
< /style >
< h1 > 带连框的题头1 < /h1 >
< a href=mailto:webmaster@webjx.com?subject=CSS >
鼠标移至此处, 背景变化
< /a >
< p > 未加CSS修饰的段落 < /p >
< p class=first > 指定CSS修饰的段落 < /p >
< p class=second > 指定另一种CSS修饰的段落 < /p >
< /body >
< /html >

----from the display of the above example, CSS is a supplement to HTML, almost every HTML markup to expand, so that the Web page full of vitality, showing a more perfect effect.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.