Cómo hacer un color de fondo normal en html. Cambiar el texto y el color de fondo

Abra el archivo de su página HTML para editarlo en el editor que esté utilizando. Para hacer esto, puede hacer clic derecho en el documento y seleccionar la sección "Abrir con".

La estructura de un archivo HTML es una serie de descriptores de varios niveles y propósitos. El código de la página normalmente comienza con la etiqueta . Después de esto suele haber una sección , que especifica el título de la página y el código CSS. Una vez cerrado el identificador, comienza el cuerpo de la página. . El atributo para configurar la imagen de fondo de la página se establece como un parámetro de fondo adicional para esta etiqueta. El código para crear el fondo de la página se verá así:

En este caso, la ruta a la imagen puede ser una URL (que comienza con http://). La ubicación se puede establecer desde el directorio raíz (/root/carpeta/fondo.jpg) o en relación con la ubicación del documento HTML que se está editando (por ejemplo, carpeta/fondo.jpg).

Guarde sus cambios y abra la página en un navegador. Para hacer esto, haga clic derecho y seleccione "Abrir con". En la lista proporcionada, indique el nombre del programa que utiliza para ver páginas en Internet. Si el parámetro de fondo se configuró correctamente, verá la imagen de fondo especificada anteriormente. Si la imagen no se muestra, verifique que el atributo de fondo esté especificado correctamente y la ruta al archivo de fondo.

parámetro bgcolor

Para establecer el color de fondo sin una imagen, puede utilizar la directiva bgcolor. Como valor para este atributo, puede especificar el nombre del color en idioma en Inglés o utilice el valor del color en la paleta HTML. Por ejemplo:

Este código le da a la página un fondo azul. Si desea establecer un tinte de color o un color más preciso, utilice los valores de la paleta HTML:

En este caso, #002902 es el color que se le debe dar a la página.

Atributos CSS

También puedes configurar el fondo usando código CSS en las opciones. :

Usando CSS, también puedes especificar una imagen de fondo para la página a través de background-image:

El uso de CSS y HTML da los mismos resultados; sin embargo, al configurar los parámetros de visualización de la página, es preferible usar CSS.

El fondo de un sitio HTML se puede cambiar utilizando ambos atributos de etiqueta. cuerpo, y usando estilos CSS también aplicados a la etiqueta cuerpo. Consideremos ambas opciones para crear un fondo para un sitio web.

Cambiar el color de fondo usando HTML

Etiqueta cuerpo, como casi cualquier etiqueta HTML, tiene sus propios atributos. Para etiquetar atributos cuerpo relatar:

• colorbg- define el color de fondo de la página;
• fondo- le permite establecer una imagen como fondo de una página web (este tema se analiza en detalle en el artículo :);
• Desplazarse- controla la visualización de la barra de desplazamiento en la página;
• texto- establece el color base del texto que se mostrará en la página web;
• propiedadesbg- indica si el fondo se desplazará junto con la página;
• enlace- controla el color predeterminado de los enlaces en la página;
• un enlace- establece el color del enlace activo;
• enlace v- define el color del enlace visitado en la página;
• margen izquierdo/margen derecho- establece la sangría del contenido desde el borde izquierdo o derecho de la ventana del navegador;
• margen superior/margen inferior- establece la sangría del contenido desde el borde superior o inferior de la ventana del navegador;

Para cambiar el color de fondo usando HTML, usaremos el atributo colorbg:

Este es un texto de ejemplo blanco, especificado mediante el atributo de texto de la etiqueta del cuerpo.

Nota: Se recomienda especificar un color de fondo de la página, incluso si el fondo es blanco. Esto se debe a que algunos usuarios pueden utilizar un color de fondo no estándar en su navegador y esto puede provocar que el texto de su sitio sea ilegible.

Cambiar el color de fondo de la página usando CSS

Este es un ejemplo de texto blanco configurado usando CSS de fondo. El fondo de la página también se configura mediante CSS.

En el creador de sitios web de Nubex, para cualquier sitio web puede seleccionar un fondo ya preparado de una gran biblioteca de imágenes o agregar el suyo propio.

En capítulos anteriores, compilamos una plantilla básica para documentos HTML, determinamos qué son las etiquetas HTML, aprendimos cómo guardar y editar archivos HTML y en este capítulo Conozcamos los atributos de las etiquetas y cambiar el color del texto y el fondo de la página.

abramos nuestro índice.html, para editar: ¡¡¡Lo logré!!! Y cambiémoslo un poco, agreguemos atributos: texto="#000000" bgcolor="#ffffff"> ¡¡¡Lo logré!!! Atributo es un parámetro de etiqueta que se inserta en la etiqueta como un "par" (nombre de parámetro + valor de parámetro).
Se insertan los valores de los atributos de la etiqueta:
1) texto=#000000 sin comillas;
2) texto="#000000" entre comillas simples;
3) texto="#000000" entre comillas dobles.
Cualquiera de estas opciones es correcta, pero si le importa la ética del código, entonces es mejor usar doble comillas, como en mi ejemplo anterior.

