CSS Learning (1) (Web Programming)

1. CSS Definition

Cascading Style Sheet (CSS) is also called style sheet. It is used for webpage style design. You can set up a style sheet to control the display attributes of labels in hmtl. Cascading Style Sheets allow users to more effectively control the appearance of webpages. Using Cascading Style Sheets, you can expand the ability to precisely specify the location, appearance, and create special effects of webpage elements.

2. How to Use CSS

When reading CSS, the browser will format the HTML document based on it. There are three ways to insert CSS:

2.1 external style sheets

When a style needs to be reused on multiple pages, use an external style sheet. In this way, you can change the appearance of the entire site by changing a file.

Usage:

Create a file suffixed with css(the file I created here is stylesheet1.css), write CSS code in the CSS file, and save it.

Finally, use the <link> label to link to the style sheet in the style file on each page that uses the style file. The <link> label should be written in the

    <link href="http://www.cnblogs.com/style/StyleSheet1.css" rel="stylesheet" type="text/css" />

2.2 internal Style Sheets
Use an internal style sheet when a page requires a special style.
Usage:
Write the internal style table in the <style> label, and the <style> label should be written in the View code

}
<style type="text/css">
    html, body
    {
        height: 100%;
        margin: 0;
    }

    #header
    {
        width: 96%;
        height: 40px;
        background: #efdfed;
        font-weight: bold;
        font-size: 16px;
        padding: 15px 0 0 50px;
        margin: 0px 2px;
        color: Red;
    }

    #nav
    {
        width: 96%;
        height: 30px;
        background: #efdfed;
        font-weight: bold;
        font-size: 16px;
        padding: 12px 0 0 50px;
        margin: 5px 2px;
        color: Red;
    }

    #content
    {
        width: 96%;
        height: 42%;
        background: #efdfed;
        font-size: 16px;
        font-weight: bold;
        padding: 17% 0 0 50px;
        margin: 5px 2px;
        color: Red;
    }

    #footer
    {
        width: 96%;
        height: 30px;
        background: #efdfed;
        font-weight: bold;
        font-size: 16px;
        padding: 15px 0 0 50px;
        margin: 5px 2px;
        color: Red;
    }
</style>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>
 
2.3 inline Style
Inline styles are mixed with the content, which will lead to a loss of many of the advantages of the style sheet. Therefore, this method is generally used when the style only needs to be applied once on one element.
Usage:
Use the style attribute in the label. Example:
<div id="header" style="background: yellow; height: 100px; margin: 5px; line-height: 100px;padding: 5px; float: left;">
    header</div>