020_CSS3

Time:2021-3-5

How to learn CSS

  1. What is CSS
  2. How to use CSS (quick start)
  3. CSS selector (key)
  4. Beautify web pages (text, shadows, hyperlinks, lists, gradients…)
  5. Box model
  6. float
  7. location
  8. Web animation (special effects)

What is CSS

  1. Cascading style sheet
  2. CSS performance (beautify web page)
  3. Font, color, margin, width, height, background image, page positioning, page floating

History of development

  1. CSS1.0
  2. CSS2.0 div + CSS, the idea of separating HTML and CSS structure, makes web pages simple and conducive to SEO (search engine optimization)
  3. Css2.1 floating, positioning
  4. Css3.0 fillet, shadow, animation Browser compatibility needs to be considered

quick get start

  1. The first way is to write CSS code in style tag;
Title
    
    
        h1{
            color:red;
        }
    


Martial arts world
  1. The second way is to write CSS file and introduce CSS file into HTML page; (recommended)
Title
    


Martial arts world
h1{
    color:red;
}

Advantages of CSS

  1. Separation of content and expression
  2. The structure of web pages is uniform and can be reused
  3. The style is very rich
  4. Conducive to SEO, easy to be included by search engines

Three ways to import CSS

  1. In line style
  2. Interior style
  3. Exterior style
  4. Priority: the principle of proximity, in line style first, internal style and external style to see who is close
Title
    
    
    
    
        h1{
            color: antiquewhite;
        }
    




Martial arts world
h1{
    color:red;
}

Expansion: two ways of writing external style

  1. Linked
  1. Import: @ import is unique to css2.1
@import url("css/style.css");

selector

Basic selector

  1. Label selector: select the same type of label {}
  2. Class selector: select the label of the same class attribute. Class name {}
  3. ID selector: globally unique ID name {}
  4. Priority: ID selector > class selector > label selector
1. Label selector
    
        /*The tag selector selects all the elements of the tag on the page*/
        h1{
            background: aqua;
            border-radius: 25px;
        }
        p{
            color: red;
            font-size: 80px;
        }
    


Martial arts world
Martial arts world
Meteor butterfly sword
2. Class selector
    
        /*Format of class selector: name of class {}
        Advantages: multiple tags can be classified, the same class can be used, and can be reused
        */
        .one{
            color: antiquewhite;
        }
        .two{
            color: aqua;
        }
    


the Nine Yang Manual
The nine Yin manual
Taiji boxing

Eighteen dragon subduing palms
3. ID selector
    
        /*ID selector, globally unique*/
        #one{
            color: antiquewhite;
        }
    


the Nine Yang Manual

Hierarchy selector

  1. Descendant selector body P {}
  2. Sub selector body > P {}
  3. Adjacent selector: only one, adjacent down. Active + P {}
  4. General selector, all sibling elements downward. Active ~ p {}
4. Level selector
    
        /*Descendant selector: includes all descendants, children, grandchildren */
        body p{
            background: #cf8ab1;
        }
    


    p1
    p2
    p3
    
        
            p4
        
        
            p5
        
        
            p6

image.png

4. Level selector
    
        /*Descendant selector: includes all descendants, children, grandchildren */
        /*body p{*/
            /*background: #cf8ab1;*/
        /*}*/
        /*Subselector*/
        body>p{
            background: #cf8ab1;
        }
    


    p1
    p2
    p3
    
        
            p4
        
        
            p5
        
        
            p6

image.png

4. Level selector
    
        /*Descendant selector: includes all descendants, children, grandchildren */
        /*body p{*/
            /*background: #cf8ab1;*/
        /*}*/
        /*Subselector*/
        /*body>p{*/
            /*background: #cf8ab1;*/
        /*}*/
        /*Adjacent selector, only one, and adjacent down*/
        .active+p{
            background: #cf8ab1;
        }
    


    p1
    p2
    p3
    
        
            p4
        
        
            p5
        
        
            p6

image.png

4. Level selector
    
        /*Descendant selector: includes all descendants, children, grandchildren */
        /*body p{*/
            /*background: #cf8ab1;*/
        /*}*/
        /*Subselector*/
        /*body>p{*/
            /*background: #cf8ab1;*/
        /*}*/
        /*Adjacent selector, only one, and adjacent down*/
        /*.active+p{*/
            /*background: #cf8ab1;*/
        /*}*/
        /*Universal selector, down all sibling elements*/
        .active~p{
            background: #cf8ab1;
        }
    


    p1
    p2
    p3
    p4
    p5
    
        
            p4
        
        
            p5
        
        
            p6
        
    
    p6
    p7

image.png

Structure pseudo class selector

5. Structure pseudo class selector
    
        /*The first child element of UL*/
        ul li:first-child{
            background: #cf8ab1;
        }
        /*The last child element of UL*/
        ul li:last-child{
            background: aqua;
        }
        /*Select the first child element of the parent element of the current P element, and it takes effect only when it is a P element*/
        p:nth-child(1){
            background: antiquewhite;
        }
        p:nth-child(2){
            background: antiquewhite;
        }
        /*Select the second P child of the parent element of the current P element*/
        p:nth-of-type(2){
            background: aquamarine;
        }
        /*Hover effect*/
        a:hover{
            background: black;
        }
    


    h1
    p1
    p2
    p3
    p4
    p5
    
        li1
        li2
        li3
    
    p6
    p7
    A label