Atributo "texto" controla el color del texto en toda la página, y "bgcolor" controla el color de fondo de la página.

Ahora propongo hablar sobre colores para documentos HTML. El color está configurado:
1) texto="oro"- palabras en inglés, por ejemplo: gold (dorado), red (rojo), green (verde) y así sucesivamente...
Pero un color puede constar de una sola palabra, por ejemplo “rojo”, pero si escribe “verde-rojo”, el navegador no lo entenderá y simplemente lo ignorará.
2) texto="#000000"- Esquema de colores RBG (rojo, verde, azul). "#" este símbolo indica que se trata de un número de color, los dos primeros símbolos (ceros en mi ejemplo) nos dicen cuántos colores “rojos” tomamos, los segundos son verdes y los dos últimos son azules.
Cada color se especifica de 00 a FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), por ejemplo #000000-negro, #ffffff-blanco, #ff0000-rojo, # 00ff00- verde # 0000ff-azul

Como beneficio adicional del sitio, le sugiero que descargue la paleta de colores (2kB), que se muestra en la imagen de arriba. Necesita descomprimir el archivo y ejecutarlo. color.html, luego en el campo grande, coloque el puntero del mouse sobre el color que necesita, que se mostrará en una ventana pequeña, y si hace clic con el mouse en este momento, el código de color aparecerá en la ventana pequeña a la derecha.

Ahora volvamos a nuestro archivo. índice.html y guardarlo como tsvet.html, ahora veamos qué pasó. ¿Cómo era y cómo ha permanecido? Y tienes toda la razón, porque el blanco es para el fondo y el negro para el texto es el color predeterminado. Para notar la diferencia, cambiemos los valores de los atributos:

texto=oro" bgcolor="#0900b8"> ¡¡¡Lo logré!!! Guardemos y miremos (se abre en una nueva pestaña)

Hay otras formas de configurar texto en archivos HTML, pero estas dos se consideran las principales.

En el próximo capítulo aprenderemos cómo manipular texto con etiquetas BR y ajustar el texto a otra línea.

A la hora de configurar cualquier sitio web, además de la funcionalidad, el diseño es muy importante. Esto es lo que marca el estilo y diseño propio de una determinada empresa o persona para quien se está creando el sitio web. Personalizar el color de fondo y la imagen es fácil siguiendo las instrucciones de este artículo.

Abra su archivo HTML usando el Bloc de notas o cualquier otro editor de texto al que esté acostumbrado. Por ejemplo, tomemos una página web primitiva con un mínimo de texto. Puede abrir su archivo usando cualquier navegador.

Primero, cambie el color de su fondo, ya que las personas con una conexión a Internet lenta no podrán ver inmediatamente la imagen de fondo del sitio. Por un tiempo, mientras se carga la imagen, solo podrán ver el color de su sitio.
Ingrese en la etiqueta parámetro bgcolor=”*****”, donde ***** es el código de color. Puede encontrar los colores para HTML en cualquier editor gráfico seleccionando la opción "para web" o en el sitio web https://colorscheme.ru/color-names

Sólo necesitas seleccionar un color en la paleta del círculo y asignar su intensidad dentro del cuadrado. A la derecha verás dos códigos para html. Cópialos y pégalos en el bloc de notas.

