El t tulo de este art culo abre una discusi n sobre c mo hacer texto en la parte inferior de la p gina con HTML. Los desarrolladores web buscan constantemente formas de mejorar la representaci n Visual de sus sitios, y una forma de hacer que la p gina sea m s eficiente y est ticamente atractiva es poner algo de texto que aparezca en la parte inferior de la p gina.
En este art culo veremos las principales formas de lograr el objetivo: el uso de las propiedades CSS "position: fixed" y "bottom: 0", el uso de una etiqueta y la capacidad de usar JavaScript para colocar din micamente el texto en la parte inferior de la p gina.
Echemos un vistazo m s de cerca a cada uno de estos m todos en las siguientes secciones. Por supuesto, cada desarrollador puede elegir la forma m s adecuada de acuerdo con las caracter sticas de su proyecto. Tambi n le proporcionaremos instrucciones y ejemplos de c digo que le ayudar n a incrustar f cilmente el texto en la parte inferior de la p gina en su sitio.
- C mo colocar texto en la parte inferior de una p gina HTML: formas b sicas e instrucciones
- Uso de la propiedad CSS position
- Uso de la propiedad CSS bottom
- Uso de la propiedad CSS de flexbox
- Uso de la propiedad CSS de grid
- Uso de la propiedad CSS float
- Usando JavaScript para colocar el texto en la parte inferior
- Ubicaci n del texto en la parte inferior de la p gina usando etiquetas HTML
- Pregunta-respuesta
C mo colocar texto en la parte inferior de una p gina HTML: principales m todos e instrucciones
Colocar texto en la parte inferior de una p gina HTML puede ser til para una variedad de prop sitos, como colocar un s tano o informaci n adicional. En esta secci n, veremos las formas b sicas y las instrucciones para colocar texto en la parte inferior de una p gina HTML.
Este es el bloque de texto inferior.
- Usar posicionamiento absoluto: otra forma de colocar el texto en la parte inferior de la p gina es usar posicionamiento absoluto. Por ejemplo, puede crear un bloque de texto y aplicar el siguiente CSS:
| Este es el bloque de texto inferior. | |
| Texto en la parte inferior de la p gina |
.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #f9f9f9;
padding: 10px;
}
.text {
text-align: center;
}
- El estilo del texto en la parte inferior de la p gina puede modificarse para adaptarse al dise o de su sitio web.
- La propiedad CSS bottom es una forma de colocar el texto en la parte inferior de una p gina en HTML. Especifica la sangr a desde el borde inferior de un elemento hasta el borde inferior de su contenedor.
- .selector {
- bottom: 0;
}
- Si desea colocar el texto en la parte inferior de toda la p gina, puede usar el siguiente c digo CSS:
- height: 100%;
- padding: 0;
- .container {
- position: relative;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
En este ejemplo, se crea un contenedor con la clase "container" que ocupa la altura m nima de toda la pantalla. Luego se crea un bloque con la clase" pie de p gina", que se coloca absolutamente en la parte inferior del contenedor con la propiedad bottom: 0.
Por lo tanto, el texto que se encuentra en el bloque con la clase "pie de p gina" siempre se mostrar en la parte inferior de la p gina.
El uso de la propiedad CSS bottom es una forma f cil y eficiente de colocar texto en la parte inferior de una p gina en HTML.
Uso de la propiedad CSS de flexbox
Flexbox (Caja flexible) es un conjunto de propiedades CSS dise adas para crear un dise o de p gina web flexible. Le permite administrar la ubicaci n de los elementos en el contenedor y asignarles espacio adicional o reducirlos seg n las necesidades de dise o.
La principal ventaja de flexbox es que le permite crear f cilmente dise os adaptables que cambian autom ticamente seg n el Tama o de la pantalla o el dispositivo del usuario.
Para usar flexbox, debe aplicar algunas propiedades b sicas al contenedor principal (contenedor flex) y a los elementos secundarios (elementos flex).
Propiedades b sicas del contenedor flex:
display: flex;
- establece el contenedor en modo de caj n flexible.
flex-direction: row|row-reverse|column|column-reverse;
- especifica la direcci n de colocaci n de los elementos dentro del contenedor (horizontal o verticalmente).
justify-content: flex-start|flex-end|center|space-between|space-around;
- especifica la ubicaci n de los elementos a lo largo del eje principal.
- align-items: flex-start|flex-end|center|baseline|stretch;
- - determina la alineaci n de los elementos a lo largo del eje transversal.
- Propiedades b sicas de los elementos flex:
flex-grow: valor;
- establece la capacidad del elemento para aumentar el ancho del espacio libre restante. Flex-shrink: significado; | |
- establece la capacidad del elemento para encogerse a lo ancho si es necesario. Flex-basis: valor; - establece el ancho inicial del elemento. |
flex: valor1 valor2 valor3;
- propiedad abreviada que combina flex-grow, flex-shrink y flex-basis en uno.
align-self: auto|flex-start|flex-end|center|baseline|stretch;
- determina la alineaci n de un elemento a lo largo del eje transversal, anulando la propiedad align-items para ese elemento.
Flexbox es una poderosa herramienta para crear dise os de p ginas web receptivos y flexibles. Debido a su facilidad de uso y sus amplias posibilidades, es uno de los m todos de dise o m s populares.
Uso de la propiedad CSS de grid
- 2
3
4
- En este ejemplo, los elementos del contenedor se dividen en dos columnas y cuatro filas. Cada elemento, utilizando las propiedades grid-column y grid-row, ocupa las posiciones deseadas en la cuadr cula.
- Grid tambi n proporciona la capacidad de administrar la ubicaci n y el orden de los elementos a trav s de las propiedades grid-Gap, grid-auto-columns, grid-auto-rows, justify-items, align-items y m s.
- La propiedad CSS float permite envolver los elementos con texto.
Aplique la propiedad CSS float: left; a la primera columna. Esto lo alinear a la izquierda y har que la segunda columna (y todos los elementos posteriores) se ajusten al texto.