image.png

attribute selectors

  1. “Value is the complete word”Type comparison symbol:~=|=
  2. “Splice string”“Comparison symbol of type:*=^=$=
  3. The [attribute ~ = value] attribute contains the independent word value
  4. Split the string in the [attribute * = value] attribute as long as the word value can be split
  5. [attribute | = value] must be a complete and unique word in the attribute, or useSeparate
  6. Attribute ^ = value] the first few letters of the attribute are value
  7. The last few letters of the [attribute $= value] attribute are value
6. Property selector
    
        .demo a{
            display: block;
            float: left;
            width: 50px;
            height: 50px;
            background: #cf8ab1;
            border-radius: 10px;
            margin-right: 10px;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            font-size: 20px;
        }

        /*Element with ID attribute*/
        a[id]{
            background: red;
        }
        /*Element with ID attribute value = first*/
        a[id=first]{
            background: orange;
        }
        /*The class attribute value contains the element of links*/
        a[class*=links]{
            background: yellow;
        }
        /*Elements beginning with HTTP in the HTTP attribute*/
        a[href^=http]{
            background: green;
        }
    



    1
    2
    3
    4
    5
    6
    7
    8

image.png

Beautify web page elements

Why beautify web pages

  1. Effective delivery of page information
  2. Beautify the page, beautiful page, in order to attract users
  3. Highlight the theme of the page
  4. Improve user experience

Span label: for the text that needs to be highlighted, use span to set the style separately

Font style

Title
    
        /*
        Font family: font
        Font size: font size
        Font weight: font thickness
        Color: font color
        */
        body{
            Font family: "ebrima", in italics;
            color: darkkhaki;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    


Martial Arts (martial arts culture)
Chivalry is a unique popular culture in the Chinese community. Martial arts culture takes all kinds of swordsmen as the protagonist, and takes the supernatural martial arts skills as the characteristics to portray and publicize the spirit of swordsmen.
There is a certain cultural connection between martial arts and Confucianism. Martial arts can be divided into ancient and Republic martial arts according to time, new, old and ancient immortal martial arts according to genre. The authors of martial arts include Jin Yong, Gu Long, Liang Yusheng, Wen Ruian of the 20th century, contemporary and other writers.
Whenever you need me, I'll be here。 Whenever you're in trouble, I'm always near。Whenever you feel alone, and you think everyone has given up。。。Reach out for me, and I will give you my everlasting love。

image.png

Text style

  1. colour
  2. text alignment
  3. text-indent
  4. Row height
  5. decorate
Title
    
        /*
        RGBA color: red (0-255), green, blue, transparency (0-1)
        Text align typesetting; center, left, right
        Indent the first line of a text indent paragraph
        If the line height is consistent with the height of the block, it can be vertically centered
        Text decoration, underline, middle line, overline
        */
        h1{
            color: rgba(255,0,255,0.8);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
            height: 50px;
            background: darkkhaki;
            line-height: 50px;
            text-decoration: underline;
        }
    


Martial Arts (martial arts culture)
Chivalry is a unique popular culture in the Chinese community. Martial arts culture takes all kinds of swordsmen as the protagonist, and takes the supernatural martial arts skills as the characteristics to portray and publicize the spirit of swordsmen.
There is a certain cultural connection between martial arts and Confucianism. Martial arts can be divided into ancient and Republic martial arts according to time, new, old and ancient immortal martial arts according to genre. The authors of martial arts include Jin Yong, Gu Long, Liang Yusheng, Wen Ruian of the 20th century, contemporary and other writers.
Whenever you need me, I'll be here。 Whenever you're in trouble, I'm always near。Whenever you feel alone, and you think everyone has given up。。。Reach out for me, and I will give you my everlasting love。

image.png

Hyperlink pseudo class and shadow

/*Default color*/
a{
    text-decoration: none;
    color: #000;
}
/*Mouse hover*/
a:hover{
    color:orange;
    font-size: 50px;
}

/*Text shadow: shadow color, horizontal offset, vertical offset, shadow radius*/
#price{
    text-shadow: #3cc7f5 10px -10px 2px;
}

List style

3. List
    



    All commodity categories
    
        Audio and video
        Home appliances and mobile phones
        Computer office
        Home decoration
        Clothing, shoes and hats
#nav{
    background: rgba(52, 19, 39, 0.57);
    width: 300px;
}
.title{
    text-indent: 1em;
    background: red;
    font-size: 24px;
    font-weight: bold;
    line-height: 35px;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    color: #000;
}
a:hover{
    color: aqua;
}

background

  1. background color
  2. Background picture
4. Background
    
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /*Default tile*/
            background-image: url("https://www.cnblogs.com/wl3pb/p/images/1.jpg");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
/*Color picture position tiling*/
background: red url("../images/d.gif") 270px 10px no-repeat;

