CSS cascading style sheet

1.1 CSS introduction

Limitations of HTML: only focus on the semantics of content.
CSS: cascading style sheet, CSS style sheet or cascading style sheet.
CSS is also a markup language, which is mainly used to set the text content, image shape, layout and appearance display style of HTML page.

Composition of CSS: selector and one or more declarations (attribute: value;).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS standard</title>
    <style>
        /* Selector {style} */
        /* Change the style for who {change what style} */
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>CSS grammatical norm</p>
</body>
</html>

CSS code style: compact format and expanded format.

1.2 CSS basic selector

Selector: select different labels according to different needs and select the ones for labels.
Tag selector (element selector): use the HTML tag name as the selector, classify according to the tag name, and formulate a unified CSS style for a certain type of tag in the page.
```
Tag name{
    Attribute 1:Attribute value 1;
    Attribute 2:Attribute value 2;
    ...
}
```

Class selector: differentiated selection of different tags, one or more tags.

<style>
         /* 
            .Class name{
                Attribute 1: attribute value 1;
                Attribute 2: attribute value 2;
                ...
            }
            
            Style point definition, structure class call, one or more, which are most commonly used in development
         */
        
    .red {
            color: red;
        }
</style>

    <li class="red">White peach Qinxue</li>
    <li class="red">Misty rain in the south of the Yangtze River</li>
    <li>Peach Oolong</li>

Class selector - multiple class names: one label specifies multiple class names, which are separated by spaces.

<style>    
        .box {
            width: 100px;
            height: 100px;
        }

        .yellow {
            background-color: yellow;
        }

        .green {
            /* width: 100px;
            height: 100px; */
            background-color: green;
        }
</style>

    /* Each class name is separated by a space*/
    <div class="box yellow"></div>
    <div class="box green"></div>
    <div class="box yellow"></div>

id selector: set the id selector with the id attribute and # define it.

<style>
    /* 
             #id Name{
                Attribute 1: attribute value 1;
                Attribute 2: attribute value 2;
                ...
            }
            The style # definition and structure id can only be called once, and should not be used by others
         */

        #pink {
            color: pink;
        }
</style>

        <div id="pink">id selector</div>

Wildcard selector: identifies all elements (labels) in the selection page, defined with *.

<style>
    /* 
             #* {
                Attribute 1: attribute value 1;
                Attribute 2: attribute value 2;
                ...
            }
            Style is automatically used for all elements without calling
         */

        * {
            color: red;
        }
</style>

        <div>1</div>
        <div>2</div>

1.3 CSS font properties

font- family: defines the font family of text.

<style>
    p {
        font-family:"Microsoft YaHei ";
    }

    div {
        font-family:"Microsoft YaHei","Microsoft YaHei ";
    }
</style>

Font size: font size

<style>
    /* The text size of the title label needs to be specified separately */
    p {
        font-size:20px;
    }
</style>

Font weight: font weight

<style>
    p {
        /*
           bold:Bold
           light:Fine body 
           normal:Default, 400 
         */
        font-weight:700;
        /*700 Equivalent to bold, bold */
    }
</style>

Font style: font style

<style>
    p {
        /*
           normal:By default, the browser displays the standard font style
           italic:The browser displays the font style in italics
         */
        font-style:normal;
    }
</style>

Font compound attribute: attributes that do not need to be set can be omitted (take the default value), but the font size and font family attributes must be retained, otherwise the font attribute will not work.
```
<style>
    div {
        /*
           font:font-style font-weight font-size/line-weight font-family;
         */
        font:italic 700 16px 'Microsoft yahei';
    }
</style>
```

1.4 CSS text properties

Text color: color
Align text: text align, horizontal alignment. center,left,right
```
<style>
    p {
        text-align:left;
    }
</style>
```
Decorative text: text- decoration

Text indent: text indent, indent the first line of text

<style>
    p {
        text-indent:2em;
        /*  em Is a relative unit, which is the size of 1 text of the current element */
    }
</style>

Line spacing: line height, which can control the distance between text and lines

<style>
    p {
        line-height:20px;
        /*  Top spacing + text height + bottom spacing */
    }
</style>

1.5 introduction of CSS

There are three kinds of CSS style sheets: inline style sheet (inline), internal style sheet (embedded), and external style sheet (linked).

/*Inline style sheet*/
<style>
    p {
        color:pink;
        font-size:12px;
    }
</style>

/*Internal style sheet*/
<p style="color:pink; font-size:12px"></p>

/*External style sheet*/
/*
    1.Establish css file
    2.In the HTML page, use the < link > tag to import this file
*/
<link rel="stylesheet" href="css File path">

Keywords: Front-end css3 css

Added by dearmoawiz on Tue, 22 Feb 2022 10:32:40 +0200

Programming VIP