Después de seleccionar un color e insertarlo en el código, vea si hizo todo correctamente viendo la página web resultante desde un navegador.

Ahora puedes comenzar a insertar tu imagen de fondo. Coloque la imagen deseada en la carpeta de códigos para mayor comodidad. Ponle un nombre en letras latinas.

Ahora descubra la ubicación del archivo haciendo clic derecho sobre él, seleccionando "Abrir con" y haciendo clic en cualquier navegador instalado en su computadora.

Copie la dirección de la barra de búsqueda de su navegador.

Ahora en la etiqueta ingrese la línea:

• estilo = "imagen de fondo: url ('archivo:///C:/Users/FILE_PATH.jpg')"

Guarde su archivo.

Consulta tu página web. Verás que el fondo ha sido sustituido por tu texto.

Tenga en cuenta que para los usuarios con una resolución de pantalla más alta, su imagen se duplicará hacia abajo y hacia la derecha. No quedará bien si la imagen no es monocromática. Existen comandos especiales para corregir este parámetro.

• repetición de fondo: "Valor". Las opciones para su valor podrían ser: “repeat-x” – repite su imagen de fondo tanto horizontal como verticalmente. “repeat-y” – repetición sólo verticalmente. “sin repetición”: la imagen se congela en su lugar y no se repite. “espacio”: toda la página se llenará con el número máximo de copias de la imagen, las más externas se recortarán. “redondo” – la misma opción, pero los bordes de la imagen se escalarán cuidadosamente;
• adjunto de fondo: "Valor". Si sustituye la etiqueta "desplazamiento" en lugar de la palabra Valor, la imagen se desplazará junto con el sitio. “fijo”: el fondo permanece sin cambios al desplazarse;
• tamaño de fondo: Valor Valor2. Aquí los valores deben tomar un valor en píxeles. Por ejemplo: 100 px 200 px. Además de los píxeles, se aceptan valores porcentuales. Esta es una opción para llenar la página con una imagen. Además de los números, puede ingresar dos parámetros: “contener” – llena la página con una imagen a lo largo del lado largo y “portada” – llena la página con una imagen a lo ancho.

Una vez que conozca los conceptos básicos para llenar una página con fondo en HTML, estará listo para crear su primer sitio web.

Del autor: Bienvenidos a webformyself y hoy quiero contarles cómo cambiar el fondo del sitio. El color de fondo o la imagen de fondo pueden desempeñar un papel muy importante en el aspecto de un sitio, por lo que es necesario saber cómo configurarlo.

Cómo cambiar el fondo en WordPress

Nuevamente, si tiene un motor de WordPress, cambiar el fondo general de la página no será difícil. Sólo necesita hacer clic en el botón "Personalizar" en la pestaña "Apariencia". Aquí debe seleccionar "Colores". Dependiendo de la plantilla que elijas, podrás elegir colores para diferentes elementos. Pero puede elegir el color de la página en cualquier caso: se abrirá un panel de color conveniente frente a usted.

La cantidad de configuraciones aquí depende de la plantilla que tenga. En cualquier caso, debería ser posible establecer el color para toda la página; en diferentes plantillas también puedes establecer el fondo y el color de los títulos, enlaces, etc.

En realidad, eso es todo lo que necesitas saber. Si necesita descargar una imagen de fondo, seleccione el elemento apropiado y busque el archivo requerido en su computadora.

JavaScript. Comienzo rápido

En el buen sentido, la imagen no debe ser demasiado pesada, porque esto afectará en gran medida la velocidad de carga del sitio. Lo ideal es utilizar las llamadas imágenes de fondo sin costuras, que se repiten horizontal y verticalmente y así llenan todo el espacio.

Después de cargar la imagen, se le presentarán un par de configuraciones útiles para configurar. La conveniencia de WordPress es que ve los cambios inmediatamente, dependiendo de la configuración que elija.

Primero, se le pedirá que elija un método de repetición. Ya hay 4 opciones: repetir solo en horizontal, solo en vertical, por ambos lados y no repetir. Dependiendo de la imagen que estés utilizando, tendrás que elegir.

