wikipediaillustrated

marketing

Cómo agregar y cambiar el color de fondo en HTML

Dejar un comentario en Cómo agregar y cambiar el color de fondo en HTML
Background color HTML.jpgkeepProtocol

Establecer el color de fondo de una página web o un elemento en esa página puede permitirle crear diseños únicos.

Tome la página de inicio de delicioso como ejemplo. La imagen de fondo de su sección de cabecera es una sopa de colores. Para garantizar que los lectores aún puedan ver el nombre de la receta, el color de fondo del cuadro de texto se establece en blanco. El efecto es sorprendente y fácil de leer.

Cambiar el color de fondo en HTML puede hacer que los elementos se destaquen

Solía ​​poder usar simplemente el atributo de color de fondo para cambiar el color de fondo de una página o elemento.

Digamos que desea cambiar el color de fondo de una página web a granate. Simplemente habría agregado el bgcolor en la etiqueta del cuerpo de apertura y configúrelo en el código de color hexadecimal #800000, como se muestra a continuación.

 <body bgcolor=”#800000">

Sin embargo, este atributo quedó obsoleto en la última versión de HTML y se reemplazó por una alternativa mucho mejor. Esta alternativa es la propiedad CSS background-color. Usando esta propiedad, puede agregar y cambiar los colores de fondo en su sitio web.

Veamos cómo puede cambiar el color de fondo en HTML. Cubriremos:

Cómo agregar color de fondo en HTML

Para agregar color de fondo en HTML, use la propiedad background-color de CSS. Establézcalo con el nombre de color o el código que desee y colóquelo dentro de un atributo de estilo. Luego agregue este atributo de estilo a un elemento HTML, como una tabla, encabezado, div o etiqueta de intervalo.

Agregar un color de fondo puede ayudar a que cierto elemento se destaque en la página, haciéndola más legible.

Veremos este proceso paso a paso. Para este tutorial, haremos una tabla en HTML como ejemplo.

1. Identifique el elemento HTML al que le gustaría agregar un fondo o crear uno.

Escanea tu código HTML para identificar qué elemento te gustaría cambiar. Si es el encabezado, busque la etiqueta de apertura

. Si es un div, busque la etiqueta

.

En este ejemplo, estamos creando una tabla con la etiqueta

.

2. Elija un color de fondo HTML.

Tiene muchos códigos de color HTML para elegir. Para este ejemplo, haremos el color #33475b.

Recurso destacado

La guía para principiantes de HTML

Rellene el formulario para acceder a la guía introductoria gratuita.




3. Agregue un atributo de estilo a la etiqueta de apertura.

A continuación, agregue el atributo de estilo a la etiqueta de apertura de su elemento. Para este tutorial, solo cambiará el color de fondo de esta tabla específica. El cambio no afectará a ningún otro elemento de la página.

Aquí está el HTML con CSS en línea:

 <table style="background-color:#33475b">
<tr>
<th>Name</th>
<th>Job Title</th> 
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>

Tabla HTML con color de fondo azul marino y color de fuente blanco

Así de simple. Ahora veamos qué hacer si desea establecer el color de fondo de varios elementos en una página.

Cómo cambiar el color de fondo en HTML

Supongamos que establece el color de fondo de toda su página web en un color y desea cambiar el color de fondo de un elemento específico a otro color. La buena noticia es que el proceso para cambiar el color de fondo de un elemento es casi idéntico al proceso para agregarlo.

Puede usar CSS en línea para hacer esto, pero usaremos varios estilos de CSS en el ejemplo a continuación. Veamos este proceso paso a paso.

1. Busque el selector de CSS «cuerpo».

En lugar de agregar este CSS en la etiqueta del cuerpo del archivo HTML, lo agregaremos usando el cuerpo Selección de CSS. Encuéntrelo en el código CSS de su sitio web.

2. Cambia el color de fondo del cuerpo.

A continuación, cambiaremos el color de fondo de toda la página web usando la propiedad background-color.

Aquí está el CSS:

 body {
background-color: #DBF9FC;
}

Aquí está el resultado:

Página con color de fondo aguamarina claro y una tabla con el fondo transparente predeterminado

Si este fuera el único CSS, todo en la página tendría el mismo fondo azul claro. A continuación, agregaremos CSS en línea para cambiar el color de fondo de la tabla.

3. Agregue CSS en línea para cambiar el color de fondo de elementos específicos.

Si queremos cambiar el color de fondo de…

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *