HTML5 + CSS3 front end tutorial – start from 0 and teach you how to learn about PC and mobile page development through a mall example. Chapter 3 is about CSS

Time:2021-8-19

Online demonstration of this tutorial case

PC terminal with network
Mobile terminal with road network

Free companion video tutorial

Free companion video tutorial

Tutorial supporting source code resources

Tutorial supporting source code resources

Consider how people are described

People{
   Height: 175cm;   
    Weight: 70kg;   
    Skin color: yellow
}

CSS basic syntax structure

Selector{
     Statement 1;
    Statement 2;

    }
h1 {
    font-size:12px;
    color:#F00;
}

Style label

<style type="text/css">
h1 {
    font-size:12px;
    color:#F00;
}
</style>

tag chooser

HTML tag as the name of the tag selector

<h1>…<h6>、<p>、<img/>
p { font-size:16px;}

Class selector

< tag name class = “class name” > tag content < / tag name >

. class name {font size: 16px;}

ID Selector

< tag name id = “ID name” > tag content < / tag name >

#ID name {font size: 16px;}

Tag selectors apply directly to HTML tags

Class selectors can be used multiple times in a page

ID selectors can only be used once on the same page

Making Huanxi sand

Use the label selector to set the title font size to 20px

The text font size in all paragraphs of the page is 16px

Use the class selector to set the font color of text and translation content to green

Use the ID selector to set the translation title color to blue

HTML5 + CSS3 front end tutorial - start from 0 and teach you how to learn about PC and mobile page development through a mall example. Chapter 3 is about CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  < title > Huanxi sand < / Title >
  <style type="text/css">
    h1 {
      font-size: 20px;
    }

    p {
      font-size: 16px;
    }

    .poem {
      color: green;
    }

    #title {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Huanxi sand</h1>
  <hr />
  < p class = "poem" > a song of new words and a glass of wine, < br / >
    Last year the weather in the old Pavilion< br />
    When will the sun set< br />
    There is no alternative but to let the flowers fall, < br / >
    Deja vu returns< br />
    The small garden path lingers alone.
  </p>
  < p id = "title" > Translation</p>
  < p class = "poem" > listen to a new song and drink a glass of wine, or the old pavilions in the weather last year, when will the setting sun come back?
    I have nothing to do with the falling flowers. The returning swallow is familiar and wandering alone in the flower path of the garden</ p>
</body>
</html>

CSS composite selector

Descendant Selectors

Intersection selector

Union selector

Descendant Selectors

In CSS selectors, HTML tags at special locations are declared in a nested manner

The outer label is written at the front and the inner label is written at the back, separated by a space

When tags are nested, the inner tag becomes the descendant of the outer tag

h3 strong{color:blue; font-size:36px;}

Intersection selector

It consists of two selectors connected directly, and the intersection of their respective element ranges is selected

The first must be a label selector, and the second must be a class selector or an ID selector

There must be no spaces between selectors. They must be written continuously

p.txt{color:blue; line-height:28px;}

Union selector

Multiple selectors are connected by commas

Use the union selector to declare the same style at the same time

h3,.first,.second,#end{
        font-size:16px; 
        color:green; 
        font-weight:normal;
}

Production of “flower thousand bones finale”

HTML5 + CSS3 front end tutorial - start from 0 and teach you how to learn about PC and mobile page development through a mall example. Chapter 3 is about CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    p strong,
    h1 strong {
      color: red;
    }
  </style>
</head>

<body>
  <h1>< strong > huaqiangu < / strong > Finale</h1>
  <p>The emperor xuanyuanlang, the omniscient Oriental Yuqing (in fact, he is the Immortal King beyond the six realms) and the holy king of the demon realm killed Qianmo. At that time, they all loved huaqiangu and hoped that Baizi painting could treat huaqiangu well</ p>
  <p>The kindness of Baizi painting is 81 soul killing nails, and ordinary immortals die and live with one soul killing nail. Hua qiangu received 17, and was painted by Baizi. He saw nearly 100 swords with duannian sword, < strong > the pain in Hua qiangu's heart is self-evident < / strong >. Then, spend a thousand bones and throw them into the dungeon. Baizi painting took the rest of the soul dispelling nails for her.
    < strong > Baizi painting < / strong >
    Informed by the neon sky, Mo Yande, the senior brother of Baizi painting, knew that Hua qiangu actually went against the principles of heaven and fell in love with Baizi painting. He poured heartless water into Hua qiangu's throat and face, so Hua qiangu was blind, dumb and disfigured, and was sent to a wild place where it was almost impossible to come out</ p>
  < strong > Hua qiangu is blind, dumb and disfigured < / strong >
