Versión simple de conocimientos básicos de HTML + CSS

1. Descripción general de HTML

HTML: Lenguaje de marcado de hipertexto, que en realidad es un lenguaje utilizado para desarrollar páginas web;
CSS: hojas de estilo en cascada, que se pueden utilizar para representar páginas web, embellecer páginas web y crear páginas web.

1. Introducción a HTML

HTML: lenguaje de marcado de hipertexto

Hipertexto: Más que texto, hipertexto;
HTML no solo puede contener texto, sino también archivos en varios formatos, como imágenes, audio y video;
Etiqueta: etiqueta, elemento, se refiere a un conjunto de contenido encerrado entre corchetes angulares, como: <div>, <img>, <h1>, </h1>, </div>etc.
De hecho, es un lenguaje utilizado para desarrollar páginas web.

Acerca de HTML:

Los documentos web desarrollados en HTML suelen tener el sufijo .htm o .html.
Los documentos web desarrollados en HTML se pueden abrir y mostrar a través de un navegador (el navegador es un analizador HTML).
HTML es esencialmente un documento.

2. Estructura HTML

<!-- 用于声明当前文档是一个html格式的网页,并且版本是html5.0版本 -->
<!DOCTYPE html>
<!-- 根标签,所有的HTML内容都应该放在根标签内部 -->
<html>
	<!-- 头部分,用于存放网页的基本属性信息(例如网页标题,网页编码,引入的css样式,js文件等) -->
	<head>
		<!-- 通知浏览器当前使用的编码,若不指定可能会出现乱码现象 -->
		<meta charset="utf-8">
		<!-- 用于指定网页标签的标题 -->
		<title>我的第一个测试网页</title>
	</head>
	<!-- 体部分,用于存放网页的可视化内容 -->
	<body>
		<!-- h1、h2等用于指定网页内容的标题 -->
		<h1 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h1>
		<h2 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h2>
		<h3 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h3>
		<h4 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h4>
		<h5 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h5>
		<h6 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h6>
		<!-- 生成一条水平线，边框为5px实线红色 -->
		<hr style="border: 5px solid red;"/>
		
	</body>
</html>

3. Sintaxis HTML

Etiqueta, marca, elemento: Es un grupo de contenido encerrado entre corchetes angulares (<>), como por ejemplo: <head>, <body>, <h1>, <img>, <a>etc. Las etiquetas constan de una etiqueta de inicio () y una etiqueta de finalización (), y se puede incluir otro contenido entre las etiquetas de inicio y finalización.
Etiquetas de cierre automático: algunas etiquetas no requieren que se escriba contenido en su interior y, por lo general, se pueden escribir como etiquetas de cierre automático. Por ejemplo:
<br/>, <hr/>, <input/>, <img/>, <meta/>etc.
Atributos:
<input type="text" id="username" class="xxx"/>
- Los atributos deben declararse en la etiqueta y no pueden existir de forma independiente.
- Se pueden declarar varios atributos y se pueden separar varios atributos mediante espacios.
- Los valores de los atributos pueden estar entre comillas dobles o comillas simples.
  <input type="text" id="username"/>
  <input type='text' id='username'/>
  <img src="xx" id="xx" name="xx"/>
  <img src='xx' id='xx' name='xx'/>
Formato de comentario: 
Funciones de comentario: (1) Agregar explicaciones al código; (2) Comentar algún código que no necesita ejecutarse temporalmente.
Espacios y nuevas líneas
En HTML, varios caracteres de espacios en blanco consecutivos (espacios/nuevas líneas/tabulaciones) se analizarán en un espacio para su visualización.
- Si desea implementar múltiples espacios, puede usar  o&emsp;
- Si desea ajustar líneas, puede utilizar <br/>etiquetas;

2. Etiquetas HTML

1. Etiquetas de imagen

La etiqueta img puede insertar una imagen en una página web, por ejemplo:
Entre ellos<img src="img/meinv01.jpg" width="40%"/>
, el atributo src: se utiliza para señalar la ruta de la imagen (ruta relativa, ruta de red)

atributo de ancho: especifica el ancho de la imagen
atributo de altura: especifica la altura de la imagen

En cuanto a problemas de ruta:

No se recomienda escribir una ruta absoluta con una letra de unidad, porque si cambia el entorno de lanzamiento en el futuro, es probable que esta ruta sea incorrecta, por lo que no se recomienda.
<img src="D:/JavaDevelop/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg" width="40%"/>
Se recomienda escribir una ruta relativa./
: Indica la ubicación del archivo actual, que se puede omitir
.../: Indica el directorio de nivel superior del directorio donde se encuentra el archivo actual.

