Detailed explanation of css Foundation

Keywords: Java Front-end html5 html css

CSS: page beautification and layout control

  1. Concept: Cascading Style Sheets

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

  2. Benefits:

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

  3. 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 files.
      2. In the head tag, define the link tag to introduce external resource files
      • For example:
        • a.css file:
          div{
          color:green;
          }
          < link rel="stylesheet" href="css/a.css">
          < div>hello css< /div>
          < div>hello css< /div>
    • be careful:
      • 1, 2 and 3 ways of css have an increasing scope of action
      • 1. The method is not commonly used, and it is commonly used in the later stage. 2,3
      • The three formats can be written as:
        < style>
        @import "css/a.css";
        < /style>

  4. css syntax:

    • Format:
      Selector{
      Attribute name 1: attribute value 1;
      Attribute name 2: attribute value 2;
      ...
      }
    • Selectors: filter elements with similar characteristics
    • be careful:
      • Each pair of attributes needs to be separated, and the last pair of attributes can not be added;

  5. Selectors: filter elements with similar characteristics

    • Classification:
      1. Base selector
        1. id selector: select the element with 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 elements with the same class attribute value.
          • Syntax:. class attribute value {}
          • Note: class selectors take precedence over element selectors
      2. Extension selector:

        1. Select all elements:

          • Syntax: * {}

        2. Union selector:

          • Selector 1, selector 2{}

        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 selector: select the element name with attribute name = attribute value

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

        6. Pseudo class selector: select the state that some elements have

          • Syntax: element: state {}
          • For example: < a >
            • Status:
              • link: status of initialization
              • visited: accessed status
              • active: accessing status
              • Hover: mouse hover

  6. attribute

    1. Font, text
      • Font size: font size
      • Color: text color
      • Text align: how to align it
      • Line height: line height
    2. background
      • background:
    3. frame
      • Border: set the border to conform to the attribute
    4. size
      • Width: width
      • Height: height
    5. Box models: controlling layout

      • Margin: outer margin

      • padding: inner margin

        • By default, the inside margin affects the size of the entire box
        • Box sizing: border box; set the properties of the box so that width and height are the final box size

      • Float: float

        • left
        • right

Case:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Registration page</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
        background: url("img/register_bg.png") no-repeat center;
        padding-top: 25px;
    }

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

    .rg_left{
        /*border: 1px solid red;*/
        float: left;
        margin: 15px;
    }
    .rg_left > p:first-child{
        color:#FFD026;
        font-size: 20px;
    }

    .rg_left > p:last-child{
        color:#A6A6A6;
        font-size: 20px;

    }


    .rg_center{
        float: left;
       /* border: 1px solid red;*/

    }

    .rg_right{
        /*border: 1px solid red;*/
        float: right;
        margin: 15px;
    }

    .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: 50px ;
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
        width: 251px;
        height: 32px;
        border: 1px solid #A6A6A6 ;
        /*Set border fillet*/
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkcode{
        width: 110px;
    }

    #img_check{
        height: 32px;
        vertical-align: middle;
    }

    #btn_sub{
        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">
        <div class="rg_form">
            <!--Define form form-->
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">user name</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="enter one user name"></td>
                    </tr>

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

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

                    <tr>
                        <td class="td_left"><label for="name">full name</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="Please enter your name"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">cell-phone number</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="Please enter your mobile phone number"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>Gender</label></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">date of birth</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="Please enter the date of birth"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >Verification Code</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="Please enter the verification code">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="register"></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>

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


</div>


</body>
</html>

Posted by mdj on Sun, 26 Sep 2021 02:50:59 -0700

Hot Keywords

©2024 Programmer Group