CSS of programming language Java learning 02

·1, Selector
1.1html
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
      <style>
             h1{                                  
                  color:red;
                }
       </style>
</head>
<body>
         <h1>learn java</h1>
         <p>hear</p>
</body>
</html>

1.4 introduction modes of 2css

Internal style;

/*First kind*/
<h1 style = "color:red">content</h1>;
/*Second*/
<style>
	  h1{
         color:red;
	     }
</style>

External style;

/*Code written externally*/
<style>
   h1{
       color:red;
      }
</style>
/*Code written internally*/
<link rel = "stylesheet" href = "css/style.css">     /*href = "File name“*/

1.3 three basic selectors (key points)

Function: select an element on the page

Basic selector:

  1. tag chooser
  2. Class selector class
  3. id selector
<!DOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       
      <style>
               h1{                               /*1.Tag selector, automatically change the font color of all h1 changes on this page*/
                              color:red;
                   }
               .qiang{                          /*2.Class selector, which can change the class of this page*/Variable, cross label

                  }
               #Wo{/ * 3.id selector, which must be globally unique*/
                  
                  }
       </style>
</head>
<body>
  
<h1 class = "qiang" id = "wo">learn java</h1>
<h1 class = "qiang">learn JAVA</h1>
<p>hear</p>

</body>
</html>

/*Priority: id > class > tag chooser 

1.4 level selector (four types)
  1. Descendant selector:
body p{
       background:  red;
       }

2. Sub suspension selector

 body>p{
        background:red;
        }

3. Adjacent selector

.active+p{                    /*Only p2 color changes*/
          background:  red;
          }

4. Universal selector

.active~p{                 /*class ~ is used to indicate that all peers under active change*/
        background:red;
}
Example:
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
      <style>
             body p{
                    background: red;
                   }
             body>p{
                    background:red;
                    }
             .active + p{               /*Only p2 color changes, only the adjacent one below*/
                     background:   red;
                   }
             .active~p{                 /* All changes adjacent to P and below p*/
                  background: red;
              }
      </style>
</head>
<body>
           <p class = "active">p1</p>   
           <p>p2</p>
           <p>p3</p>
            <ul>
                <li>
                     <p>p4</p>
                </li>
                <li>
                      <p>p5</p>
                </li>       
                <li>
                      <p>p6</p>
                </li>

</body>
</html>
1.5 structure pseudo class selector

(four types will be used)

/*ul First child element of*/
ul li:first-child{
         background:red;
         }
/*ul Last child element of*/
ul li:last-child{
}
/*Select p1: navigate to the parent element, select the current first element, and select the parent element of the current p element. Only the current element can take effect*/
p:nth-child(1){
           }
/*Select the second type of the p element under the parent element*/
p:nth-of-type{
}
Example:
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       /*Avoid using id and class selectors*/ 
      <style>
       /*ul First child element of*/
            ul li:first-child{
                 background:red;
            }
      /*ul Last child element of*/
            ul li:last-child{
            }
      /*Select p1: navigate to the parent element, select the current first element, and select the parent element of the current p element. Only the current element can take effect*/
           p:nth-child(1){
           }
        /*Select the second type of the p element under the parent element*/
           p:nth-of-type{
          }
      </style>
</head>
<body>
           <p class>p1</p>   
           <p>p2</p>
           <p>p3</p>
           <ul>
                <li>p4</li>
                <li>p5</li>       
                <li>p6</li>
</body>
</html>
1.6 attribute selector (important)

1. Attribute name

a[id]{
      background: red;
      }

2. Attribute name plus attribute value

a[id=first]{      
          }

3. With some element

a[class*= link]{   
          }

4. Start with the above and end with the above

a[href^= http]{     
          }
Beginning:^=
Ending: $=

Example:

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       /*Avoid using id and class selectors*/ 
      <style>
       /*Element with id a[]{}*/
          a[id]{
               background: red;
          }
       /*Attribute name = attribute value*/
          a[id=first]{
               
          }
      /*  class Attribute with some links in*/
      /* *= Is to contain this element, = is absolutely equal to*/
      /*As long as there is a link in the class, it will change*/
          a[class*= link]{
               
          }
      /*Check the elements in the href that begin with http*/
           a[href^= http]{
               
          }
      </style>
</head>
<body>

<p class = "demo">
      <a href = "http://www.baidu.com" class = "link item" id = "first">1</a>
</body>
</html>
2, Beautify elements of web pages
2.1 font style

Span: it is used to express important and prominent words. Use span to cover them

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       
      <style>
/*
        font-famoily:     Font type
        font-size:        Font size
        font-weight:      Font weight
*/
      body{
          font-famoily:Regular script;
          font-size:
          font-weight: 
      }
      body{
          font:obligue lighter 16px Regular script;
      }
      </style>
</head>
<body>


</body>
</html>
2.2 text style
  1. colour

  2. Text alignment

  3. text-indent

  4. Line off line height single line file up and down ww

  5. Decoration: text decoration

  6. Horizontal alignment of text and picture: vertical align: middle;

Color:       
      <style>
         /*
             word
             rgb
             rgba
         */
         body{
         color: rgb(  ,    ,);
         color: rgba(   ,   ,   ,0 ~ 1);    /*transparency*/
         }
</style>
Text alignment:
<style>
        body{
        text-align:left;    /*Typesetting*/
        }
</style>
First line indent:
<style>
        body{
        text-indent:2em;    /*The first line is indented by 2 cells, and px refers to pixels*/
        height:300px;
        line- height:300px; /*When the row height is consistent with the block height, you can center up and down*/
        }