<img src="./img/meinv01.jpg" width="40%"/>
Significa encontrar el directorio img en el directorio donde se encuentra el archivo actual (html) y encontrar el archivo meinv01.jpg en el directorio.

2. Etiquetas de hipervínculo

La etiqueta a se utiliza para implementar un hipervínculo en una página web.
Después de hacer clic en el hipervínculo, saltará a otra ubicación (página web, imagen, dirección de descarga, etc.), por ejemplo
:<a href="http://www.baidu.com" target="_blank">百度一下,你就不知道</a>

El atributo href se utiliza para señalar la dirección URL a la que salta.
El atributo de destino se utiliza para indicar cómo abrir el hipervínculo.
- self: abre un hipervínculo en la ventana actual
- en blanco: abrir el hipervínculo en una ventana nueva

3. Etiqueta de la mesa

tabla: se utiliza para definir una tabla, que puede contener etiquetas tr
tr (fila de la tabla): se usa para definir filas en la tabla, tr puede contener td/th
td/th(celda de datos de la tabla): se utiliza para definir celdas en la tabla
th(celda del encabezado de la tabla): se utiliza para definir las celdas del encabezado de la tabla, donde el texto estará en negrita y centrado de forma predeterminada.
Atributo colspan: establece el número de columnas que abarca la celda, por ejemplo:
<td colspan="2">11</td>
colspan="2": establece la celda actual para que abarque dos columnas
atributo rowspan: establece el número de filas que la celda abarca verticalmente
<td rowspan="2">21</td>
rowspan="2": configura la celda actual para que abarque dos filas verticalmente

4. Etiquetas de formulario

4.1 El papel de las formas

La función del formulario: se utiliza para enviar datos al servidor. Hay
dos formas de enviar datos al servidor:
1) Utilice el formulario para enviar datos al servidor.
A menudo hay etiquetas de elementos del formulario (nombre de usuario, contraseña, apodo). , correo electrónico, código de verificación) en el formulario, etc.), puede ingresar datos en los elementos del formulario y luego enviar el formulario para enviar los datos ingresados al servidor correspondiente.
2) Los datos también se pueden enviar al servidor mediante hipervínculos . Se puede unir un signo de interrogación
después http://www.baidu.com?user=张三&age=20&like=篮球
Después de ingresar la dirección y acceder al servidor, puede llevar los parámetros empalmados después de la dirección al servidor.

4.2.etiqueta de formulario

<form action="http://www.baidu.com" method="GET|POST"> ... </form>
El atributo de acción: se utiliza para especificar la dirección a la que se enviarán los datos del formulario.
Por ejemplo: el atributo de acción apunta a la URL del servidor Baidu, lo que significa que todos los datos del formulario se enviarán al servidor Baidu.
atributo de método: especifica el método de envío. Los métodos de envío comúnmente utilizados son GET y POST (la diferencia se discutirá más adelante)
. Si no se especifica el método, el valor predeterminado es el envío GET.

5. Etiquetas de elementos de formulario

1) Cuadro de entrada de texto (nombre de usuario/código de verificación/correo electrónico/apodo)
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="text" name="nickname"/>
2) Cuadro de entrada de contraseña (contraseña/confirmar contraseña)
<input type="password" name="psw"/>
<input type="password" name="repsw"/>

3) Casilla de opción única (opción de pregunta de opción única/género)
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
4) Casilla de opción múltiple/casilla de verificación (opción de pregunta de opción múltiple/puesto/pasatiempo)
<input type="checkbox" name="like"/>篮球

5) Cuadro de selección desplegable (selección provincia/ciudad/urbano)
<select name="prov"> <option>北京市</option> <option>上海市</option> <option>广东省</option> ... </select>

6) Cuadro de entrada de texto de varias líneas
<textarea name="desc"></textarea>

7) Botón / botón de envío
<input type="button" value="换一张"/>
Los botones normales en sí mismos no tienen ninguna función. Puede agregar funciones al botón a través de js (por ejemplo, después de hacer clic, cambiar una imagen)

