Getting to know the front end -- CSS related knowledge points

Three front-end modules: HTML/CSS/JavaScript.

CSS, cascading style sheet, is used to render the style of element tags in HTML. If the head is equivalent to the head of the goddess and the body is equivalent to the body of the goddess, then CSS is equivalent to the dress / bag / cosmetics of the goddess.

1.CSS can be added to HTML in the following ways:

  • Inline style (clothes / pants / shoes): use the "style" attribute in the element label
    • <body>
          <div style="color: pink">asdf</div>
      </body>

       

  • Internal style sheet (foundation make-up / eye shadow / Lipstick): use the "style" attribute in the <head> area of the HTML document header
    • id selector:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
        #i1{
            background-color: #2459a2;
            height: 48px;
        }
        #i2{
            background-color: #2459a2;
            height: 48px;
        }
        #i3{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>

<body>
    <div class="i1">ff</div>
    <div class="i2">ff</div>
    <div class="i3">2</div>
</body>
</html>

 

    • class selector:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #2459a2;
            height: 30px;
        }
    </style>
</head>

<body>
    <input class="c1" type="text" n="abaaba">
    <input class="c1" type="password">
</body>
</html>

 

    • Label selector:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         span{
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <div class="i1">ff</div>

    <span class="i1"> Goddess 1</span>
    <span class="i2"> Goddess 2</span>
    <span class="i3"> Goddess 3</span>
    <!-- As long as the label is span,class Even if it is different, it will be formatted according to the label selector -->
</body>
</html>

 

    • Level selector:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 div{
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <div class="c1">
        <div>Level selector (format only when all match)</div>
        Level selector (compliance only) class (condition)
    </div>
</body>
</html>

 

    • Combination selector:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .i1,.i2,.i3{
             background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <div class="i1">Combination selector, style Separated by commas in, as long as it is inside, it will be formatted</div>
    <div class="i2">Combination selector, style Separated by commas in, as long as it is inside, it will be formatted</div>
    <span class="i4">be not in style In combination selector</span>
    <div class="i3">Combination selector, style Separated by commas in, as long as it is inside, it will be formatted</div>

</body>
</html>

 

    • Attribute selector:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1[n='abaaba']{
             width:400px; 
             height:40px; 
             background-color: black;
             color:white}
    </style>
</head>

<body>
    <div class="c1" n="baba">Does not meet the conditions in parentheses in the attribute selector</div>
    <div class="c1">Does not meet the conditions in parentheses in the attribute selector</div>
    <div class="c1" n="abaaba">attribute selectors ,Filter the selected tags again through attributes</div>
    <div class="c2" n="abaaba">Does not meet the conditions in parentheses in the attribute selector</div>
</body>
</html>

PS: when there are multiple declared label formats, the style on the label takes precedence, and the format will be used as much as possible. In case of conflict, the principle of proximity will be followed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1[n='abaaba']{
             width:400px; 
             height:40px; 
             background-color: white;
             color:pink}
        .c2[n='abaaba']{
            background-color: rgb(124, 22, 110);
            color:teal
        }
    </style>
</head>

<body>
    <div class="c1 c2" n="abaaba" style="background-color:black;">
        Property selector taken c1 Length and width of, attribute selector c2 Font color, and inline style Background color of
    </div>
</body>
</html>

 

  • External references (bag / mansion / sports car): use external CSS files

Package the statements in style (without style tags) into a single css file. If you want to use it, declare it in the head:

< link rel = "stylesheet" href = "file path / full file name" / >

 

2. Notes

  • Slightly different from html code, css code is annotated with "/ *" and "* /" respectively
  • Select in vscode and press "CTRL" and "/" at the same time. Pressing "CTRL + /" when canceling comments will cause some small problems. Just pay attention to it

 

3. Border

  • Width, style, color (border:4px dotted red;)
  • Which side (border: left)

 

4.

Height: height percentage

Width: percentage of width pixels

Text align: Center

Line height + label height = the vertical direction is centered according to the label height

Color: font color

Font size: font size

Font weight: bold font

 

5.float

Let the labels "float" and block level labels can also be stacked

When the child tag "floats" to block the parent tag, you can add the following code below:

<div style="clear:both;"></div>

 

6.display

display:none; -- make the label disappear

display:inline; -- convert labels into in-line labels (how many are there, and cannot set height, width, padding, margin)

display:block; -- convert labels into block level labels (the whole line is occupied by default, and the height, width, padding and margin can be set)

display:inline-block; Both block level and feasible

 

7.padding margin(0,auto)

padding: inner margin

Margin: outer margin

 

8.position:

position:fixed → fixed at a certain position on the page

position:relative; (parent tag) + position: absolute; (sub label) → the content of the sub label is displayed in the relative position of the content of the parent label. An example is as follows:

<div style="position:relative;">
    <div style="position:absolute;top:0;left:0>Displays at the top left of the parent label</div>
</div>

 

9.opacity: set transparency (0 ~ 1). 1 is an entity and 0 is transparent

 

10.z-index: hierarchical order, used in conjunction with position. Element labels are displayed according to the size of the z-index attribute. The z-index is displayed above. If it is not written, it is 0 by default;

 

11.overflow: when the content (such as pictures) exceeds the label definition range, it will expand the label range to occupy some positions beyond the expected, so a bra is needed to limit it. The overflow attribute is just fine. Set overflow:hidden; Only the contents of the label definition range will be displayed; Set overflow:auto; A scroll bar will be added to the contents shown in the label to see wherever you want.

 

12.hover add ": hover" after the selector to indicate that when the cursor moves to the position of the element modified by the selector, the content will be modified according to the code in the selector; (for the operation option of blog Garden, when the cursor moves to add a new essay, the font turns red and underlined)

 

13.background

  • Background image: URL ("image path + full image name"); The label definition size is installed and the padding is accessed repeatedly until the picture completely fills the label range
  • background-repeat:repeat-y;(y-axis repeat) / repeat-x;(x-axis repeat) / no repeat; (no repetition)
  • background-position-x: pixel size. Move the pixel size value left / right to get the picture
  • background-position-y: pixel size. Move the pixel size value up / down to get the picture

 

Posted by savetime on Thu, 12 May 2022 11:25:04 +0300