This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

❤️CSS prerequisites ❤️

  • Part ONE: Basic use of CSS
    • (1) What is CSS?
    • (2) Where is CSS written?
    • (3) Three introduction methods of CSS:
      • 1. Write directly in the label (set directly in the label)
        • Tips:
      • 2. Write in the style tag (add the < style > tag inside the < head > tag to set)
      • 3. Use an external. CSS file to set the CSS text, for example, 1. CSS
        • The first is to import a CSS file with @import “1.css”.
        • The second way is to import CSS files through < link >.
          • Tips:
      • Summary – Similarities and differences of the three introduction methods:
  • Part two: Selectors
    • 1. Label selector:
        • Note:
    • 2. Class selector (Class selector)
        • Small tip:
    • 3. The id selector
        • Small tip:
    • 4. Group selector
    • 5. Full selector
    • 6. Hierarchical selectors (divided into descendants, children, adjacent and sibling selectors)
      • (1) Descendant selector
      • (2) Descendant selector (can be selected layer by layer)
      • (3) Sibling selector
      • (4) Adjacent selector (adjacent sibling selector)
    • 7. Property selector
    • A summary of the use of selectors:
    • Pseudo-class selectors
  • Part three: common font styles
  • Part FOUR: common styles of text
  • Part five: Common styles of background
  • A small extension: Gradient with CSS:
    • (1) Linear gradient of gradient
    • (2) Radial gradient of gradient
    • (3) Extend a text gradient implementation:
  • In The End!

After being read by many friends, many friends sent me a private message urging me to release the CSS and JavaScript version ~👻

😬 (wry smile) since small partners study enthusiasm so strong, that I wear also can’t live up to you! So this blogger has been suffering all night, hard to work out the CSS version (the length is too long, still divided into two parts: the first is the basis, the next is advanced ~) 😬

😜 In these two posts, I’m taking you through the basics of CSS (Cascading Style Sheets) – if HTML is the structure of web pages, CSS is the makeup of web pages. 😜

Here we go! Here we go!! 💗 💗 💗

Boys and girls, take out your notebooks and start the class! (Keep your spirits up!)

Part ONE: Basic use of CSS

(1) What is CSS?

Cascading Style Sheets CSS (Cascading Style Sheets) If HTML is the structure of a web page, CSS is the makeup artist.

(2) Where is CSS written?

CSS can be written in three ways:

  1. Write it directly inside the label
  2. Write it inside the style tag
  3. Use external.css files

For the three ways to write CSS, there are three ways to introduce CSS, see below

(3) Three introduction methods of CSS:

1. Write directly in the label (set directly in the label)

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> How to import the CSS1</title> </head> <body> <! First introduction: inline style --> <! -- Note: only write in the opening tag or self-closing tag, not in the closing tag --> <! Add a style attribute to the tag directly, and write the style in the value of the style attribute. The style name is separated from the style value by a colon! -- > <! Note: The outermost style is set for the nested tag, which applies to all tags within it! --> <p style="color:red; font-size:30px;"> I am the paragraph tag </p> <! Advantages: intuitive, easy to tell which tag is being styled --> <! Disadvantages: code redundancy, poor readability of code with too many styles --> <! </body> </ HTML >Copy the code

Tips:

When setting the property color attribute, you can make a more intuitive and detailed selection of the color as shown in the picture below:

