1. La combinación de CSS y HTML

1.1 El primero

Establezca "clave: valor valor;" en el atributo de estilo de la etiqueta para modificar el estilo de la etiqueta.

需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。
<body> 
 <div style="border: 1px solid red;">div 标签 1</div> 
 <div style="border: 1px solid red;">div 标签 2</div> 
 <span style="border: 1px solid red;">span 标签 1</span> 
 <span style="border: 1px solid red;">span 标签 2</span> 
</body>

1.2 El segundo

En la etiqueta principal, use la etiqueta de estilo para definir varios estilos CSS que necesita. El formato es el siguiente:
xxx { Clave: valor valor; Clave: valor valor; }

Varias declaraciones: Si desea definir más de una declaración, debe separar cada declaración con un punto y coma.
Aunque no es necesario agregar un punto y coma al final de la última declaración (pero intente agregar un punto y coma al final de cada declaración)

需求 2：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title> <!--style 标签专门用来定义 css 样式代码-->
	<style type="text/css"> 
		div {
     
     
			border: 1px solid red;
		}

		span {
     
     
			border: 1px solid red;
		}
    </style>
</head>
<body>
   <div>div 标签 1</div>
   <div>div 标签 2</div>
   <span>span 标签 1</span> 
   <span>span 标签 2</span>
</body>
</html>

1.3 El tercero

Escriba el estilo css como un archivo css separado y luego impórtelo a través de la etiqueta de enlace para reutilizarlo.
Uso de <link rel="stylesheet" type="text/css" href="./styles.css" />etiquetas html en archivos de estilo CSS.
1. Archivo CSS
Crea un archivo .css y ya no necesita <style type="text/css"> </style>etiquetas.

div {
    
    
   border: 1px solid red;
}

span {
    
    
   border: 1px solid red;
}

2.código de archivo html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title> 
link 标签专门用来引入 css 样式代码
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
	<div>div 标签 1</div>
	<div>div 标签 2</div>
	<span>span 标签 1</span> 
	<span>span 标签 2</span>
</body>
</html>

2. Selector de CSS

2.1 Selector de nombre de etiqueta

El formato del selector de nombre de etiqueta es:
nombre de etiqueta { 　　atributo: valor; 　　atributo: valor; }

<style type="text/css"> 
	div {
     
     
		border: 1px solid yellow;
		color: blue;
		font-size: 30px;
	}

	span {
     
     
		border: 5px dashed blue;
		color: yellow;
		font-size: 20px;
	} 
</style>

<div>div 标签 1</div>

2.2 selector de id

Agregue un #, seguido del valor de atributo de id

<style type="text/css"> 
	#id001 {
     
     
		color: blue;
		font-size: 30px;
		border: 1px yellow solid;
	}

	#username {
     
     
		color: red;
		font-size: 20px;
		border: 5px blue dotted;
	} 
</style>

<div id="id001">div 标签 1</div>
<div id="username">div 标签 2</div>

2.3 selector de clase

Agrega uno ., Que significa el valor de atributo de la clase

<style type="text/css"> 
	.class01 {
     
     
    color: blue;
    font-size: 30px;
    border: 1px solid yellow;
}

   .username {
     
     
    color: grey;
    font-size: 26px;
    border: 1px solid red;
} 
</style>

<div class="class01">div 标签 class01</div>
<div class="username">div 标签</div>

2.4 Selector de combinación

El formato del selector combinado es:

Selector 1, Selector 2, Selector n { atributo: valor; atributo: valor; } La combinación de selectores permite que múltiples selectores compartan el mismo código de estilo CSS.

<style type="text/css"> 
	.class01 , #id01{
     
      
		color: blue; 
		font-size: 20px; 
		border: 1px yellow solid; 
    } 
</style>

2.5 Ejemplos vistos:

Case1: solo las etiquetas div pueden usar el estilo class01

div.class01{
    
    
	color: blue; 
	font-size: 20px; 
	border: 1px yellow solid; 
}

Caso2: cuando una etiqueta tiene un div de etiqueta hijo y un div de etiqueta hijo tiene un intervalo de etiqueta hijo, esta etiqueta puede usar el estilo class01

.class01 div span{
    
    
	color: blue; 
	font-size: 20px; 
	border: 1px yellow solid; 
}

2.6 Discriminación de selector de id y selector de clase

1. La diferencia entre id y class

id es equivalente a la tarjeta de identificación de una persona y no se puede repetir
La clase es equivalente al nombre de la persona que se puede repetir.
Una etiqueta html solo puede estar vinculada a un nombre de identificación
Una etiqueta html se puede vincular a varios nombres de clase

2. La diferencia entre el selector de id y el selector de clase

El selector de id comienza con #
El selector de clases comienza con

3. Estilos CSS de uso común:

Color de fuente color: rojo; el
color se puede escribir con nombres de color como negro, azul, rojo, verde, etc. Los
colores también se pueden escribir con valor rgb y valor de representación hexadecimal: como rgb (255,0,0), # 00F6DE, si escribe valor hexadecimal debe agregar #
Ancho
: 19 px;
ancho puede escribir valor de píxel: 19 px;
también puede escribir valor de porcentaje: 20%;
Altura
: 20 px; la
altura se puede escribir en valor de píxel: 19 px;
también se puede escribir en valor porcentual: 20%;
Color de fondo : # 0F2D4C
Color de estilo de fuente : # FF0000; color de
fuente rojo tamaño de fuente: 20px; tamaño de fuente
Rojo, 1 píxel, borde de
borde sólido: 1 px rojo sólido;
Margen izquierdo centrado en DIV : automático;
margen derecho: automático;
Texto
-alinear: centro;
Hipervínculo para subrayar
la decoración del texto: ninguno;
Mesa delgada línea
mesa{ border: 1px solid black; / Establecer el borde / border-collapse: collapse; / Combinar los bordes / }

td, th{ border: 1px negro sólido; / set border / }
Modificación de eliminación de lista
la{ estilo de lista: ninguno; }

Aprendizaje inicial de tecnología CSS