The introduction of HTML CSS and css selector

Four ways to introduce CSS in HTML

1. Import the style tag in the head of HTML, and write the style directly into style, as shown below

2. Import the .css file through the link tag in the HTML , this way of importing can control multiple html with one css file

The mycss.css file is a written style, as shown below

Introduce the already written style file mycss.css in the HTML file to control the style display of html: as shown below

3. Import the css file through @import. This method will first display the unstyled surface when rendering the page, and then display the style. Generally not used :

4. The way of introducing style is directly in the label and directly control the style display through attributes.

Selector in CSS:

1. Universal selector: use *{} all tags in html to take effect;

2. Tag selector: select according to the tag name, and all tags with that name take effect;

3.id selector

4.class selector

5. Combination selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            color: red;
            background-color: burlywood;
            font-size: 50px;
        }
        div{
            color: yellow;
            background-color: aliceblue;
            font-size: 16px;
        }
        #div1{
            color: blue;
            background-color:white;
            font-size: 15px;
        }
        .div2{
            color: black;
            background-color: cyan;
            font-size: 10px;
        }
         .div3{
            color: fuchsia;
            background-color: aquamarine;
        }
        #div1 .div3{
            color: darkturquoise;
            background-color: black;
        }
       #div4,.div4{
           background-color: red;
           color: black;
       }
    </style>
</head>
<body>
    <p>通过选择器控制样式显示
        <span>嵌套内容都使用通用选择器控制的样式</span>
        <span>嵌套内容</span>
    </p>
    <p>通用选择器控制样式显示</p>
    <div>通过标签选择器控制样式显示</div>
    <div class="div2">class选择器显示</div>
    <div id="div1" class="div2">通过id进行控制样式显示，id优先级高于class
        <div class="div3">通过组合选择器控制样式显示</div>
        <div class="div3">通过组合选择器控制演示</div>
    </div>
    <p class="div2">通过class选择器进行控制样式显示，可以控制多个标签</p>
    <p class="div2">通过class选择器控制</p>
    <p id="div4">控制两个没有关系的标签格式显示，用逗号分隔</p>
    <p class="div4">控制两个没有关系的标签格式显示，用逗号分隔</p>
</body>
</html>

Adjacent label selector with + connection

The introduction of HTML CSS and css selector

Guess you like