Alineacion Elementos CCS

7/18/2019 Alineacion Elementos CCS

http://slidepdf.com/reader/full/alineacion-elementos-ccs 1/17

Alineación de elementos

con

Hojas de Estilo (CSS)

Ing. Marlene Melián Montalvo

División de Servicios Web. CITMATEL



Aspectos a tratar:

• ¿Qué es CSS?

• Razones para usar CSS

• Problemas en el uso de CSS

• Elementos en HTML y en CSS

• Márgenes cerrados

• Columnas líquidas. Expansión vertical



¿Quées CSS?

CSS (Cascading Style Sheets, u Hojas de

Estilo en Cascada) es la tecnología

desarrollada por el World Wide Web

Consortium (W3C) con el fin de separar la

estructura de la presentación.

Hoy en día es casi imposible diseñar un

sitio sin el empleo de las CSS debido a

las múltiples ventajas que el uso de las

mismas representa.



Razones para usar CSS

• Separación del contenid o y la presentación

• Flexibilidad

• Dis eño úni co para las páginas del s it io

• Limp ieza del código fuente

• La compat ib i lidad y cont inuidad • Estandarización frente a especif ic aciones

pro pietarias, etc.



Prob lemas en el uso de CSS

- Las alineaciones con o sin posicionamiento

- El uso columnas líquidas que no son más que

la expansión de una columna hasta ocupar la

totalidad del espacio deseado, independiente

del tamaño del contenido de la misma.



Elementos en HTML

y en CSS

Hay dos tipos de elementos en HTML:

- Los elementos de bloque

- Los elementos en línea

Los elementos a nivel de bloqu e sonmo strado s con u n salto de línea antes y

después, mien tras q ue los elemen tos en línea

son mos trados en el lugar que aparecen en el

f lu jo d el texto

Document type definition: DTD

Elementos de bloque Elementos en línea



Elementos en HTML

y en CSS

Los elementos de bloque son aquellos quehabitualmente, pero no siempre contienen otros

Elementos. Normalmente pueden funcionar como

contenedores.

Los que sólo pueden contener otros elementos de bloque.

Body (en DTD estrechos).

Tipos de elementos de bloque

Los que pueden contener texto y elementos en línea

P (párrafo).

Pueden contener otros elementosen bloque así como elementos

en línea DIV y LI.

Elementos en línea

Generalmente sólo pueden contener texto y otr s elementos en línea.o



Los térm inos de b lo que y en línea tam b ién

existen en CSS, donde son usados paradist ing uir entre dos t ipos di ferentes de cajas,

los rectángulos invis ibles q ue c rean la

pres entac ión de una págin a.

Generalmente los elementos de blo que en

HTML generan cajas de blo que, mientras que

los elementos en línea gen eran cajas en línea.

HTML

Elementos de bloque

Elementos de línea

generan

generan

Cajas de bloque

Cajas de línea

CSS

Propiedaddisplay

Controlador

de presentación, no de contenido

Flujo normal del documento



Para un elemento flotante o posicionado

absolutamente, la propiedad display generalmente

se ignora, con excepción de cuando usamos

display:none

Valores de la propiedad display

block

list-item

table

run-in (a veces)

Cajas de bloque



Caja de bloque principal

contiene

Elementos de bloqueElementos en línea

generan

Cajas de bloque

anónimas

Una caja de bloque principal se convierte

en el bloque de contención para sus

bloques descendientes, asumiendo que

estén posicionados estática orelativamente. Para las cajas flotantes y

posicionadas absolutamente, se aplican

otras reglas.



Elemento de bloque o Valores prop. display generadora de bloque

generan

Caja de bloque principal

Contiene sólocajas de bloque

Contiene sólocajas en línea

o



Márgenes cerrados

La distancia vertical entre dos cajas hermanasen un contexto de formato de bloque se

controla con las propiedades margin- top y

margin-bot tom.

La distancia vert ical entre dos cajas de b loque

adyacentes en un contexto de form ato de

bloqu e puede cerrarse, lo que sig ni f ica que se

comb inarán en u n únic o m argen b ajo c iertas

circunstancias.

Lo s márgenes se cierr an únic amen te cuando

están en c ontac to d irecto u no co n o tro. Si

ex is te un padding o un borde ent re el los, nose cierran.



La propiedad text-align se especifica para la caja debloque contenedora

La propiedad vertical-align se especifica para cajas

en línea.

Permite cualquier tipo de alineación vertical, pero no

está pensado para ser el equivalente a la propiedad

"valign" de HTML en celdas.

Alineación izquierda

Alineación derecha

Alineación centrada



Columnas líquidas. Expansión vertical

Una de las propiedades frustrantes de las CSS está

determinada por el hecho de que los elementos se

expanden verticalmente sólo lo que ellos necesitan.

Ejemplo:

Si se cuenta con una imagen que su altura es de

200px y la misma está contenida dentro de un <div>,

este <div> sólo va a extenderse hacia abajo 200px.



¿Cómo solucionar entonces el problema que vemos

en la siguiente figura?

Columna1

Columna2

Columna3

Cortar

imágende altura

1 pixel

Necesitamos obtener

Columna1 Columna2 Columna3



Contenedor

1 pixel

Propiedades:

background-image: url(...)background-repeat: repeat-y

Con este truco obtenemos la impresión deseada.



Direcciones en Internet donde se puede encontrar

información sobre el tema tratado:

http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#comparison

http://www.useme.cl/layouts/

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

http://www.positioniseverything.net/articles/onetruelayout/examples









Alineacion Elementos CCS

Documents

Transcript of Alineacion Elementos CCS