PINK teacher HTML5+CSS3 tutorial 3

Tip: after the article is written, the directory can be generated automatically. Please refer to the help document on the right for how to generate it

preface

Tip: Here you can add the general contents to be recorded in this article:

https://www.bilibili.com/video/BV14J4114768?p=61&spm_id_from=pageDriver

Tip: the following is the main content of this article. The following cases can be used for reference

1, CSS introduction

CSS sets the layout and appearance display style of text content (size, font, alignment, etc.) picture appearance (width, height, border margin) layout in HTML page

CSS rules consist of two parts: selectors (HTML tags) + one or more declarations
Write it in the head
To whom {what}
Attribute and attribute value are separated by:
Used after the attribute value is completed; end
It is recommended that style selector attribute names and attribute values use lowercase letters
: leave a space after
A space should also be left between h3 and {

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

2, CSS basic selector

For selecting labels
It is divided into basic selector and compound selector
Base selector: a selector consisting of a single selector
Including label selector, class selector, id selector and wildcard selector

1. Label selector

The label name is used as a selector to modify the style of a large class
The code is as follows (example):

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Label selector of base selector</title>
    <style>
    /* Tag selector: write superscript signature */
    p {
        color: green;
    }
    div {
        color: pink;
    }
    </style>
</head>
<body>
    <p>schoolboy</p>
    <p>schoolboy</p>
    <p>schoolboy</p>
    <div>girl student</div>
    <div>girl student</div>
    <div>girl student</div>
</body>

2. Class selector

Select one or more labels separately and use English
In style definition
class = "definition"“
.red {
color: red;
}
class="red"
The code is as follows (example):

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Selectors such as base selectors</title>
    <style>
        /* Class selector formula: style point definition structure class calls one or more development classes, which are most commonly used*/
      .red {
          color: red;
      }
      .star-sing {
        color: green;
      }
      .memeda {  
         color: pink;
      }
    </style>
</head>
<body>
    <ul>
        <li class="red">Ice rain</li>
        <li class="red">Love of the coming life</li>
        <li>Li Xianglan</li>
        <li class="memeda">Rare words</li>
        <li class="star-sing">Jiangnan style</li>
    </ul>
    <div class="red">I also want to turn red</div>
</body>

A label can specify multiple class names, save code and modify them uniformly. It is also convenient to separate each class name with a space

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>How to use multiple class names</title>
    <style>
        .red {
            color:  red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">Lau Andy</div>
</body>

3.id selector

The HTML element sets the id selector with the id attribute class. The id selector in CSS is defined with # to be called only once. Uniqueness is generally used with JS
#red {
color: red;
}
id="red"

The code is as follows (example):

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Basic selector id selector</title>
    <style>
        /* id Pithy formula of selector: style # definition and structure id can only be called once, and others should not use it */
      #pink {
          color: pink;
      }
    
    </style>
</head>
<body>
    <div id="pink">MichaelĀ·Jackson</div>
    <div>pink teacher</div>
</body>

4. Wildcard selector

Use * definition to select all elements (labels) in the page
No need to call, automatically format all labels

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wildcard selector of base selector</title>
    <style>
     * {
         color: red;
     }
     /* * Here, the tags of HTML body div span Li and so on are changed to red */
    </style>
</head>
<body>
    <div>my</div>
    <span>my</span>
    <ul>
        <li>It's still mine</li>
    </ul>
</body>

5. Summary

3, CSS font properties

Size, thickness and style

1. Font family

body {
Font family: 'Microsoft YaHei';
}
font-family: ‘Times New Roman’, Times, serif; You can specify multiple fonts separated by commas. First see if the first one is available, and then push it back in turn

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Font family of font attributes</title>
    <style>
     h2 {
         font-family: 'Microsoft YaHei ';
     }
     p {
        /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
        font-family: 'Times New Roman', Times, serif;
     }
    </style>