2. Write in the style tag (add the < style > tag inside the < head > tag to set)

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> How to import the CSS2</title> <! Second way to introduce: internal style --> <! < span style> p{color: RGB (51, 51, 51);#c481ff} < / style > < / head > < body > < p > I am a paragraph tag < / p > < / body > < / HTML >Copy the code

3. Use an external. CSS file to set the CSS text, for example, 1. CSS

The first is to import a CSS file with @import “1.css”.

The second way is to import CSS files through < link >.

1.CSS file content for use here:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> How to import the CSS3</title> <! -- The first type: link type (recommended)--> <! Relation is the relation between the HTML page and the style sheet linked to it. The href property is the path to the style sheet --> <link rel="stylesheet" href="1.css"> <! --> <style>        @import "1.css";</style> </head> <body> </style> </style> </head> <body> Third way to introduce: external styles (there are two) --> <! Tip: The way to create a.css file, in Pycharm, is to create a Stylesheet file --> <! Advantages: Separation of HTML files and styles makes code more readable and reusable! --> <p> I am the paragraph tag2</p>

</body>
</html>
Copy the code
Tips:

@import is not recommended because of the drawback of loading the entire page after it has been loaded. CSS file, if the page file is too large, will lead to the first appear without style of the page, blinking after the style of the page. < link > is recommended because it loads the.css file first and then the web page

Summary – Similarities and differences of the three introduction methods:

We don't use inline styles in real development! The most used style is external. The internal style ———— is usually used when writing a demo, because when sending a demo to others, only one file can be sent. Whether it's an external style, an internal style, or an in-line style, they all add styles to the tag. If a label is set to the same style (with different values) via an external style, it will overwrite the style ———— Rule of overwriting: the style written after overwrites the style written first!Copy the code

Part two: Selectors

(1) Selector weight:

In real life – whoever has the most power will listen to who, and the same is true for selector weights, who has the highest weight value will apply who. The weight here is judged by accuracy, and the higher the accuracy, the greater the weight.

(2) the use of the selector:

It is used to select and style exactly the elements (tags in HTML).

1. Label selector:

Find the label by its name.
Note: it will find all tags with the same name. 
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Label selector</title>
    
    <style>
        /* Label selector. Select the label directly on the page as a selector */
        p{
            color: chartreuse;

        }
    </style>
    
</head>
<body>

<p>I'm paragraph tag 1</p>
<p>I'm paragraph tag 2</p>

</body>
</html>
Copy the code

Note:

You can understand that the whole thing below is called a selector!!

2. Class selector (Class selector)

Through the tag’s class attribute, select the corresponding element, using the concept of a class, one definition, can be used in multiple places.
Usage scenario: It is used to style multiple tags (often requiring the same style).
A tag can have multiple class values separated by Spaces, and the tag will have all of the styles contained in the class. 
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class selectors</title>

    <style>
        /* Class selector, also known as class selector. Select */ through
        .p1{
            color:red;
        }
    </style>

</head>
<body>

<p class="p1">I'm the paragraph tag</p>

</body>
</html>
Copy the code

Small tip:

The class selector can select more than one because the class attribute is not unique; But the ID selector can only select one, because the ID is unique.

3. The id selector

Select the corresponding element from the id attribute of the tag. 
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The id selector</title>

    <style>
         /* The third selector: the id selector uses # to select */
        #p2{
            color:cadetblue;
        }
    </style>

</head>
<body>

<p id="p2">I'm the paragraph tag</p>

</body>
</html>
Copy the code

Small tip:

The weight of the above three selectors: ID selector > Class selector > label selector

Extension: If a tag has the same style set by the id selector and the class selector, and we want the background-color set by the class selector to take effect, but look at the above selector weight — the class selector weight is lower than the ID selector weight, the id selector should take effect. But we can do this by adding! Import to make it work!!

! Important is the most weighted!!

Note: it is! Important only works on values of a single style. It is not a selector!

4. Group selector

