CSS

concept:
- Landscaping and page layout control
- Cascading Style Sheets Cascading Style Sheet
  - Layered: multiple styles may act on the same html element, as well as the entry into force
benefit:
- Powerful
- The control content presentation and style separation
  - Reduce the coupling, decoupling
  - Make it easier division of labor
  - Improve development efficiency
Use of CSS: CSS and html binding mode
- Inline style
  - Style attribute specified in the tag css code
  - 如：< div style=“color: red;”>hell0 world< /div>
- Internal Style
  - In the head tag, the tag body content definition style tags, style css code label is

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div>hello world</div>
</body>
</html>

- External style
  - Definition of resource files css
  - In the head tag, tag link defined, the introduction of external resource files
  - html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
    <div>hello world</div>
</body>
</html>

css file:

div{
    color: green;
}

- note:
  - These three ways, css effect of increasing the scope
  - The first less common, the latter used the second, third
  - It can be written as the write :( third) in which the head tag
    <style>
    @import "CSS / a.css"
    </ style>
CSS syntax:
- Format:
  selector {
  property name 1: 1 attribute value;
  property name 2: attribute value 2;
  ...
  }
- Selector: Filter elements having similar characteristics
- Note: Each of the attributes required by a semicolon; separated, the properties may not last semicolon;
Selector: Filter elements having similar characteristics
- Selector basis:
  - id selector: selecting a specific element of id attribute value, a recommended value unique id html page
    Syntax: #id attribute values {}
  - Selector element: selecting elements with the same label name
    syntax: tag name} {
    Note: id selector element is higher than the priority selector
  - Class selector: selecting a class attribute value of the same elements
    Syntax: .class attribute values {}
    Note: class selector priority over the selector element
- Extended selector:
  - Select all elements:
    Syntax: *} {
  - And set the selector:
    Syntax: 1 selectors, select {2}
  - Child selectors: the filter element selector selector element 12
    Syntax: Selector Selector 2 {1}
  - Parent Selector: filter selector selecting parent element 2 1
    Syntax: Selector 1> selector {2}
  - Attribute selection: Select element element name, attribute name = attribute value
    syntax: element name [attribute name = "attribute value"] {}
  - Pseudo-class selection: Select some elements having status
    - Syntax: elements: {Status}
    - Such as: <a>
      - link: initialization state
      - visited: the state of being visited
      - active: the state of being accessed
      - hover: mouse suspended state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
    <style>
        #div1{
            color: red;
        }
        div{
            color: green;
        }
        .cls1{
            color: blue;
        }

        div p{
            color: pink;
        }

        div>p{
            border: 1px solid;
        }

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

        a:link{
            color: pink;
        }

        a:hover{
            color: green;
        }

        a:active{
            color: yellow;
        }

        a:visited{
            color: red;
        }
    </style>
</head>
<body>
    <div id="div1">hello world</div>
    <div>史迪仔仔仔</div>
    <p class="cls1">戴小叮当</p>

    <div>
        <p>阿伟</p>
    </div>
    <p>阿伟</p>

    <input type="text">
    <input type="password"><br><br><br>

    <a href="#">阿伟</a>
</body>
</html>

Here Insert Picture Description

Attributes:
- Font, text
  - font-size: Font Size
  - color: Text Color
  - text-align: Alignment
  - line-height: Row Height
- background
  - background：
- frame
  - border: set the border, complex property
- size
  - width: width
  - height: height
- Box model: control layout
  - margin: Margin
  - padding: padding
    - By default, padding will affect the size of the entire box
    - box-sizing: border-box; set the properties of the box, so that the width and height of the box is the size of the final
  - float: Floating
    - left
    - right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
    <style>


        div{
            border: 1px solid red;
            width: 100px;
        }
        .div1{
            width: 100px;
            height: 100px;
            /*margin: 50px;*/
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            box-sizing: border-box;
        }

        .div3{
            float: left;
        }
        
        .div4{
            float: left;
        }

        .div5{
            float: left;
        }
    </style>
</head>
<body>

    <div class="div2">
        <div class="div1"></div>
    </div>

    <div class="div3">aaaa</div>
    <div class="div4">bbbb</div>
    <div class="div5">cccc</div>
</body>
</html>

Here Insert Picture Description

Lemon Love

Published 32 original articles · won praise 12 · views 1357

Private letter concerns

JavaWeb study notes (c) CSS

CSS

Guess you like