La repetición le permite ahorrar significativamente en el tamaño de la imagen cuando es pequeña y se puede repetir para que las transiciones bruscas entre repeticiones no sean visibles. De esta forma puede ahorrar decenas de kilobytes en comparación con el método en el que se carga una imagen de tamaño completo de gran tamaño.

Posición. No hay nada que explicar aquí, solo observe cómo cambia la apariencia de la página con diferentes posiciones del fondo. Elige la opción que más te guste.

Vinculante. Esta es una configuración muy interesante, te permite elegir si desplazar la imagen de fondo junto con el contenido o congelarla en un solo lugar. Personalmente siempre me gusta elegir la opción fija porque cuando haces scroll hacia abajo solo se mueven los bloques de contenido.

Por ejemplo, si tiene una imagen de fondo con una altura de 1000 píxeles y no la repite ni la captura, cuando se desplace hacia abajo simplemente desaparecerá de la vista. Arreglar el fondo permite que la imagen permanezca a la vista en todo momento. A veces esta es una solución muy eficaz.

JavaScript. Comienzo rápido

Aprenda los conceptos básicos de JavaScript con un ejemplo práctico de cómo crear una aplicación web.

En realidad, eso es todo para cambiar el fondo en WordPress. Como puedes ver, todo es lo más sencillo posible.

Cómo cambiar el fondo de un sitio web en html

Bien, hemos visto una versión puramente visual, en la que no es necesario entrar en el código y escribir nada allí. Ahora descubramos cómo cambiar el fondo a través de html y css. ¿Qué beneficios proporciona esto? Puede configurar imágenes de fondo no solo para el sitio en general, sino también para cada elemento por separado. Por ejemplo, para algún widget, menú, encabezado, etc. Esto brinda muchas más oportunidades en el diseño de sitios web y en cambiar su diseño.

Para acceder a todo este estilo, necesitas encontrar la hoja de estilo principal de tu plantilla. Por lo general, se encuentra en la raíz o en la carpeta CSS y se llama style.css o main.css.

En él verás el código que diseña varios elementos de tu sitio. Si desea configurar el fondo globalmente, puede hacerlo asignando un fondo al selector de cuerpo, es decir, el cuerpo de la página.

¿Cómo se configura el fondo?

Recuerde: la propiedad de fondo. Hoy es mejor utilizar la versión abreviada de escribir esta propiedad. Por ejemplo:

cuerpo (fondo: #ccc url (bg.png) sin repetición 50% 50% fijo;)

cuerpo( fondo: #ccc url(bg.png) sin repetición 50% 50% fijo;

¿Qúe significa todo esto? El primer parámetro suele ser un color sólido. Digamos que lo configuramos en gris. Es posible que no se especifique el color si se especifica una imagen de fondo. Como puede ver, la imagen se especifica mediante la construcción URL (ruta del archivo). En consecuencia, debe escribir correctamente la ruta al archivo y también asegurarse de indicar su extensión.

Todos los parámetros que anoté después de esto son opcionales y se pueden especificar como se desee. Entonces, especifiqué que la imagen de fondo no debe repetirse, colocarse en el centro tanto horizontal como verticalmente, y también fijarse en un solo lugar para no desaparecer al desplazarse.

Como puede ver, aquí están todos los mismos parámetros que configuró visualmente, pero aquí están registrados como valores de la propiedad de fondo.

En este ejemplo, utilicé una notación de propiedad abreviada, es más conveniente, pero de hecho, cada parámetro individual tiene su propia propiedad: color de fondo para el color, imagen de fondo para una imagen, posición de fondo para establecer una posición.

Por supuesto, para dominar estas propiedades, le aconsejo que primero realice nuestro curso y, si desea convertirse en un usuario avanzado del lenguaje CSS, entonces. Allí aprenderás a configurar varios fondos al mismo tiempo, configurar su repetición, utilizar degradados, etc. La información es muy interesante y útil para los creadores de sitios web.

Bueno, te hablé de los conceptos básicos para trabajar con el fondo. Suscríbase a nuestro portal para recibir noticias y obtener más información sobre la creación de sitios web.

JavaScript. Comienzo rápido

Aprenda los conceptos básicos de JavaScript con un ejemplo práctico de cómo crear una aplicación web.