Group selectors are selectors that can select multiple labels at the same time. 
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Group selector</title>

    <style>
        /* Group selectors are separated by commas. * /
        p.span{
            color: #ff82c1;
        }
    </style>

</head>
<body>

<p>I'm the paragraph tag</p>
<span>I'm a text label</span>
<h1>I'm a level one tag</h1>

</body>
</html>
Copy the code

5. Full selector

As the name implies, select all tags! 
<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"< img SRC = "http://image.tingclass.com" style = "border-bottom: 0px; border-bottom: 0px; border-left: 0px;#a3ff50} < / style > < / head > < body > < p > I am a paragraph tag < / p > < h1 > I am a primary title < / h1 > < h2 > I am a secondary tag < / h2 > < span > I am a text label < / span > < / body > < / HTML >Copy the code

6. Hierarchical selectors (divided into descendants, children, adjacent and sibling selectors)

Note: Block labels can be nested with inline labels and other block labels; Inline labels can only nest text and other inline labels, but block labels cannot be nested.

One exception: p tags and H tags cannot nest block tags, nor can they nest themselves, only inline tags!!

(1) Descendant selector

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Descendant selector</title>

    <style>
        /* Hierarchy selector first: Descendant selectors are separated by Spaces */
        /* Descendants are all the tags nested within it */
        /* All ol tags in the div tag are descendants of the div tag */
        div ol{
            list-style: none;
        }
    </style>
    
</head>
<body>

<div>
    <ol>
        <li>I'm ordered list 1</li>
        <li>I'm ordered list 2</li>
        <li>I'm ordered list 3<ol>
                <li>I'm ordered list 111</li>
                <li>I'm ordered list 222</li>
            </ol>
        </li>
    </ol>
</div>

</body>
</html>
Copy the code

(2) Descendant selector (can be selected layer by layer)

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child selector</title>

    <style>
        The second type: child selectors are separated by > */
        /* The child selector can only select its son, in this case the son of the unordered list with id ul1
        /* The selectors in the above syntax can be id selectors, class selectors can also be tag name selectors */
        #ul1>li{
            list-style: none;       /* This property removes the style of the list, which stands for removing the small circle in front of the unordered list */
        }
    </style>

</head>
<body>

<! Child selectors Colors, fonts, and so on are inherited in child selectors. So use the list-style property here to observe -->
<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    </li>
</ul>

</body>
</html>
Copy the code

(3) Sibling selector

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sibling selector</title>

    <style>
        /* Sibling selectors use ~ to select */
        /* If they have the same father, they are called brothers */
        /* In this case, p2's father is body, so the body is filled with his brothers and because the code executes from top to bottom, I am not selected as paragraph tag 1*/
        #p2~p{
            color:#ff8971
        }
    </style>

</head>
<body>

<p>I'm paragraph tag 1</p>
<p id="p2">I'm paragraph tag 2</p>
<p>I'm paragraph tag 3</p>
<p>I'm paragraph tag 4</p>

</body>
</html>
Copy the code

(4) Adjacent selector (adjacent sibling selector)

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> < span style> < span style> The adjacent selector selects with + */ /* first finds the sibling and then selects the adjacent */ /* in this case, because the code is executed from top to bottom, I am not selected as a paragraph tag1* /#p2+p{
            color:#ff8971} </style> </head> <body> <p1</p>
<p id="p2"I am the paragraph tag2</p> <p> I am the paragraph tag3</p> <p> I am the paragraph tag4</p>

</body>
</html>
Copy the code

7. Property selector

<! DOCTYPE html> <html lang="en"< span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important;"UTF-8"> <title> property selector </title> <style> /* Property selector selects all p tags that have the name attribute1P [name="p1"*/ p[name]{color: red; } </style> </head> <body> <p name="p1"I am the paragraph tag1</p>
<p name="p2"I am the paragraph tag2</p>
<p name="p3"I am the paragraph tag3</p> <p> I am the paragraph tag4</p>

</body>
</html>
Copy the code

A summary of the use of selectors:

Weight size comparison summarizes a word: the more specific (is the beginning of the accuracy of said) the greater the weight; The more fuzzy the weight is!