</style>
2.3 text shadow and hyperlink pseudo classes

Pseudo class:

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       <style>
       /*Default color*/
       p{
            
       }
       /*Hover color*/
       p: hover{
            
       }
       /*Mouse inactive color*/
       p: active{
            
       }

       </style>
</head>
<body>
    
<p> hhel</p>

</body>
</html>

Shadows:

<style>
       body{
       text-shadow       /*text-shadow:Shadow color, horizontal offset, s
       }
</style>
2.4 list
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
/*ul li
list-style:
     none:Remove the origin
     circle:Hollow circle
     decimal:number
*/
ul li{
     height:30px;
     list-style:none;
}

</style>

</head>
<body>
<ul>
   <li href= "#">hello</li>
   <li href= "#">hello</li>
   <li href= "#">hello</li>
</ul>
</body>
</html>
2.5 background

background color

Background picture

<style>

div{
     width:
     height:
     background-image url("images/tx.jpd");/*The default is tile all*/
}
.div1{
     background-repeat:repeat-x;/*tile horizontally*/
}
.div2{
     background-repeat:repeat-x;/*Tile vertically*/
}
.div3{
     background-repeat:no-repeat;/*no-repeat */
}
</style>
.title{
     /*Color picture picture position tiling method*/
    background: red url("../image/d.gif") 270px 10px no-repeat;
}
2.6 gradient
3, Box model
3.1 what is a box

Margin: outer margin

padding: inner border

border: border

3.2 border

1. Thickness of border

2. Border style

3. Border color

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
    #box{
          width:200px;
          border:Thickness, style, color;
          margin:0 auto;  /*Up, down, left and right*/
    }
div:nth-of-type(1)>input{
     border:3px solid black;       /*solid Solid dash dashed line*/
}
</style>

</head>
<body>

<div id="app">
    <h2>Member login</h2>
    <form action= "#">
       <div>
          <span>full name</span>
          <input type="text">
       </div>
       <div>
          <span>full name</span>
          <input type="text">
       </div>
       <div>
          <span>full name</span>
          <input type="text">
       </div>
    </from>
</div>

</body>
</html>
3.3 box calculation

Determine the size of an element:

margin + border + padding + content

3.4 rounded border
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
/*        Circle: radius = fillet
*/
 div{
     width: 100px;
     height: 100px;
     border: 10px solid red;
     border-radius: 10px;     /*Set fillet border*/
}
</style>

</head>
<body>

<div >
    
</div>

</body>
</html>
3.5 shadows
4, Float
4.1. Standard document flow

Block level element: exclusive row

Inline elements: do not monopolize a row

span a image ..

In line elements can be included in one line, and block level elements cannot be included

4.2.display
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
/*
             block :In block element
             inline:Inline element
             inline-block:
             none:
*/
 div{
     width: 100px;
     height: 100px;
     border:
     display:inline-block:
       
}
</style>

</head>
<body>

<div >
    
</div>
<span>
</span>

</body>
</html>
4.3.float
float: left
float: right
4.4 parent element collapse

clear:

clear:left;     /*Floating elements are not allowed on the left*/
clear:right;    /*Floating elements are not allowed on the right*/
clear:both;    /*Floating elements are not allowed on both sides*/

resolvent:

1. Increase the height of parent element

2. Add an empty div element to clear (but try to avoid empty div in the code)

3.overflow

/*Add one to the parent element:*/
overflow:scroll;    /**A scroll bar is generated*/

overflow:scroll; / * generates a scroll bar/

4. Add a pseudo in the parent class (recommended)

#father:after{
     content:'';
     display:block;
     clear:both;
}
4.5 comparison

display:

The position of the element cannot be determined, and the direction is not controllable

float:

You can change the position of the element, which is the same as the standard document flow, but you need to solve the problem of parent collapse

5, Positioning
5.1 relative positioning
position: relative;

bottom
top
left
right

Relative positioning still occurs in the standard document stream

5.2 absolute positioning
position: absolute

1. When there is no parent element, it is located based on the browser

2. Positioning relative to parent element

3. Move within the range of parent elements

(not in the standard document, the original position changes)

5.3 fixed positioning
5.4z-index

arrangement

5.5opacity

Floating elements are allowed*/
clear:right; / floating elements are not allowed on the right/
clear:both; / floating elements are not allowed on both sides/



resolvent:

1.Increase the height of the parent element

2.Add an empty div Element to clear(But try to avoid empty in the code div)

3.overflow

```css 
/*Add one to the parent element:*/
overflow:scroll;    /**A scroll bar is generated*/

overflow:scroll; / * generates a scroll bar/

4. Add a pseudo in the parent class (recommended)

#father:after{
     content:'';
     display:block;
     clear:both;
}
4.5 comparison

display:

The position of the element cannot be determined, and the direction is not controllable

float:

You can change the position of the element, which is the same as the standard document flow, but you need to solve the problem of parent collapse

5, Positioning
5.1 relative positioning
position: relative;

bottom
top
left
right

Relative positioning still occurs in the standard document stream

5.2 absolute positioning
position: absolute

1. When there is no parent element, it is located based on the browser

2. Positioning relative to parent element

3. Move within the range of parent elements

(not in the standard document, the original position changes)

5.3 fixed positioning
5.4z-index

arrangement

5.5opacity

Tags: Java css

Posted on Sun, 28 Nov 2021 19:43:14 -0500 by businessman332211