1-Basic knowledge of front-end-CSS

1-Front-end basic knowledge-CSS

Article directory

  • 1-Basic knowledge of front-end-CSS
  • General overview
  • What is CSS?
  • CSS introduction method
    • inline
    • Embedded
    • Connected/external style sheets
  • CSS selector
    • element selector
    • id selector
    • class selector (widely used)
  • CSS float
  • CSS positioning
    • Static positioning: static
    • Absolute positioning: absolute
    • Relative positioning: relative
  • CSS box model
    • box model elements
    • code example

Overview

Language Function
HTML Mainly used for building the main structure of the web page (page elements and content)
CSS Mainly used for beautifying the page (the appearance, position, and Color, size)
JavaScript Mainly used for dynamic processing of page elements (interactive effects)

What is CSS?

Cascading Style Sheets (Cascading Style Sheets) can perform pixel-level precise control over the layout of element positions in web pages, support almost all font size styles, and have the ability to edit web page object and model styles.

  • Simply put, beautify the page

How to introduce CSS

Inline

Introduced through the style attribute of the element’s opening tag

<input
    type="button"
    value="button"
    style="
        display: block;
        width: 60px;
        height: 40px;
        background-color: rgb(140, 235, 100);
        color: white;
        border: 3px solid green;
        font-size: 22px;
        font-family: 'official script';
        line-height: 30px;
        border-radius: 5px;
"/>
  • shortcoming
    • HTML code and CSS style code are intertwined, increasing reading difficulty and maintenance costs
    • The css style code is only valid for the current element, with high code duplication and low reusability.

Embedded

Scoping styles through selectors

  • The concept of selectors is introduced below
<head>
    <meta charset="UTF-8">
    <style>
        /* Determine the scope of the style through the selector */
        input {<!-- -->
            display: block;
            width: 80px;
            height: 40px;
            background-color: rgb(140, 235, 100);
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: 'official script';
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="button" value="Button 1"/>
    <input type="button" value="Button 2"/>
    <input type="button" value="Button 3"/>
    <input type="button" value="Button 4"/>
</body>
  • illustrate
    • Inline styles need to be defined in the head tag through a pair of style tags.
    • CSS style scope control relies on selectors
    • The way to comment in CSS style code is /* */
  • shortcoming
    • Although the style code is extracted for inline, the CSS code is still in the html file.
    • Embedded styles can only be applied to the current file, and the code reuse is still insufficient, which is not conducive to the unification of website styles.

Connected/external style sheets

Create a separate css style file in the project, specifically used to store CSS style code

image-20231030160324226

  • In the head tag, just introduce external CSS styles through the link tag.
<head>
    <meta charset="UTF-8">
    <link href="css/buttons.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <input type="button" value="Button 1"/>
    <input type="button" value="Button 2"/>
    <input type="button" value="Button 3"/>
    <input type="button" value="Button 4"/>
</body>
  • illustrate
    • CSS style code is stripped from html files to facilitate code maintenance
    • CSS style files can be introduced by multiple different html, which is conducive to the unification of website style.

CSS selector

Element selector

<head>
    <meta charset="UTF-8">
   <style>
    input {<!-- -->
        display: block;
        width: 80px;
        height: 40px;
        background-color: rgb(140, 235, 100);
        color: white;
        border: 3px solid green;
        font-size: 22px;
        font-family: 'official script';
        line-height: 30px;
        border-radius: 5px;
    }
   </style>
</head>
<body>
    <input type="button" value="Button 1"/>
    <input type="button" value="Button 2"/>
    <input type="button" value="Button 3"/>
    <input type="button" value="Button 4"/>
    <button>Button 5</button>
</body>
  • illustrate
    • Determine the scope of the style based on the tag name
    • The syntax is element name {}
    • The style can only be applied to tags with the same name, and is not available for other tags.
  • shortcoming
    • The same label may not require the same style, which will cause the scope of the style to be too large.

id selector

<head>
    <meta charset="UTF-8">
   <style>
    #btn1 {<!-- -->
        display: block;
        width: 80px;
        height: 40px;
        background-color: rgb(140, 235, 100);
        color: white;
        border: 3px solid green;
        font-size: 22px;
        font-family: 'official script';
        line-height: 30px;
        border-radius: 5px;
    }
   </style>
</head>
<body>
    <input id="btn1" type="button" value="Button 1"/>
    <input id="btn2" type="button" value="Button 2"/>
    <input id="btn3" type="button" value="Button 3"/>
    <input id="btn4" type="button" value="Button 4"/>
    <button id="btn5">Button 5</button>
</body>
  • illustrate
    • Determine the scope of the style based on the value of the element’s id attribute
    • The syntax is #id value {}
  • shortcoming
    • The value of the id attribute is unique on the page, and all id selectors can only affect the style of one element.
    • Because the id attribute value is not flexible enough, this selector is rarely used.

class selector (widely used)

