ubiquitour.com

Tutorial de fondo cuerpo HTML

El fondo de una página web puede ser de estilo claramente colocando estilos de hojas de estilo en cascada dentro de la etiqueta body HTML. Definiendo ciertos atributos, puede aplicar características especiales, tales como imágenes y colores, para distinguir las páginas de los de otros sitios Web. Lea acerca de cómo aplicar estas técnicas a sus propias páginas web HTML.

Agregar el CSS

Para empezar, crear el CSS estilo marcador de posición dentro de las etiquetas que abarca cabeza para añadir estilos de fondo del cuerpo del archivo HTML. Introduzca una etiqueta de apertura "< estilo >" y especificar que el tipo "text/css". Por ejemplo:

< head >< estilo tipo = "text/css" >

A continuación, agregar un identificador de cuerpo para que el navegador sepa aplicar los estilos a la página. Para ilustrar:

< head >< estilo tipo = "text/css" >< cuerpo >

Siga el código CSS, encerrado entre llaves y agregue el atributo de fondo terminando con un punto y coma. Por ejemplo:

< head >< estilo tipo = "text/css" >cuerpo {fondo: futuro CSS;}

Finalmente, cerrar las etiquetas estilo y cabeza para completar el código. La entrada completa de CSS es el siguiente:

< head >< estilo tipo = "text/css" >cuerpo {fondo: futuro CSS;}< / estilo >< /HEAD >

Después de agregar CSS al marcador de posición y guardar el archivo, los estilos automáticamente llevará a efecto.

Propiedades de fondo

Puede utilizar cinco atributos, conocidos como propiedades de fondo, para controlar los detalles de color y la imagen de un fondo de cuerpo.

En primer lugar, "background-color" asigna el color de fondo de la página. Con un seis dígitos hexadecimales (hex) HTML código de color, puede especificar el color de su elección dentro del marcador de posición CSS. Estos códigos de color hexadecimal se encuentran en el típico editores de texto HTML, como Dreamweaver. Por ejemplo, para establecer un fondo amarillo claro, introduzca lo siguiente:

cuerpo {color de fondo: #FFFF99;}

A continuación, "background-image" le permite utilizar una imagen en formato JPG o GIF. Se recomienda que sólo utilice imágenes junto con un color de fondo en caso de que el archivo no se carga en la página. Las imágenes son automáticamente colocadas en el lugar de la parte superior izquierda de un elemento y se repiten tanto vertical como horizontalmente.

Para utilizar un gráfico, colocar su archivo en la misma ubicación que el documento HTML en el servidor Web y luego entrar en este lugar (siguiendo el indicador de dirección URL y encerrada entre paréntesis y apóstrofos únicos) dentro de la CSS. Por ejemplo:

cuerpo {imagen de fondo: url ('denominada sample.jpg');}

Además, usando el "background-repeat", puede controlar cómo se presenta la imagen de fondo. Establecer este atributo en "repeat-x" hace una imagen desplazarse horizontalmente y "repeat-y" se desplaza verticalmente. Usted también puede tener su imagen aparecen sólo una vez con "no-repeat". Sin "background-repeat", imágenes automáticamente vuelven a aparecer abajo y a través de. Para establecer una repetición horizontal, introduzca:

cuerpo {fondo-repeat: repeat-x;}

Para continuar, "background-attachment" indica la imagen o bien permanecer fijo en un lugar o desplazarse con la página. El valor predeterminado se establece automáticamente para desplazarse. Por ejemplo, para hacer el gráfico corregido, escriba:

cuerpo {fondo-accesorio: fija;}

Finalmente, usando el "background-position", puede indicar a la imagen para empezar en un área específica mediante el empleo de ciertas palabras, como "centro superior" y también "x" y "y" para indicar el posicionamiento específico. La "x" e "y" los indicadores son controlados con porcentajes, con la esquina izquierda superior es cero por ciento para ambos y con los pixeles con valor cero en el mismo lugar. Para colocar una imagen en un área del centro horizontal y vertical en la página, escriba:

cuerpo {fondo-posición: center center;}

Guardar el archivo y utilice la función "vista previa" de su editor de texto HTML para verificar que la página se está mostrando correctamente.