An overview,

  • CSS is “cascading style sheets”. Is a markup language used to (enhance) control web page styles and allow separation of style information from web page content.

1.1 Grammar Rules

p {
        font-size:80px;
}
Copy the code

P is the selector; Font-size: 16px; 80 px for value

  • Selectors: The browser determines which HTML elements are affected based on the selectors
  • Properties: is the name of the style you want to change, and each property has a value.

1.2 Multiple Declarations

p {
        color:red;
        font-size:30px;
}
Copy the code

1.3 CSS comment

/* Comment the content */
Copy the code

1.4 Combination of CSS and HTML

First: directly add the style attribute to the tag to set the style

<div style="border: 1px solid red;">Div tags 1</div>
Copy the code

Disadvantages:

  1. If there are too many labels. There are many styles. It’s a lot of code.
  2. Very poor readability.
  3. Css code has no reusability to speak of.

Second: in the head tag, use the style tag to define any CSS styles you need

<! DOCTYPEhtml> 
<html lang="en"> 
<head> 
<meta charset="UTF-8">
<title>Title</title> 
<! The style tag is used to define CSS style code.
<style type="text/css">
        /* Requirement 1: Define two div and span tags, and change the style of each div tag to 1 pixel border, solid line, red. * / 
        div {
                border: 1px solid red; 
        }
        span {
                border: 1px solid red;
        } 
</style>
</head>
<body> 
<div>Div tags 1</div> 
<div>Div tags 2</div> 
<span>Span tags 1</span>
<span>Span tags 2</span>
</body>
</html>
Copy the code

Disadvantages:

  1. You can only reuse code within the same page, not CSS code across multiple pages.
  2. It is not easy to maintain, and a real project would have thousands of pages to modify in each page. It’s too much work.

Third: write CSS styles as a single CSS file, which can be reused through the link tag.

  • The CSS file
div{
        border: 1px solid yellow; 
}
span{
        border: 1px solid red; 
}
Copy the code
  • HTML file:
<! DOCTYPEhtml>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <! The link tag is used to introduce CSS style code -->
        <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
        <div>Div tags 1</div>
        <div>Div tags 2</div>
        <span>Span tags 1</span>
        <span>Span tags 2</span>
</body>
</html>
Copy the code

CSS selectors

2.1 Label name selector

  • Tag name selector, which determines which tags are used passively in this style
Tag name {attribute: value; }Copy the code

See above for an example.

2.2 Selectors: Let us use this style selectively through the ID attribute

#idAttribute value {attribute: value; }Copy the code
<! DOCTYPEhtml>
<html>
    <head>
            <meta charset="UTF-8">
            <title>The ID selector</title>
            <style type="text/css">
                    #id001{ 
                            color: blue; 
                            font-size: 30px; 
                            border: 1px yellow solid;
                    }
                    #id002{
                            color: red;
                            font-size: 20px;
                            border: 5px blue dotted ;
                    } 
            </style>
    </head>
    <body>
    <! -- Requirement 1: Define two div tags, the first div tag with id ID001, then change font color to blue and font size to 30 pixels using CSS style based on id attribute. Border is 1 pixel yellow solid line. The second div tag defines the ID as ID002, and then defines the CSS style to change the font color to red and font size to 20 pixels based on the ID attribute. The border is a 5-pixel blue dotted line. --> 
            <div id="id002">Div tags 1</div> 
            <div id="id001">Div tags 2</div> 
    </body>
</html>
Copy the code

2.3 Class selector (Class selector)

  • This style can be used selectively and effectively through the class attribute
.classAttribute value {attribute: value; }Copy the code
<! DOCTYPEhtml>
<html>
    <head>
            <meta charset="UTF-8">
            <title>Class type selector</title>
            <style type="text/css"> 
                    .class01{ 
                            color: blue; 
                            font-size: 30px; 
                            border: 1px solid yellow; 
                    }
                    .class02{
                            color: grey; 
                            font-size: 26px; 
                            border: 1px solid red; 
                    } 
            </style> 
    </head> 
    <body> 
    <! Requirement 1: Change the SPAN or div tag with the class attribute value of class01 to a blue font size of 30 pixels. Border is 1 pixel yellow solid line. Requirement 2: Change the div tag with the class attribute value to class02 and the font color to gray with a font size of 26 pixels. The border is a 1 pixel solid red line. -->
            <div class="class02">Div tags class01</div> 
            <div class="class02">Div tags</div> 
            <span class="class02">Span tags class01</span> 
            <span>Span tags 2</span> 
    </body> 
</html>
Copy the code

2.4 Combinatorial selectors: Multiple selectors can share the same CSS style code

The selector1The selector2, selector n{property: value; }Copy the code

Three, common style

3.1 Font Color

color: red;
Copy the code
  • The color can be black, blue, red, green, etc
  • Colors can also be written to RGB values and hexadecimal representation values: e.gRGB (0, 255).#00F6DE, must be added if writing hexadecimal values#

3.2 width

width:19px;
Copy the code
  • The width can be written as a pixel value of 19px
  • You can also write the percentage value: 20%

Height of 3.3

height:20px; 
Copy the code
  • The height can be written as a pixel value of 19px
  • You can also write the percentage value: 20%

3.4 Background Color

background-color:#0F2D4C
Copy the code

3.5 Font Style:

color: #FF0000; Font-size: 16px;20px; The font sizeCopy the code

3.6 Red 1 pixel solid line border

border: 1px solid red;
Copy the code

3.7 DIV center

margin-left: auto;
margin-right: auto;
Copy the code

3.8 Center the text

text-align: center;
Copy the code

3.9 Ununderline hyperlinks

text-decoration: none;
Copy the code

3.10 Fine lines in the form

table { 
        border: 1px solid black; /* Sets the border */ 
        border-collapse: collapse; /* Merge borders */ }
td.th {
        border: 1px solid black; /* Sets the border */ 
} 
Copy the code

3.11 List removal modifier

ul {
        list-style: none;
}
Copy the code