Cómo agregar CSS

Cuando el navegador lee la hoja de estilo, formatea el documento HTML según la información de la hoja de estilo.

Tres métodos para usar CSS

Hay tres métodos para insertar hojas de estilo:

  • CSS externo
  • CSS interno
  • CSS en línea

CSS externo

Al usar hojas de estilo externas, ¡solo necesita modificar un archivo para cambiar el aspecto completo del sitio web!

Cada página HTML debe contener una referencia al archivo de hoja de estilos externa dentro del elemento <link> de la sección <head>.

ejemplo

El estilo externo se define en el elemento <link> dentro de la sección <head> de la página HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Prueba personalmente

La tabla de estilos externa se puede escribir en cualquier editor de texto y debe guardarse con la extensión .css.

El archivo .css externo no debe contener cualquier etiqueta HTML.

"mystyle.css" es así:

"mystyle.css"

body {
  fondo-color: celeste;
}
h1 {
  color: azul marino;
  margen-izquierda: 20px;
}

nota:No agregue espacios entre el valor del atributo y la unidad (por ejemplo margen-izquierda: 20 px;）。La forma correcta es:margen-izquierda: 20px;

CSS interno

Si una página HTML tiene un estilo único, se puede usar una tabla de estilos interna.

Los estilos internos se definen en el elemento <style> dentro de la sección <head>.

ejemplo

Los estilos internos se definen en el elemento <style> dentro de la sección <head> de la página HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  fondo-color: lino;
}
h1 {
  color: granate;
  margen-izquierda: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Prueba personalmente

CSS en línea

Los estilos en línea (también conocidos como estilos en línea) se pueden usar para aplicar estilos únicos a un solo elemento.

Para usar estilos en línea, agregue el atributo style al elemento relevante. El atributo style puede contener cualquier propiedad CSS.

ejemplo

Los estilos en línea se definen en el atributo "style" del elemento relevante:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Este es un encabezado</h1>
<p style="color:red;">Este es un párrafo.</p>
</body>
</html>

Prueba personalmente

consejo:los estilos en línea pierden muchos de los beneficios de las tablas de estilos (mezclando contenido con presentación). Utilícelos con precaución.

múltiples tablas de estilos

si se han definido algunas propiedades para el mismo selector (elemento) en diferentes tablas de estilos, se utilizará el valor de la última tabla de estilos leída.

supongamos que hay unatabla de estilos externaasí se han establecido los estilos para el elemento <h1>:

h1 {
  color: azul marino;
}

supongamos que hay unatabla de estilos internaasí se han establecido los estilos para el elemento <h1>:

h1 {
  color: orange;    
}

ejemplo

si los estilos internos están enlazados a una tabla de estilos externadespuésel elemento <h1> será naranja si se define:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Prueba personalmente

ejemplo

pero, si está enlazado a una tabla de estilos externaanteriormenteSe define un estilo interno, entonces el elemento <h1> será de color azul oscuro:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Prueba personalmente

Orden de apilamiento

¿Qué estilo se usará cuando se especifiquen varios estilos para un elemento HTML?

Todos los estilos en la página se "taponarán" según las siguientes reglas para formar una nueva tabla de estilos "virtual", donde la prioridad más alta es la primera:

  1. Estilos en línea (en elementos HTML)
  2. Tablas de estilos externos e internos (en la sección head)
  3. Estilos predeterminados del navegador

Por lo tanto, los estilos en línea tienen la prioridad más alta y cubrirán los estilos externos e internos y los estilos predeterminados del navegador.

Prueba personalmente