<input type="submit" value="提交/登录/注册"/>
El botón de envío se utiliza para enviar el formulario y enviar los datos del formulario al servidor al que apunta el atributo de acción.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎注册</title>
		<!-- style标签内部用于书写css样式、css注释 -->
		<style>
			*{
     
     /* 选中所有元素 */
				font-family: "微软雅黑";
			}
			table,td,th{
     
     /* 设置边框 */
				border: 2px solid red;
				border-collapse: collapse;
			}
			table{
     
     /* 设置位置 */
				/* 设置背景 */
				background-color: lightgray;
				/* 设置左右外边距自适应(始终保持相等) */
				margin-left: auto;
				margin-right: auto;
			}
			td,th{
     
     
				/* 设置内边距(元素边框和内容之间的距离) */
				padding: 5px;
			}
			h1{
     
     
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>欢迎注册</h1>
		<table>
			<tr>
				<td>用户名:</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password"/></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>
					<input type="radio" value="boy" checked name="sex"/>男
					<input type="radio" value="girl" name="sex"/>女
				</td>
			</tr>
			<tr>
				<td>爱好:</td>
				<td>
					<input type="checkbox" value="basketball" name="hobby" />篮球
					<input type="checkbox" value="basketball" checked name="hobby" />足球
					<input type="checkbox" value="basketball" name="hobby" />排球
				</td>
			</tr>
			<tr>
				<td>城市</td>
				<td>
					<select>
						<option value="beijing">北京</option>
						<option value="guangzhou" selected="">广州</option>
						<option value="shenzhen">深圳</option>
						<option value="shanghai">上海</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>自我描述:</td>
				<td>
					<textarea name="desc" cols="30" rows="5" placeholder="请输入描述信息...">
					</textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: center;">
						<input type="submit" value="提交" />
				</td>
			</tr>
		</table>
	</body>
</html>

6. Detalles del formulario

1. Al enviar el formulario, ¿por qué no se envían los datos del formulario?

Para la etiqueta del elemento del formulario en el formulario, siempre que sea necesario enviar datos al servidor, se debe agregar el atributo de nombre al elemento del formulario; si no hay un atributo de nombre en la etiqueta del elemento del formulario, el elemento se ignorará cuando se envía el formulario. Por ejemplo:

<input type="text" name="username"/>
<input type="password" name="psw"/>

2. ¿Cómo seleccionar solo uno de los múltiples cuadros de botones de opción?

Se requiere que varios cuadros de botón de opción tengan el mismo valor de atributo de nombre. Si el valor del atributo de nombre de varios cuadros de botón de opción es el mismo, significa que son el contenido de un grupo. Los cuadros de botón de opción en un grupo solo pueden ¡selecciona uno de ellos!

<td>性别:</td>
<td>
    <input type="radio" name="gender"/>男
    <input type="radio" name="gender"/>女
</td>

3. ¿Por qué los valores enviados están activados después de seleccionar un elemento en el botón de opción y la casilla de verificación?

Debido a que los cuadros de botones de opción y las casillas de verificación solo se pueden seleccionar, a diferencia de los cuadros de entrada de nombre de usuario y contraseña, se puede ingresar contenido.

Por lo tanto, debemos establecer el valor enviado para el botón de opción o la casilla de verificación a través del atributo de valor (si no se establece, el valor predeterminado está activado), por ejemplo:

<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女

4. ¿Cómo configurar un botón de opción o una casilla de verificación para seleccionar un elemento determinado de forma predeterminada?

Puede agregar un atributo check="checked" al botón de opción o a la etiqueta de la casilla de verificación para que el botón de opción o la casilla de verificación actual estén seleccionados de forma predeterminada. Por ejemplo:

<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球

5. ¿Cómo configurar un cuadro desplegable para seleccionar un elemento de forma predeterminada?

Agregue un atributo selected="selected" a la etiqueta de opción para que la opción actual esté seleccionada de forma predeterminada, por ejemplo:

<select name="city">
    <option>北京</option>
    <option>上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>

6. ¿Cuál es la función del atributo de valor en la opción de opción en el cuadro de selección desplegable?

<select name="city">
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
	<option selected="selected">广州</option>
	<option>深圳</option>
</select>

Si se selecciona una opción y se agrega un atributo de valor a la opción, el valor del atributo de valor se enviará cuando se envíe el formulario.

Si se selecciona una opción y no se agrega ningún atributo de valor a la opción, el contenido de la etiqueta se enviará cuando se envíe el formulario.

7. Otras etiquetas

Antes de HTML5, la mayor parte del audio y el vídeo se reproducían a través de complementos (como Flash). HTML5 especifica una forma estándar de incluir audio y vídeo a través de elementos de audio y vídeo.

1. etiqueta de audio (html5)

La etiqueta de audio puede reproducir archivos de sonido o transmisiones de audio, por ejemplo:

<audio controls src="audio/沙漠骆驼_展展与罗罗.mp3"></audio>

Entre ellos, los atributos de la etiqueta de audio:

src属性：用于指定要播放的音频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：音频在就绪后马上播放（自动播放）
loop="loop"：当音频完成播放后，再次开始播放（循环播放）
width、height：设置音频播放器的宽度和高度

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的

<audio controls src="audio/沙漠骆驼_展展与罗罗.mp3">
	如果您可以看到此内容，说明您的浏览器不支持此标签!
</audio>

2. etiqueta de vídeo (html5)

La etiqueta de video puede reproducir secuencias de video y actualmente admite tres formatos de video: MPEG4, Ogg y WebM.

<video controls src="video/小芳_李荣浩版.mp4"  width="50%"></video>

Entre ellos, los atributos de la etiqueta de vídeo:

src属性：用于指定要播放的视频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：视频在就绪后马上播放（自动播放）
loop="loop"：当视频完成播放后，再次开始播放（循环播放）
width、height：设置视频播放器的宽度和高度

<video> 与 </video> 之间插入的内容是供不支持 audio 元素的浏览器显示的(Aquí ya no se dan ejemplos)

3. etiqueta div, span, p

Los elementos div, span y p son etiquetas muy comunes pero de uso común. Todas son etiquetas contenedoras que se pueden usar para envolver otros elementos o texto. Al agregar estilos a estos elementos, puede establecer el contenido que contienen.

div, p: elementos de bloque, que ocupan una línea de forma predeterminada y pueden establecer el ancho y el alto (el elemento div generalmente se usa para el diseño, mientras que el elemento p generalmente se usa para definir párrafos)

span: elementos en línea. Los elementos en línea se pueden mostrar en la misma línea y no se pueden establecer el ancho y el alto (span se usa para contener texto o combinar elementos en línea para facilitar el estilo unificado)

4. Etiquetas de encabezado y pie de página (html5)

<header>Las etiquetas definen el encabezado (información introductoria) de un documento o la sección de encabezado de una página.

<footer>Las etiquetas definen el pie de página de un documento o sección. Los pies de página suelen contener el autor del documento, información de derechos de autor, enlaces a términos de uso, información de contacto y más.

3. Descripción general de CSS

1. ¿Qué es CSS?

CSS: Hojas de estilo en cascada, una tecnología utilizada para modificar y renderizar páginas web

El uso de estilos CSS para modificar páginas web puede separar el código CSS para configurar estilos y el código HTML para mostrar datos, mejorando así las capacidades de visualización de las páginas web.

2. Cómo introducir CSS en html

2.1. Agregue estilo CSS dentro del atributo de estilo en la
etiqueta.

Este es un div…

` Este método consiste en escribir el estilo CSS directamente dentro del atributo de estilo en la etiqueta, que solo es válido para la etiqueta actual, no puede lograr la reutilización del código y puede causar fácilmente confusión en la estructura de la página, lo que no favorece una expansión posterior y mantenimiento. Por lo que no se recomienda su uso en grandes cantidades.

2.2 Agregar estilos CSS dentro de la etiqueta de estilo en la etiqueta head.
<style type="text/css"> span{ border:2px solid green; /* 设置字体大小 */ font-size:30px; /* 设置字体粗细 */ font-weight:bolder; } </style>
Este método es para administrar todos los estilos CSS en una etiqueta de estilo sin escribir el código CSS en la etiqueta, por lo que no causará confusión en la estructura de la página y se puede implementar. reutilización de código

2.3 Introduzca archivos CSS externos a través de la etiqueta de enlace.
 <link rel="stylesheet" href="demo.css"/>
Este método escribe todos los códigos CSS en un archivo CSS para una administración unificada y realmente logra: la separación del código HTML y el código CSS. La reutilización del código se puede lograr sin causar confusión en la estructura de la página.
Se recomienda este enfoque (especialmente en el desarrollo empresarial)

4. selector CSS

El llamado selector es una tecnología que puede ayudarnos a seleccionar elementos para modificarlos en HTML.

1. Selector de nombre de etiqueta

Seleccione todas las etiquetas con el nombre especificado por nombre de elemento (o nombre de etiqueta)

Formato: nombre del elemento/nombre de la etiqueta {estilo css...}

/* ----- 1.标签名选择器练习 ----- 
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{
    
     /* 选中所有的span元素 */
	background-color:#efbdef; 
	font-size: 22px;
	font-weight: bolder;
}

2. selector de clase

Puede agregar un atributo general: clase a un elemento. Utilice el atributo de clase para establecer el grupo al que pertenece el elemento. Los elementos con el mismo valor de clase se agrupan. Puede seleccionar elementos en este grupo a través del valor de clase y agregar estilos a los elementos.

Formato: .valor de clase {estilo css...}

Ejemplo:

/* ----- 2.类选择器练习 ----- 
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e；*/
.s1{
    
     /* 选中所有class值为s1的元素 */
	background: #faf77b;
	border: 2px solid cyan;
}
.s2{
    
     /* 选中所有class值为s2的元素 */
	background: #5eff1e;
	color: #ec0e7e;
}

Además, un elemento también se puede configurar con múltiples valores de clase, que están separados por espacios, por ejemplo:

<span class="s1 s2" >span111</span>

Indica que el elemento actual pertenece a varios grupos al mismo tiempo y los estilos establecidos en varios grupos también se aplicarán al elemento actual al mismo tiempo.

Si varios grupos establecen el mismo estilo (pero con valores diferentes), los estilos entrarán en conflicto y el estilo escrito más tarde sobrescribirá el estilo anterior.

Suplemento de contenido: Orden de prioridad del selector:

(1) Si es el mismo tipo de selector y se establecen estilos para algunos elementos al mismo tiempo, si los estilos entran en conflicto, el estilo escrito más tarde anulará el estilo anterior.

(2) Si es un selector diferente, el orden de prioridad de estilo establecido es: selector de id (100) > selector de clase (10) > selector de nombre de elemento (1)

3. selector de identificación

A través de la identificación del atributo común en la etiqueta, se puede establecer un número único para la etiqueta (el valor de identificación debe ser único) y se puede seleccionar un elemento de forma única a través del valor de identificación.

Formato: #id valor {estilo css}

/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
#p1{
    
     /* 选中id值为p1的元素 */
	font-size:24px;
	color: #a06649;
	text-indent: 20px;
}

<p id="p1">这是一个p元素!!!</p>

4. Selector de descendientes

Selecciona el elemento descendiente especificado dentro del elemento especificado

Formato: Ancestro Descendientes {estilo css...}

/* ----- 4.后代选择器练习 ----- 
为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{
    
     /* 匹配所有p元素内部的所有span元素 */
	font-size:18px;
	color: red;
	background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */

<p id="p1">
	这是一个p元素!!!
	<span>这是一个span元素!!!</span>
</p>

5. Selector de atributos

Según los elementos seleccionados por el selector, filtrar/filtrar los elementos de acuerdo con las condiciones de atributos de los elementos

Formato: selector [属性条件1][属性条件2]...{estilo css}

/* ----- 5.属性选择器 ----- 
为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
input[type='text']{
    
     /* 匹配所有的input并且type值为text的元素 */
	background: #FF7CCC;
	font-size: 22px;
	text-indent: 15px;
}
input[type='text'][name='email']{
    
     
	/* 选中所有的input并且type值为text、并且name为email的元素 */
	background : yellow;
}

5. Resumen de atributos comunes

1. Atributos del texto

1. text-align: Establece la alineación horizontal del texto dentro del elemento. Sus valores comunes son:

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2. text-decoration: Establece el estilo de subrayado del texto, sus valores comunes son:

underline: 有下划线
none: 没有下划线

3. text-indent:Establece la sangría de la primera línea de texto, unidad: píxel/porcentaje

4. letter-spacing: Establece el intervalo/espaciado de caracteres. Sus valores comunes son:

normal
像素值

5. text-shadow: Establece la sombra de la fuente, su valor es:

像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色

2. Atributos de fuente

font-size: Establecer tamaño de fuente

font-weight:Establecer el grosor de fuente normal, negrita, más negrita 100/200/300…/900

font-family: establece fuentes, como Microsoft YaHei, HeiTi, KaiTi, etc.

color: Establecer color de fuente

3. Atributos de fondo

background-color:Establecer color de fondo

background-image:Establecer imagen de fondo, url('ruta de la imagen');

background-repeat: Establece o recupera si y cómo se organizan las imágenes de fondo del objeto.Valores utilizados comúnmente:

repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)

background-position: establece o recupera la posición de la imagen de fondo del objeto

background: Color de fondo, imagen de fondo, si la imagen de fondo repite la posición de la imagen de fondo

4. Frontera

borde:2px rojo sólido; – Establece el borde del elemento (puedes establecer el ancho, el estilo y el color del borde al mismo tiempo)

La propiedad del borde se puede dividir en las siguientes configuraciones:

border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色

Entre ellos, el ancho del borde, el estilo del borde y el color del borde también se pueden dividir según las direcciones superior, derecha, inferior e izquierda. Tome el ancho del borde como ejemplo:

border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

5. Otros atributos

ancho: establece el ancho del elemento

altura: establece la altura del elemento

margen: establece el margen del elemento

margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;

6. Suplemento: Configuración de color

Hay tres formas comunes de obtener valores de color:

Método 1: establezca el nombre del color, por ejemplo:

red、green、blue、yellow、cyan、pink、white、black等

Método 2: establezca # más un valor hexadecimal de seis dígitos

#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等

Método 3: establecer el valor del color rgb (pausa: 14:46-15:06)

rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
（red） （green） （blue） （yellow） （cyan）

Siete, atributo de visualización

La visualización se utiliza para establecer el tipo de elemento, valores de uso común:

block：块级元素的默认值
    默认情况下独占一行
    可以设置宽高
inline：行内元素的默认值
    默认情况下多个行内元素可以处在同一行
    一般不能设置宽高
inline-block：行内块元素
    多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素

8. Tipos de elementos (comprensión)

div/span/p son todas etiquetas de contenedor que se utilizan para envolver otro contenido (¡estos elementos en sí no tienen mucho estilo!)

p: elemento a nivel de bloque, que ocupa una línea de forma predeterminada, se utiliza para envolver un fragmento de texto (al escribir un artículo, use la etiqueta p para envolver cada fragmento de contenido)

div: un elemento a nivel de bloque que ocupa una línea de forma predeterminada y se usa para envolver otro contenido. Configurar el estilo en el div puede afectar el contenido del div.

span: elemento en línea, que se puede mostrar en la misma línea que otros elementos de forma predeterminada.

(1) Elementos a nivel de bloque (bloque)

De forma predeterminada, los elementos a nivel de bloque ocupan su propia línea.

Puede establecer el ancho y el alto. Si se establece, será el ancho y el alto establecidos.

Si el ancho y el alto no están establecidos, el ancho llena el elemento principal de forma predeterminada y el alto está determinado por el contenido (compatible con el contenido)

Por ejemplo: div/p/h1~h6/form/table y otros elementos son elementos a nivel de bloque.

(2) Elementos en línea (en línea)

De forma predeterminada, varios elementos en línea pueden estar en la misma línea.

No se puede establecer el ancho y el alto

Por ejemplo: span/input/img/i/b y otros elementos son todos elementos en línea

(3) Elemento de bloque en línea (bloque en línea)

Tiene las características tanto de elementos en línea (se pueden mostrar en paralelo) como de elementos a nivel de bloque (se puede configurar el ancho y el alto)

9. Extensión

1.Clasificación del selector CSS

Selector global (comodín *)
Selector de etiquetas (cuerpo, div, p, ul, li)
selector de clase(.)
Selector de identificación (#)
Selectores combinados (.head .head_loge, separe los dos selectores con un espacio)
Selector de descendientes (#head .nav li ul, selector del conjunto principal al descendiente)
Selector de niños (div>p)
Selector de grupo (div, span, img{color: red;}, es decir, agrupar etiquetas con el mismo estilo)
Heredar el selector (div p, separar los dos selectores con la barra espaciadora)
Selector de pseudoclase (pseudoclase de estilo de enlace de un elemento: :link (no visitado), :visited (visitado), :active (seleccionado), :hover (cuando el mouse está sobre el enlace))
Selectores de atributos para coincidencia de cadenas (^ (inicio), $ (medio), * (fin))
selector de hermanos adyacentes css (como h1+p)

2. Prioridad del selector CSS

Niveles diferentes:! importante (no agregue ";" después del atributo de estilo, agregue un punto y coma después de! Importante)>Estilo en línea>Selector de ID>Selector de clase>Etiqueta>Comodín

Mismo nivel:

(1) Los estilos escritos más tarde en el mismo nivel sobrescribirán los estilos escritos primero
(2) Reducción del selector