Pseudo-class selectors

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> pseudo class selector </title> <! -- Pseudo-class selector --> <! -- Syntax -- selector: pseudo-class name --> <! If you want to add to an element4(link visited hover active) --> <style> /* a:link{color: RGB (51, 51, 51);#ff25ec;} /* Hover style applies to all tags */ a:hover{color:#3b29ff;} /* When activated, that is, when clicked, applies to all tags */ a:active{color:#ff9d47;} /* A :visited{color:green; } </style> </head> <body> <! --# empty link -->
<a href="#"> I am hyperlink </a> </body> </ HTML >Copy the code

Part three: common font styles

Can be through -- > pay attention to my operation ** public number ** -- [lonely] public number background reply [CSS], can get all the code compression package ~<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Common styles of fonts</title>
    <style>
        p{
            /* Type of font (e.g. : boldface, Song style, song style...) * /
            font-family: black body;/* Font size (default size is 16px) */
            font-size: 30px;
            
            /* The font style (italic or normal) */
            font-style: italic;
            
            /* Font size (default thickness is normal -- 400) bold is bold */
            font-weight: bold;
            
            /* Change the size of lowercase letters to uppercase letters */
            font-variant: small-caps;
            
            /* Variant weight /height family = variant weight /height family * /
            font:italic small-caps normal 50pxBlack body; }</style>
</head>
<body>

<p>I'm the paragraph tag</p>
<p>HELLO</p>
<p>hello</p>


</body>
</html>
Copy the code

Part FOUR: common styles of text

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Common text styles</title>
    <style>
        p{
            /* Used to set the alignment of text within the label ————left (left aligned, default); Center (center aligned); Right (right aligned) */
            text-align: left;
			
			/* Sets the height of a single line of text within the tag */
			line-height:40px;			

            /* The first line indent em is a Chinese text spacing can also be used px unit 1em=16px*/
            text-indent:2em;

            /* Text line underline; Line-through is called overline none: removes text lines */
            text-decoration: underline;

            /* The distance between words */
            letter-spacing: 1em;

            /* Word-spacing Write text in the bottom p tag, separated by space is a single word */
            word-spacing:50px;

            /* Line height can support the height */
            /* Push height is the height of an element that can be pushed up to that height by setting the row height */
            /* One application: center a single line of text vertically (centered in the vertical direction) : height = line height */
            line-height: 50px;		
			
			/* Used to set the newline mode ————normal (default, normal newline after a full line); Nowrap (without line breaks) */
			white-space: normal;
			
			/* Used to set the handling of content beyond the label ————hidden (out of part hidden); * /
			overflow: hidden;
			
			/* What does the text do when setting the text overflow tag ————ellipsis (set to display ellipses) */
			text-overflow: ellipsis; 
        }

        a{
            /* Set the decorator mode for the text ————underline (underline); Line-through (line); */
            /* You can remove underscores under hyperlinks by setting them to None! * /
            text-decoration: none;
        }

    </style>
</head>
<body>

<! Note: If the label is inline, such as the span label, it is always centered, changing the alignment will not work. Because the inline element setting width and height is invalid, it is only relevant to the content. -->

<p>I'm a paragraph tag</p>
<p>Shanghai, Henan, China</p>
<a href="">111</a>

</body>
</html>
Copy the code

Line height applications to achieve a single line of text vertically centered:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>An application of line height</title>
    <style>
        p{
            /* Center a single line of text vertically by making line height = height */
            height: 200px;  / * * /
            line-height: 200px;  / * * /
        }
    </style>
</head>
<body>

<p>I'm the paragraph tag</p>

</body>
</html>
Copy the code

(I run a wechat official account: Lonely)

(Welcome to the attention of those who like Python and programming!)

Part five: Common styles of background

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Common styles for backgrounds</title>
    <style>
        div{
            /* Sets the width and height of div */
            /* Line elements cannot be set width and height; Block elements or row-level block elements can set the width. If the width is not set, the default width is used -- the same width as the parent label; If the height is not set, the default height is supported by the content! * /
            width:300px;
            height:300px;

            /* Sets the background color */
            /* How to write the background color: 1. English words for colors (e.g. Red,yellow...) ; 2.# add 6 hexadecimal digits (the first two digits are red, the middle two are green, and the last two are blue). The value range of red green blue is 00~FF/ FF) ———— development of the most commonly used writing; 3. RGB (red, green, blue) functions get a color ———— is generally used for JS code; 4. Rgba (red, green, blue, opacity) function to get a color ———— is generally used in JS code */
            background-color: #a3ff50;

            /* Background image url Write image path */
            background-image: url("");

            /* The size of the background can also be set using a percentage, which is referenced to its container */
            background-size:100px 100px;

            If the background image is small, you can put more than one image on the div. Not tiling is only put a */
            background-repeat: no-repeat;

            /* Background positioning can be done using percentage positioning (two percentage data, the first relative to left and the second relative to top) */
            background-position: center;

            /* The compound style should also be in the order (separated by a space, if you do not want to set the size, write the value of the positioned attribute to 0) the order of the attributes is: background-color bacfground-image background-repeat background-position/background-size */
            background:red url(""); }</style>
</head>
<body>

<div>

</div>

</body>
</html>
Copy the code

A small extension: Gradient with CSS:

In the previous article on Canvas, we also implemented various gradients through Canvas. You can check it out. In order to make my sister learn Canvas in 20 minutes, I stayed up late and had a small project in this article [❤️ suggested to collect ❤️].

(1) Linear gradient of gradient

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A linear gradient of gradient</title>
    <style>
        #div1{
            width:300px;
            height: 300px;
            /* Linear-gradient () is used to achieve linear gradient */
            /* Note: the gradient of the color is achieved by the gradient of the image, you can put multiple colors in the function to achieve the gradient */
            /* The default gradient is from top to bottom to right,to left,to top,to butTom right(from top to right to bottom). You can also gradient at an Angle in the format: degree deg, for example: 90deg */
            background-image: linear-gradient(to left,skyblue,pink);
        }
    </style>
