Chapter II using CSS to control the page

Source: Internet
Author: User

This chapter focuses on how to use the CSS control page, and the various methods of its control page, including inline style, inline, link and import, and finally discuss various ways of priority issues

1. Inline style

Inline styles are the most straightforward of all style methods, using the style property directly on the markup of the HTML , and then writing the CSS code directly into it.

Inline styles are the simplest way to use CSS, but because you need to set the style property for each tag, later maintenance costs are still high and the Web page is too fat to use.

2. Embedded type

The inline style sheet is to write CSS between .

 {    color:#ff00ff;     text-decoration:underline;     font-weight:bold;     font-size:25px;} --></style>

All the code parts of the CSS are hit in the same area, convenient for later maintenance, the page itself is also greatly reduced. But if it is a Web site with a lot of pages, for the different pages of the <p> tag all want to adopt the same style, the embedded approach is a little cumbersome, maintenance costs are not low, so only for the special page to set up a separate style style.

3. LINK Type

A linked CSS style sheet is the most frequently used and most used method. It separates the HTML page itself and CSS style style into two or more files, the implementation of the page frame HTML code and art CSS code completely separate , making pre-production and post-maintenance is very convenient, the site backstage technical staff and designers can also be very good division of labor.

For the same CSS file can be linked to multiple HTML files, and can even link to the entire site of all pages , so that the overall style of the site unified, coordinated, and later maintenance of the workload is greatly reduced.

H2 {    color:#0000ff;} P {    color:#ff00ff;     text-decoration:underline;     font-weight:bold;     font-size:20px;}
H3 {    color:#00ffff;     font-style:Italic;     font-size:40px;}

The biggest advantage of a linked style sheet is that it is completely detached from the CSS code and HTML code, and that the same CSS file can be linked using a different HTML. So when designing an entire site, you can link all the pages to the same CSS file, using the same styling style. If the entire site needs to be modified in style, it just needs to modify this CSS file.

4. Import Style

A style sheet imported with import will be imported into an HTML file as part of a file, like an inline effect, when the HTML file is initialized. A linked style sheet is introduced as a link when the HTML markup needs to be formatted.

There are several @import statements that you can choose to place between <style> and </style> tags:

@import URL (sheet.css);

@import url ("Sheet.css");

@import url (' sheet.css ');

@import sheet.css;

@import "Sheet.css";

@import ' Sheet.css ';

--></style>
<p> purple, bold, underline, 25px effect 3<p>
</body>

The biggest use of importing style sheets is with a stylesheet that lets you import a lot of HTML files
Not only the HTML file <style> and </style> tags can import more than one style sheet, in the CSS file can also import other stylesheets, such as the @import URL (2.css), remove, and then add the 1.css file @ Import URL (2.css), or you can achieve the same effect.

5. Priority issues in various ways

Chapter II using CSS to control the page

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.