</body>
</html>

Introducing CSS styles into HTML

  • Inline style
  • Internal style sheet
  • External style sheet

Inline style

<h1 style="color:red;"> Application of style attribute</h1>
<p style="font-size:14px;  color:green;"> Styles set directly in HTML tags</p>

Internal style sheet

CSS code is written in the < style > tag of < head >

advantage
It is convenient to modify the style on the same page

shortcoming
It is not conducive to sharing reusable code and maintenance among multiple pages, and the separation of content and style is not complete enough

External style sheet

The CSS code is saved in a stylesheet with a. CSS extension

There are two ways for HTML files to reference style sheets with. CSS extension

  • Linked
  • Import type

Link external style sheets

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

Import external style sheets

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

CSS inheritance features

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    body{color:red;}    
</style>
</head>
    <body>
        <p>
            Parent p
            < strong > children strong < / strong >
            Parent p
        </p>
        <ul>    
            <li>Child Li1</li>
            <li>Child Li2</li>
        </ul>
    </body>
</html>

HTML5 + CSS3 front end tutorial - start from 0 and teach you how to learn about PC and mobile page development through a mall example. Chapter 3 is about CSS

HTML5 + CSS3 front end tutorial - start from 0 and teach you how to learn about PC and mobile page development through a mall example. Chapter 3 is about CSS

Child labels can inherit the style of the parent label

A child label can override the style of the parent label without affecting the style of the parent label

<h1>Courage</h1>
< p class = "first" > in grade 3, I was a little girl who was as timid as a mouse. I never dared to answer the questions raised by the teacher in class for fear that the teacher would criticize me if I answered the wrong answer. I have never had the courage to answer the questions raised by the teacher. I didn't have the courage to participate in the activities held by the school.
</p>
< p id = "second" > in the second semester of grade 3, our class had an open class. The teacher asked a very < strong > Simple < / strong > question. Many students in the class raised their hands, even those whose grades were much worse than me, and said, "I'll come, I'll come." I looked around, but I didn't raise my hand.
</p>
p{color:red;} 
.first strong{color: blue} 

HTML5 + CSS3 front end tutorial - start from 0 and teach you how to learn about PC and mobile page development through a mall example. Chapter 3 is about CSS

CSS priority

ID selector > class selector > label selector

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
p{color:red;}        
.first{color:green;}    
</style>
</head>
<body>
< p class = "first" id = "PID" > in third grade, I was a little girl who was as timid as a mouse</ p></body>
</html>

Both P and. First match the label P, and green is the correct color

HTML5 + CSS3 front end tutorial - start from 0 and teach you how to learn about PC and mobile page development through a mall example. Chapter 3 is about CSS

Multiple CSS styles can exist for the same element in the HTML file. When styles with the same weight exist, they will be determined according to the sequence of these CSS styles, and the last CSS style will be applied

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
    p{color:red;} 
    p{color:green;}
</style>
</head>
<body>
    < p class = "first" id = "PID" > in third grade, I was a little girl who was as timid as a mouse</ p>
</body>
</html>

Inline style sheet (inside label) > embedded style sheet (in current file) > external style sheet (in external file).

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    p{color:red;}        
    p{color:blue;}    
</style>
</head>
<body> 
    < p class = "first" id = "PID" style = "color: green" > in third grade, I was a little girl who was < strong > as timid as a mouse < / strong ></ p> 
</body>
</html>

In some special cases, you need to set the highest weight for some styles. What should I do? We can use it at this time! Important to solve.

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    p{color:red!important;}         
    .first{color:blue;}   
</style>
</head>
<body> 
      < p class = "first" id = "PID" style = "color: green" > in third grade, I was a little girl who was < strong > as timid as a mouse < / strong ></ p>
</body>
</html>

HTML5 + CSS3 front end tutorial - start from 0 and teach you how to learn about PC and mobile page development through a mall example. Chapter 3 is about CSS