current position:Home>CSS notes

CSS notes

2022-06-24 08:43:41Wavelet (Learning version)

 1.Css Three common import methods

Inline style , Internal style , External style

priority : In line with the principle of proximity ( Cover ), The browser executes from top to bottom .

Inline style :

<body>
<!-- Inline style -->
<h1 style="color: green"> I'm the label </h1>
</body>

External style :

1. Linked :html
html page :  
 <!--     External style -->
    <link rel="stylesheet" href="style.css">
Css page :
h1{
    color: darkred;
}
2. Import type  Css2.1 characteristic 
<style>
       @import url("style.css");
</style>

Internal style :

<!--    Internal style -->
    <style>
        h1 {
            color: green;
        }
    </style>

2. Three basic selectors

id Selectors > class > tag chooser

2.1 tag chooser :

   <style>
        h1{
            color:blue;
        }

    </style>

2.2 Class selectors


    <style>
      .wei{
          color: aqua;
      }
      .bo {
          color: black;
      }
      .shuai{
            color:blue;
        }

    </style>

 2.3 id Selectors

 <style>
        #wei{
            color:green;
        }
 </style>

3. Hierarchy selector

  3.1 Descendant selector choice p All labels after the label

 <style>
        body p{
            background:brown;
        }
    </style>

effect :

 3.2 Subclass selector   Select the same category of labels  

  <style>
        body>p{
            background:brown;
        }
    </style>

effect :

 3.3 Adjacent Sibling Selectors Select the next class of the given class

    <style>
        .wei+p{
            background:brown;
        }
    </style>

effect :

 3.4 Universal brother selector All tags of the same kind under the given class

    <style>
        .wei~p{
            background:brown;
        }
    </style>

effect :

 4. Structure pseudo class selector

  Structure pseudo class selector function : Filter by criteria

      <style>
        ul li:first-child{
            background:yellow;
        }
        ul li:last-child{
            background:green;
        }
    /*     Choose p The first child element of the parent element of the element */
        p:nth-child(1){
            background: blue;
        }
        /* Select... Under the parent element p The first element of the element */
        p:nth-of-type(1){
            background: green;
        }
    </style>

effect :

5. Attribute selector

/* Property name  :  Property name = Property value ( Regular expressions )
 =  Absolutely equal to 
 *= Contains this element 
 ^= Start with this 
 $=  To end with this     
*/

Example : Check to include www The element background of is changed to yellow

    a[href*=www]{
        background: yellow;
    }

effect :

 6. Beautify the web

        6.1 Font style :

font-weight:bolder;// The font is bold 
font:oblique bolder 12px " Regular script ";

        6.2 Text style

1. Color : color
2. text alignment  text-align: center
3.  The first line indentation  text-indent: 2em
4.  Row height  line-height: 300px;
5.  Underline  text-decoration
    text-decoration:underline// Underline 
    text-decoration:line-through// Center line 
    text-decoration: overline// Top line 
    text-decoration: none// Underline hyperlinks 
6. picture , Align text horizontally 
img,span[vetical-align:middle]

        6.3 Text shadow and hyperlink pseudo classes

 <style>
        a{
            /* Mouse default color */
            text-decoration: none;
            color:black;
        }
        a:hover{
            /* Mouse hover color */
            color:pink;
        }
        a:active{
            /* Press and hold the mouse in the unreleased state */
            color:green;
        }
 </style>

effect :       

         6.4 A list of the style

ul li{
    height: 30px;
    list-style:circle;
    text-indent: 1em;
}
ul{
    background: cadetblue;
}
list-style:
    none  Remove the origin 
    circle  Hollow circle 
    decimal  Numbers 
    square  Square 

7. Box model with rounded corners and shadows

 margin: Margin   padding: padding border: Frame

 <style>
        #box{
            width: 300px;
            border: 1px solid blue;
            box-shadow: 10px 10px 100px skyblue;// Add shadows 
            /* Set the outer margin to 0 And in the middle */
            margin: 0 auto;
        }
        h2{
            font-size: 20px;
            background-color: skyblue;
            margin: 0;
        }
        form{
            background: bisque;
        }
        div:nth-of-type(1) input {
            border: 3px solid rosybrown;
        }
        div:nth-of-type(2) input{
            border:3px solid red;
        }
        div:nth-of-type(3) input{
            border:3px solid pink;
        }
        img{
            display: block;margin: 0 auto;
            border-radius: 50px;// Set fillet margin : top left corner   Upper right corner   The lower right corner   The lower left corner  
        }
    </style>
</head>

effect :

 8.display and float float

display:block A block element     line Inline elements    inline-block Is a block element but can be inlined on a line

folat: Floating around   left Element floating to the left right The element floats to the right none The default element does not float example : Floating to the left moves the others to the left

9. Solve the problem of parent border collapse

        9.1 clear         

        clear:both There shall be no floating on the left and right sides    right No floating on the right side   left No floating on the left side

Solution :

1. Increase parent element height

2. Add an empty div Label clear floating

<div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0; }

         9.2 overflow hidder/scroll/after

Solution :

1.hidder Hide the extra length

2.scroll Set a slider , Put the extra in it

3. Add a pseudo class to the parent class after{content:' ';dispaly:bolck;clear:both} The principle of use is similar to

         9.3 location -- Relative positioning / Absolute positioning / Fixed position

        Relative positioning : The position is offset from the original position

xxx{ position: relative   left:10px top:-10px} 

          Absolute positioning : The specified offset from the browser or parent position

          Fixed position : The position is fixed

copyright notice
author[Wavelet (Learning version)],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/175/202206240559316092.html

Random recommended