La introducción de HTML CSS y selector css

Cuatro formas de introducir CSS en HTML

1. Importe la etiqueta de estilo en el encabezado de HTML y escriba el estilo directamente en el estilo, como se muestra a continuación.

2. Importe el archivo .css a través de la etiqueta de enlace en el HTML , esta forma de importar puede controlar varios html con un archivo css

El archivo mycss.css es un estilo escrito, como se muestra a continuación

Introduzca el archivo de estilo mycss.css ya escrito en el archivo HTML para controlar la visualización del estilo de html: como se muestra a continuación

3. Importe el archivo css a través de @import. Este método mostrará primero la superficie sin estilo al renderizar la página y luego mostrará el estilo. Generalmente no se utiliza :

4. La forma de introducir el estilo es directamente en la etiqueta y controlar directamente la visualización del estilo a través de los atributos.

Selector en CSS:

1. Selector universal: use * {} todas las etiquetas en html para que surtan efecto;

2. Selector de etiquetas: seleccione según el nombre de la etiqueta, y todas las etiquetas con ese nombre entrarán en vigor;

3.selector de ID

4.selector de clases

5. Selector de combinación

<!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>

Selector de etiquetas adyacentes con conexión +

La introducción de HTML CSS y selector css

Supongo que te gusta