</head>
<body>
    <h2>pink Secret of</h2>
    <p>The most beautiful color in the crowd,</p>
    <p>grace,Indifferent,And so clear in my heart.</p>
    <p>The front end is always accompanied by difficulties and mistakes,</p>
    <p>Meditation,calm,Conquer one after another.</p>
    <p>We have to overcome it,</p>
    <p>This is pink The secret is also the teacher's final entrustment.</p>
</body>

2. Size font size

body {
font-size: 16px;
}
px pixel
The title label is special, and the text size needs to be specified separately
Generally, one is assigned to the body

Font weight-3

body {
font-weight: bold;
}
normal (400) / bold (700) / border / lighter / number (100-900)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Font size of font attribute</title>
    <style>
       .bold {
           /* font-weight: bold; */
           /* This 700 should not be followed by the unit, which is equivalent to bold. It is a bold effect */
           /* In actual development, we advocate using numbers to indicate bold or thin */
           font-weight: 700;    
       }
       h2 {
           font-weight: 400;   
           /* font-weight: normal;    */
       }
    </style>
</head>
<body>
    <p class="bold">We have to overcome it,</p>
    <p>This is pink The secret is also the teacher's final entrustment.</p>
</body>

4. Text style font style

Italics / non italics
body {
font-style: italic;
}
Italic / normal
normal is generally used to em i change back to non tilt

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Text style of font attribute(style)</title>
    <style>
      p {
          font-style: italic;
      }
      em {
          /* Let the inclined font not tilt is to hurry back */
          font-style: normal;
      }
    </style>
</head>
<body>
    <p>classmate,You in class</p>
    <em>You after class</em>
</body>

5. Composite attribute

Sequence font: font style font weight font size / line height font family;
Cannot replace sequential space separation
Unnecessary attributes can be omitted, but font size and font family must be retained

font: italic 700 16px 'Microsoft yahei';

4, CSS text properties

1. Color

Color defines the color of the text
Predefined color values
Hexadecimal
RGB

color: deeppink; 
color: #cc00ff;
color: rgb(255, 0, 255);

2. Text alignment

Text align horizontal alignment
Align left align right align right align center center

 <style>
        h1 {
            /* The essence is to align the text in the h1 box horizontally */
            /* text-align: center;left */
            text-align: right;
        }
    </style>

3. Decorative text

Text decoration underline

    <style>
       div {
           /* Underline */
           /* text-decoration: underline;   */
         /* Delete line */
           text-decoration: line-through;
           /* Upper scribe */
           text-decoration: overline;

       }
       a {
           /* Remove a default underline */
           text-decoration: none;
           color: #333;
       }
    </style>

4. Text indentation

Text indent first line indent effect
text-indent: 20px;
em the current text size. If the current element has no size set, it will be based on the text size of the parent element

    <style>
        p {
            /* How far is the first line of text indented  */
            /* text-indent: 20px; */
            /* If 2em is written at this time, it is the distance of indenting the current element by 2 text sizes  */
            text-indent: 2em;  
        }
    </style>

5. Row spacing

line-height: 26px; Row spacing

    <style>
       div {
           line-height: 26px;
       }
       p {
           line-height: 25px;
       }
    </style>

5, CSS introduction method

According to the position of CSS style writing, it is divided into inline style sheet (inline), internal style sheet (embedded) and external style sheet (linked)

1. Internal style sheet (embedded)

Write inside the HTML page and put it in the style tag
It is usually placed in the head tag to control the whole page style, but it is not completely separated

2. Inline style sheet (inline)

Set the CSS style in the style attribute inside the element tag and modify the simple style
style is the label attribute, written in double quotation marks

<p style="color: pink; font-size: 20px;">Give me a pink memory</p>

3. External style sheet (linked)

The style is written separately in the CSS file, and the CSS file is introduced into the HTML page for use
1. The new suffix is css file
2. link rel = "stylesheet" href = "css file path"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>External style sheet</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>Come on~Happy,There's plenty of time anyway...</div>
</body>
</html>

summary

CSS introduction
CSS basic selector
CSS font properties
CSS text properties
Introduction of CSS

Tags: css3 html5 css

Posted by podarum on Sun, 22 May 2022 04:58:44 +0300