</head>
<body>

<div id="div1" class="div2">

</div>

</body>
</html>
Copy the code

(I run a wechat official account: Lonely)

(Welcome to the attention of those who like Python and programming!)

(2) Radial gradient of gradient

Can be through -- > pay attention to my operation ** public number ** -- [lonely] public number background reply [CSS], can get all the code compression package ~<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Radial gradient of gradient</title>
    <style>
        #div1{
            width: 200px;
            height: 300px;
            /* Radial gradient() is used to implement radial gradient */
            /* Note: the color gradient is achieved by the gradient of the image */
            /* By default, the ellipse is a gradient from the center outward
            background-image: radial-gradient(ellipse,skyblue,pink,white);

        }
    </style>
</head>
<body>

<div id="div1">

</div>

</body>
</html>
Copy the code

(3) Extend a text gradient implementation:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gradient text gradient</title>
    <style>
        span{
            /* Set the gradient for the background */
            /* The default color gradient of text is from top to bottom. If you change the direction of the gradient, add it before the color, for example: to right*/
            background-image: linear-gradient(to right,blue,black);
            /* Specifies that the area where the background gradient is drawn is set to the text area */
            -webkit-background-clip: text;
            /* Set the original text to transparent */
            color: transparent;
        }
    </style>
</head>
<body>

<! Text itself can not be set to gradient, we use the background gradient to achieve text gradient -->
<span>I am gradient text, I am super handsome!</span>

</body>
</html>
Copy the code

In The End!

Start now, stick to it, a little progress a day, in the near future, you will thank you for your efforts!

This blogger will continue to update the basic column of crawler and crawler combat column (in order to better partners for page analysis, will also update part of the front-end essential knowledge points blog!) For those of you who have read this article carefully, please like it and comment on it. And can follow this blogger, read more crawler in the days ahead!

If there are mistakes or inappropriate words can be pointed out in the comment area, thank you! If reprint this article, please contact me to explain the meaning and mark the source and the name of the blogger, thank you!Copy the code