CSS page beautification and layout control

concept

Cascading Style Sheets cascading style sheets

• Cascade: multiple styles can act on the same html element and take effect at the same time

benefit

1. Powerful
2. Separating content presentation from style control
   • Reduce coupling and decoupling
   • Make division of labor and cooperation easier
   • Improve development efficiency

The use of CSS: the combination of CSS and HTML

1. inline style

   • Use the style attribute within the tag to specify the css code

   • For example:

     <div style="color:red;">hello css</div>
     

2. Internal style

   • In the head tag, define the style tag. The tag body content of the style tag is the css code

   • For example:

     <style>
       div{
         color:blue
       }
     </style>
     
     <div>hello css</div>
     

3. External style

   1. Define css resource file

   2. In the head tag, define the link tag to introduce external resource files

   3. For example:

      a.css:
      div{
          color:green;
      }
      

      html File:
      <link rel="stylesheet" href="../css/a.css">
      <div>hello css</div>
      

• be careful:

  1. 1, 2 and 3 ways of css function, and the scope is becoming larger and larger

  2. The first method is not commonly used

  3. The second and third are most commonly used

  4. The third format can be written like this

       <style>
         @import "../css/a.css";
       </style>
     

CSS syntax

• Format:

  Selector{

  Attribute name 1: attribute value 1;

  Attribute name 2: attribute value 2;

  Attribute name 3: attribute value 3;

  ​ ...

  }

• Selectors: filter elements with similar characteristics

• matters needing attention:

  • Each pair of attributes needs to be separated, and the last pair of attributes can not be added; (semicolon)

selector

• Concept: filter elements with similar characteristics

• classification

  1. Base selector

     1. id selector: the element that selects the specific id attribute value. It is recommended that the id value be unique in an html page
        • Syntax: #id attribute value {}
     2. Element selector: select an element with the same label name
        • Syntax: label name {}
        • Note: id selectors take precedence over element selectors
     3. Class selector: select an element with the same class attribute value (multiple tags can use the same class)
        • Syntax::. class attribute value {}
        • be careful:
          • Class selectors take precedence over element selectors
          • id selectors take precedence over element selectors

     <style>
         #d1{
             color: red;
         }
     
         div{
             color: green;
         }
     
     
         .c1{
             color:yellow;
         }
     
     </style>
     

  2. Extension selector

     1. Select all elements:

        • Syntax: * {}

     2. Union selector:

        • Selector 1. Selector {}

     3. Sub selector: filter selector 2 element under selector 1 element

        • Syntax: selector 1 selector 2{}

     4. Parent selector: parent element selector 1 of filter selector 2

        • Syntax: selector1 > selector2{}

     5. attribute selectors

        • Select the element name, attribute name = element of attribute value

        • Syntax: element name [attribute name = "attribute value"] {}

        • For example:

          input[type='text']{
              border: 5px solid;
          }
          

     6. Pseudo class selector

        • Select the state that some elements have
        • Syntax: element: state {}
        • For example: < a >
          • Status:
            • link: initialization status
            • visited: accessed status
            • active: accessing status
            • Hover: mouse hover

CSS properties

1. Font, text

   • Font size: font size
   • Color: font color
   • Text align: alignment
   • Line height: line height

2. background

   • background:

   • background:url("../image/lvugkl.jpg") no-repeat center;
     

3. frame

   • Border: set border, compound attribute

4. size

   • Width: width
   • Height: height

5. Box models: controlling layout

   • Margin: outer margin
   • padding: inner margin
     • By default, box size is affected
     • Box sizing: border box; can always maintain a size
   • Float: float
     • left:
     • right:

case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Registration page</title>

    <style>
        body{
            background: url("../image/lvugkl.jpg") no-repeat center;
        }

        .rg_layout{
            width: 990px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background: white;
            /*Center div horizontally*/
            margin:auto;
            margin-top: 15px;

        }

        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_center{
            /*border:1px solid red;*/
            float: left;
            width: 500px;
        }
        .rg_right{
            /*border: 1px solid red;*/
            margin: 15px;
            float: right;

        }

        .rg_left > p:first-child{
            color: #FFD026;
            font-size:20px;
        }
        .rg_left > p:last-child{
            color: #A6A6A6;
            font-size:20px;
        }
        .rg_right>p:first-child{
            font-size: 15px;
        }
        .rg_right p a{
            color: pink;
        }
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left:45px;
        }
        #username,#password,#email,#name,#phoneNumber,#birthday,#yanzhangma {
            width: 251px;
            height: 30px;
            border: 1px solid #A6A6A6;
            /*Set border fillet*/
            border-radius: 5px;
            padding-left: 5px;
        }
        #yanzhangma{
            width: 150px;
        }
        #img_yanzhengma{
            height: 32px;
            vertical-align: middle;
        }
        #but_denglu,#but_quxiao{
            width: 150px;
            height: 40px;
            background-color:#FFD026;
            border: 1px solid #FFD026;
        }
    </style>
</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p>New user registration</p>
        <p>USER REGISTER</p>
    </div>

    <div class="rg_center">
        <form action="#" method="post">
            <table>
                <tr>
                    <td class="td_left">
                        <label for="username">user name</label>
                    </td>
                    <td class="td_right">
                        <input id="username" placeholder="enter one user name" name="username" >
                    </td>
                </tr>

                <tr>
                    <td class="td_left">
                        <label for="password">password</label>
                    </td>
                    <td class="td_right"><input name="password" id="password" type="password" placeholder="Please input a password"></td>
                </tr>

                <tr>
                    <td class="td_left"><label for="email">mailbox</label> </td>
                    <td class="td_right"><input id="email" name="email" type="email" placeholder="Please enter email address"></td>
                </tr>

                <tr>
                    <td class="td_left"><label for="name" id="nametxt">full name</label></td>
                    <td class="td_right"><input id="name" name="name" placeholder="Please enter your name"></td>
                </tr>
                <tr>
                    <td class="td_left"><label for="phoneNumber" id="phoneNumbertxt">phone number</label> </td>
                    <td class="td_right"><input type="number" id="phoneNumber" name="phoneNumber" placeholder="Please enter your mobile phone number"></td>
                </tr>

                <tr>
                    <td class="td_left">Gender</td>
                    <td class="td_right"><input type="radio" name="gender" value="male">male<input type="radio" name="gender" value="female">female</td>
                </tr>

                <tr>
                    <td class="td_left"><label for="birthday" name="birthdaytxt">Birthday date</label> </td>
                    <td class="td_right"><input id="birthday" name="birthday" type="date"></td>
                </tr>

                <tr>
                    <td class="td_left">Verification Code</td>
                    <td class="td_right"><input name="yanzhangma" id="yanzhangma"><img id="img_yanzhengma" src="image/lvugkl.jpg" width="100"></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input id="but_denglu" type="submit" value="confirm">
<!--                        <input id="but_quxiao" type="button" value="cancel">-->
                    </td>
                </tr>


            </table>


        </form>
    </div>

    <div class="rg_right">
        <p>Existing account?<a href="#"> log in now < / a ></p>
    </div>

</div>

</body>
</html>