Layout

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es la 12ª sección del tutorial CSS Getting Started; Describe algunas maneras de ajustar el diseño de su documento. Cambia el diseño de su documento de ejemplo.

Informacion: Layout

Puede utilizar CSS para especificar varios efectos visuales que cambian el diseño de su documento. Algunas de las técnicas para especificar el diseño son avanzadas, y más allá del alcance de este tutorial básico.

Cuando diseña un diseño para que se vea similar en muchos navegadores, su hoja de estilo interactúa con la hoja de estilo y el motor de diseño predeterminados del navegador de formas que pueden ser complejas. Este es también un tema avanzado, más allá del alcance de este tutorial básico.

Esta página describe algunas técnicas sencillas que puedes probar.

Estructura del documento

Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.

El lenguaje de marcado del documento puede tener etiquetas de propósito general para crear la estructura. Por ejemplo, en HTML puede utilizar el elemento <div> para crear una estructura.

Ejemplo

En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.

Su hoja de estilo no puede dibujar un borde alrededor de esos párrafos, porque no hay ningún elemento que especificar en el selector.

Para solucionar este problema estructural, puede agregar una etiqueta <div> alrededor de los párrafos. Esta etiqueta es única, por lo que puede identificarse con un atributo id:

<h3>Numbered paragraphs</h3>
<div id="numbered">
  <p>Lorem ipsum</p>
  <p>Dolor sit</p>
  <p>Amet consectetuer</p>
  <p>Magna aliquam</p>
  <p>Autem veleum</p>
</div>

Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:

ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
}

  El resultado se ve así: 

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

Unidades de tamaño

Hasta ahora en este tutorial, se han especificado tamaños en píxeles (px). Estos son apropiados para algunos propósitos en un dispositivo de visualización como una pantalla de computadora. Pero cuando el usuario cambia el tamaño de fuente, su diseño puede parecer incorrecto.

Para muchos propósitos es mejor especificar tamaños como un porcentaje o en ems (em). Un em es nominalmente el tamaño de la fuente actual (el ancho de una letra m). Cuando el usuario cambia el tamaño de fuente, su diseño se ajusta automáticamente.

Ejemplo

El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.

El borde de la derecha tiene su tamaño especificado en ems.

En su navegador, cambie el tamaño de la fuente para ver cómo se ajusta el borde de la derecha pero el borde de la izquierda no:

RESIZE ME PLEASE

Más detalles

Para otros dispositivos, otras unidades de longitud son apropiadas.

Hay más información sobre esto en una página posterior de este tutorial.

Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.

Diseño del texto

Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:

text-align


  Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar
texto-sangría
    Indente el contenido en una cantidad que especifique.

Estas propiedades se aplican a cualquier contenido similar al texto del elemento, no sólo al texto real. Recuerde que son heredados por los hijos del elemento, por lo que es posible que tenga que desactivarlos explícitamente en los niños para evitar resultados sorprendentes.

Ejemplo

Para centrar los títulos:

h3 {
  border-top: 1px solid gray;
  text-align: center;
}

Resultado:

(A) The oceans

En un documento HTML, el contenido que ve debajo de un encabezado no está estructuralmente contenido por el encabezado. Así que cuando alineas un encabezado como este, las etiquetas debajo del encabezado no heredan el estilo.

Floats

La propiedad float fuerza un elemento a la izquierda oa la derecha. Esta es una forma sencilla de controlar su posición y tamaño.

El resto del contenido del documento fluye normalmente alrededor del elemento flotante. Puede controlar esto usando la propiedad clear en otros elementos para hacerlos permanecer alejados de los flotadores.

Ejemplo

En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.

Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:

ul, #numbered {float: left;}
h3 {clear: left;}

El resultado sería:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)

Posicionamiento

Puede especificar la posición de un elemento de cuatro formas especificando la propiedad position y uno de los siguientes valores.

Estas son propiedades avanzadas. Es posible utilizarlos de manera sencilla, por eso se mencionan en este tutorial básico. Pero puede ser difícil usarlos para diseños complejos.

relativo


  La posición del elemento se desplaza en relación con su posición normal. Utilícelo para desplazar un elemento por una cantidad especificada. A veces se puede utilizar el margen del elemento para lograr el mismo efecto.
fijo
    La posición del elemento es fija. Especifique la posición del elemento en relación con la ventana del documento. Incluso si el resto del documento se desplaza, el elemento permanece fijo.
absoluto
    La posición del elemento es fija con relación a un elemento padre. Sólo un padre que está posicionado con relativo, fijo o absoluto hará. Puede hacer que cualquier elemento padre sea adecuado especificando position: relative; Para ello sin especificar ningún cambio.
estático
    El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.

Junto con estos valores de la propiedad de posición (a excepción de estática), especifique una o más de las propiedades: superior, derecha, inferior, izquierda, anchura, altura para identificar dónde desea que aparezca el elemento y tal vez también su tamaño.

Ejemplo

Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:

<div id="parent-div">
  <p id="forward">/</p>
  <p id="back">\</p>
</div>

En su hoja de estilos, haga que la posición de los padres sea relativa. No hay necesidad de especificar ningún cambio real. Haga que la posición de los niños sea absoluta:

#parent-div {
  position: relative;
  font: bold 200% sans-serif;
}

#forward, #back {
  position: absolute;
  margin:0px; /* no hay margenes alrededor del elemento */
  top: 0px; /* distancia desde la parte superior */
  left: 0px; /* distancia desde la izquierda */
}

#forward {
  color: blue;
}

#back {
  color: red;
}

El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:

/

\

 

Más detalles

La historia completa sobre posicionamiento toma dos capítulos complejos en la Especificación CSS: Modelo de formato visual y detalles del modelo de formato Visual.

Si está diseñando hojas de estilo para trabajar en muchos navegadores, también debe tener en cuenta las diferencias en la forma en que los navegadores interpretan el estándar y quizás errores en versiones concretas de navegadores particulares.

Action: Specifying layout

  1. Cambie el documento de ejemplo, doc2. Html y hoja de estilo, style2. Css, utilizando los ejemplos anteriores en las secciones Estructura de documento y flotantes.
  2. En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.

Cambios

Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &lt;/ body&gt;.

<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">

Si no descargó el archivo de imagen anteriormente en este tutorial, descárguelo ahora y colóquelo en el mismo directorio que los demás archivos de ejemplo:

Image:Yellow-pin.png

Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.

Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.

Actualiza tu navegador y haz que la ventana sea pequeña. Compruebe que la imagen permanece en la parte superior derecha incluso cuando se desplaza el documento:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

 

Yellow map pin

 See a solution to this challenge.

What next?

Usted acaba de cubrir todos los temas en este tutorial básico de CSS. La siguiente página describe selectores más avanzados para reglas CSS y algunas maneras específicas en las que puede diseñar tablas.

Etiquetas y colaboradores del documento

 Última actualización por: lavilofam1,