<head>
    <meta charset="UTF-8">
   <style>
    .shapeClass {<!-- -->
        display: block;
        width: 80px;
        height: 40px;
        border-radius: 5px;
    }
    .colorClass{<!-- -->
        background-color: rgb(140, 235, 100);
        color: white;
        border: 3px solid green;
    }
    .fontClass {<!-- -->
        font-size: 22px;
        font-family: 'official script';
        line-height: 30px;
    }

   </style>
</head>
<body>
    <input class="shapeClass colorClass fontClass"type="button" value="Button 1"/>
    <input class="shapeClass colorClass" type="button" value="Button 2"/>
    <input class="colorClass fontClass" type="button" value="Button 3"/>
    <input class="fontClass" type="button" value="Button 4"/>
    <button class="shapeClass colorClass fontClass" >Button 5</button>
</body>
  • illustrate
    • Determine the scope of the style based on the value of the element’s class attribute
    • The syntax is .class value {}
    • The class attribute value can have one or more, and multiple different tags can also use the same class value.
  • benefit
    • Styles from multiple selectors can be superimposed on the same element
    • Because the class selector is very flexible, this selector is often used in CSS.

CSS float

The Float attribute causes the element to break away from the document flow and move in the specified direction (left or right) until its outer edge touches the border of the containing box or another floating box.

  • The original intention of the floating design is to solve the problem of text surrounding pictures. The text will not be blocked after floating. This is the original intention of the design.
  • Document flow is the position/space occupied by displayable objects in the document when arranged, and breaking away from the document flow means that they no longer occupy a position on the page.

Learn more about it later

CSS positioning

The position attribute specifies the positioning type of the element. This attribute defines the positioning mechanism used to establish the layout of the element.

Static positioning: static

  • When not set, the default value is static, static positioning, no positioning.
  • Elements appear where they should appear, block-level elements are arranged vertically, and inline elements are arranged horizontally.
<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{<!-- -->
                width: 100px;
                height: 100px;
        }
        .d1{<!-- -->
            background-color: rgb(166, 247, 46);
            position: static;
        }
        .d2{<!-- -->
            background-color: rgb(79, 230, 124);
        }
        .d3{<!-- -->
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">Box 1</div>
        <div class="innerDiv d2">Box 2</div>
        <div class="innerDiv d3">Box 3</div>
</body>

image-20231030162529630

Absolute positioning: absolute

  • Specify the fixed position of the element on the page through top, left, right, and bottom
  • After positioning, the element will give up its original position (referring to the position it was in when statically positioned), and other elements can occupy it.
<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{<!-- -->
                width: 100px;
                height: 100px;
        }
        .d1{<!-- -->
            background-color: rgb(166, 247, 46);
            position: static;
        }
        .d2{<!-- -->
            background-color: rgb(79, 230, 124);
        }
        .d3{<!-- -->
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">Box 1</div>
        <div class="innerDiv d2">Box 2</div>
        <div class="innerDiv d3">Box 3</div>
</body>

image-20231030162517093

Relative positioning: relative

  • Position relative to one’s original position
  • After positioning, the original position is retained, and other elements will not move to this position.
<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{<!-- -->
                width: 100px;
                height: 100px;
        }
        .d1{<!-- -->
            background-color: rgb(166, 247, 46);
            position: relative;
            left: 30px;
            top: 30px;
        }
        .d2{<!-- -->
            background-color: rgb(79, 230, 124);
        }
        .d3{<!-- -->
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">Box 1</div>
        <div class="innerDiv d2">Box 2</div>
        <div class="innerDiv d3">Box 3</div>
</body>

image-20231030162505584

CSS box model

All HTML elements can be viewed as boxes. In CSS, the term “box model” is used in design and layout.

Box model elements

image-20231030163547572

Elements Explanation
Margin (margin) Clear the area outside the border, the margin is transparent
Border (border) The border around the padding and content
Padding (Padding) Clear the area around the content, the padding is transparent
Content(content) The content of the box, showing text and images

image-20231030163703044

Code example

<head>
    <meta charset="UTF-8">
   <style>
    .outerDiv {<!-- -->
        width: 800px;
        height: 300px;
        border: 1px solid green;
        background-color: rgb(230, 224, 224);
        margin: 0px auto;
    }
    .innerDiv{<!-- -->
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        float: left;
        /* margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 30px;
        margin-left: 40px; */
        margin: 10px 20px 30px 40px;

    }
    .d1{<!-- -->
        background-color: greenyellow;
        /* padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-left: 40px; */
        padding: 10px 20px 30px 40px;
    }
    .d2{<!-- -->
        background-color: rgb(79, 230, 124);
    }
    .d3{<!-- -->
        background-color: rgb(26, 165, 208);
    }
   </style>
</head>
<body>
   <div class="outerDiv">
        <div class="innerDiv d1">Box 1</div>
        <div class="innerDiv d2">Box 2</div>
        <div class="innerDiv d3">Box 3</div>
   </div>
</body>

image-20231030163731249