background-image: url("../images/r.gif");
background-repeat: no-repeat;
background-position: 236px 2px;

image.png

Gradual change

https://www.grabient.com/
After adjusting the effect, copy, you can copy the CSS code

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

image.png

Box model

What is a box model

image.png

  1. Margin outer margin
  2. Padding inner margin
  3. Border

frame

/*Remove all outside and inside margins*/
body,h1,ul,li,a{
    margin: 0;
    padding: 0;
}
/*Body: thickness style color*/
#box{
    border: 1px solid red;
}

Inside and outside margins

/*Center outer margin setting*/
#box{
    margin: 0 auto;
}

Rounded border

div{
  border-radius: 10px;
}
/*Round picture generated by rounded border*/
img{
  border-radius: 25px;
}

image.png

shadow

/*Text shadow*/
/*Text shadow: shadow color, horizontal offset, vertical offset, shadow radius*/
#price{
    text-shadow: #3cc7f5 10px -10px 2px;
}

/*Box shadow*/
/*Box shadow: shadow color, horizontal offset, vertical offset, shadow radius*/
#box{
    box-shadow: #3cc7f5 10px -10px 2px;
}

float

display

/*
Block element
Inline in line element
Inline block is a block element, but on one line
None hidden
*/
div{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  display: inline;
}
span{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
}
div{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  display: none;
}

float

/*
Float: left
Float: right
Clear: right; floating elements are not allowed on the right side
Clear: left; floating elements are not allowed on the left
Clear: both; floating elements are not allowed on both sides
Clear: none; floating elements are allowed
*/
.layer01{
  float: left;
}
.layer01{
  float: right;
}

Collapse of parent border

Solution:

  1. Increase the height of the parent element
#father{
  border: 1px solid #000;
  height: 800px;
}
  1. Add an empty div tag to clear the float
.clear{
  clear: both;
  margin: 0;
  padding: 0;
}
  1. Add overflow: hidden to the parent element;
#father{
  border: 1px solid #000;
  overflow: hidden;
}
  1. Add pseudo class after to parent element
#father{
  border: 1px solid #000;
}
#father:after{
  content: '';
  display: block;
  clear: both;
}

location

Relative positioning – offset from your original position

  1. The original position will be preserved
  2. position: relative;
  3. top: -10px;
  4. bottom: 20px;
  5. left: 30px;
  6. right: -40px;
The first box
  The second box
  The third box
body{
  padding: 20px;
}
div{
  margin: 10px;
  padding: 5px;
  font-size: 12px;
  line-height: 25px;
}
#father{
  border: 1px solid #666;
  padding: 0;
}
#first{
  border: 1px dashed #666;
  background-color: red;
  /*Relative positioning*/
  position: relative;
  top: -10px;
  left: 20px;
}
#second{
  border: 1px dashed #666;
  background-color: green;
}
#third{
  border: 1px dashed #666;
  background-color: blue;
}

Absolute positioning – offset from parent or browser

  1. The original position will not be retained
  2. In the absence of parent element positioning, it is relative to browser positioning
  3. Assuming that the parent element has positioning, it is usually offset from the parent element
  4. Move within parent element
  5. Parent element: position: relative;
  6. Child element:
    1. position: absolute;
    2. top: 10px;
    3. bottom: 10px;
    4. left: 10px;
    5. right: 10px;
The first box
  The second box
  The third box
body{
  padding: 20px;
}
div{
  margin: 10px;
  padding: 5px;
  font-size: 12px;
  line-height: 25px;
}
#father{
  border: 1px solid #666;
  padding: 0;
  /*If not, the child element is positioned relative to the browser; sometimes, the child element is positioned relative to the parent element*/
  position: relative;
}
#first{
  border: 1px dashed #666;
  background-color: red;
  /*Absolute positioning*/
  position: absolute;
  top: 30px;
  left: 20px;
}
#second{
  border: 1px dashed #666;
  background-color: green;
}
#third{
  border: 1px dashed #666;
  background-color: blue;
}

Fixed positioning

  1. position: fixed;
  2. top: -10px;
  3. bottom: 20px;
  4. left: 30px;
  5. right: -40px;
The first box
  The second box
  The third box
body{
  padding: 20px;
}
div{
  margin: 10px;
  padding: 5px;
  font-size: 12px;
  line-height: 25px;
}
#father{
  border: 1px solid #666;
  padding: 0;
}
#first{
  border: 1px dashed #666;
  background-color: red;
  /*Fixed positioning*/
  position: fixed;
  bottom: 10px;
  right: 0;
}
#second{
  border: 1px dashed #666;
  background-color: green;
}
#third{
  border: 1px dashed #666;
  background-color: blue;
}

z-index

/*The default value of Z-index is 0 and the maximum value is infinite*/
z-index: 999;
/*Background transparency*/
opacity: 0.5;

CSS3 animation

summary

Recommended Today

Rust and python: why rust can replace Python

In this guide, we compare the rust and python programming languages. We will discuss the applicable use cases in each case, review the advantages and disadvantages of using rust and python, and explain why rust might replace python. I will introduce the following: What is rust? What is Python? When to use rust When to […]