1. Introduction to CSS

CSS is "Cascading Style Sheet". It is a markup language used to (enhance) controlling the style of web pages and allowing the separation of style information from web content.

Two, grammatical rules

Insert picture description here
Selector: The browser determines the html tag (element)
attribute affected by the CSS style according to the "selector" : the style name to be changed, for example: color, font-size
used between each declaration; separate.
Comment: /* Comment content*/

3. Combination of CSS and HTML

3.1 Method One

Set "key:value value;" on the style attribute of the label to modify the style

<!--需求
    分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。
-->
    <div style="border: red 1px solid ">这是一个div标签</div> <br/>

3.2 Method two

In the head tag, use the style tag to define the style you need

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
     
     
            color: red;
            border: 1px solid blue;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>这是一个div标签</div>
</body>
</html>

3.3 Way Three

Insert picture description here

Write the CSS style as a separate CSS file, and then reuse the link tag in the head tag

<link href="test.css" rel="stylesheet" type="text/css"/>

Four, CSS selector

The browser determines the html tags (elements) affected by CSS styles according to the "selector"

4.1 Tag name selector

Use the tag name selector to determine which tags passively use this style

format:

标签名{
	属性：值;
}

<style type="text/css">
   /* 需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。 
   并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。*/
    div{
     
     
        color: blue;
        font-size: 30px;
        font-style: italic;/* 字体样式 */
        border: yellow 1px solid;
    }
    span{
     
     
        color: yellow;
        font-size: 20px;
        border: blue 5px dashed;
    }
</style>

4.2 id selector

Let's selectively use this style through the id attribute

format

#id属性值{
	属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div01{
     
     
            font-style: italic;
            font-size: 7px;
        }
        #div02{
     
     
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;/*黄色实线*/
        }
    </style>
</head>
<body>
    <div id="div01">01 这是一个div标签</div>
    <div id="div02">02 这是一个div标签<</div>
</body>
</html>

4.3 class selector

Effectively choose to use this style through the class attribute

format

.class属性值{
	属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .divClass01{
     
     
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        .divClass02{
     
     
            color: gray;
            font-size: 26px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <div class="divClass01">01 这是一个div标签</div>
    <div class="divClass02">02 这是一个div标签</div>
</body>
</html>

4.4 Combination selector

You can make multiple selectors share the same css code
format

选择器1，选择器2……选择器n{
属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div01 ,.divClass02 ,p,span{
     
     
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;/*黄色实线*/
        }
    </style>
</head>
<body>
    <div id="div01">01 这是一个div标签</div>
    <div class="divClass02">02 这是一个div标签<</div>
    <p>03这是一个p标签</p>
    <span>04这是一个span标签</span>
</body>
</html>