Es muy impotante diferenciar entre elementos de bloque y en linea. Con la propiedad DISPLAY se puede alterar esta características, sus valores son block|inline.
Define el ancho de un elemento tipo bloque. Valores posibles son: absoluto (px,em) | relativo (%) | auto, ademas de los valores globales initial | unset | inherit.
Valores posibles: absoluto (px|em) | relativo (%) | auto.
width: 150px; width: 100%; width: auto; width: 3px 10px; width: 3px 12px 4px 10px; width-top: 10px; width-right: 3px; width-bottom: 10px; width-left: 5px;
Al usar valores absolutos: 1em = 16px. Al usar valores relativos (%) es respecto al tamaño de letra del elemento padre.
Se aplica a todo los elementos tipo bloque: <h1>..<h6>, <p>, <div>, <li>, <form>, <header>, <footer> y <session>. Ademas a las etiquetas: <TD> e <IMG> a pesar que son inline.
auto hace que tome en tamaño justo del contenido interno.
Las propiedades min-width y max-width anulan la propiedad width.
Al usar valores absolutos: 1em = 16px. Al usar valores relativos (%) es respecto al tamaño de letra del elemento padre.
Define el valor mínimo, pero si contenido así lo exige se hace mas ancho.
Valores posibles: absoluto (px|em) | relativo (%) | auto.
min-width: 150px; min-width: 100%; min-width: auto; min-width: 3px 10px; min-width: 3px 12px 4px 10px; min-width-top: 10px; min-width-right: 3px; min-width-bottom: 10px; min-width-left: 5px;
Esta propiedades anulan la propiedad width.
Limita el ancho del elemento bloque.
Valores posibles: absoluto (px) | relativo (%) | auto.
max-width: 150px; max-width: 100%; max-width: auto; max-width: 3px 10px; max-width: 3px 12px 4px 10px; max-width-top: 10px; max-width-right: 3px; max-width-bottom: 10px; max-width-left: 5px;
Esta propiedades anulan la propiedad width.
Define el alto de un elemento tipo bloque. Valores posibles son: absoluto (px,em) | relativo (%) | auto, ademas de los valores globales initial | unset | inherit.
Valores posibles: absoluto (px) | relativo (%) | auto.
height: 100px; height: 33%; height: 10px 5px; height: 0 3px 10px 5px; height-top: 10px; height-right: 3px; height-bottom: 10px; height-left: 5px;
Las propiedades min-height y max-height anulan la propiedad height.
Define el valor mínimo, pero si contenido así lo exige se hace mas alto.
Valores posibles: absoluto (px) | relativo (%) | auto.
min-height: 100px; min-height: 33%; min-height: 10px 5px; min-height: 0 3px 10px 5px; min-height-top: 10px; min-height-right: 3px; min-height-bottom: 10px; min-height-left: 5px;
Esta propiedades anulan la propiedad height.
Limita el alto del elemento bloque.
Valores posibles: absoluto (px) | relativo (%) | auto.
max-height: 100px; max-height: 33%; max-height: 10px 5px; max-height: 0 3px 10px 5px; max-height-top: 10px; max-height-right: 3px; max-height-bottom: 10px; max-height-left: 5px;
Esta propiedades anulan la propiedad height.
Define todos los padding de una sola vez. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj. Valores posibles: absoluto (px) | relativo (%) | auto.
paddin: 5px; paddin: 2px 3px; padding: 3px 10px 4px 0; padding-top: 10px; padding-right: 5px; padding-bottm: 3px; padding-left: 7px;
Define todos los margen de una sola vez. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj.
Valores posibles: absoluto (px) | relativo (%) | auto.
margin: 10px; margin: 0 5px; margin: 5px 2px 3px 4px; margin-top: 10px: margin-right: 10px: margin-bottom: 10px: margin-left: 10px:
Define de una sola vez el ancho, estilo y color del borde. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj.
border: [grosor]; border: [grosor-horizontales] [grosor-verticales]; border: [grosor-top] [grosor-der] [grosor-abajo] [grosor-izquierda]; border: [grosor] [estilo] [color];
border: 1px; border: 0 5px: border: 2px 5px 1px 10px: border: 2px dotted; border: medium dashed green; border-top: 1px solid #C00; border-right: 1px solid #00F; border-bottom: 1px solid #00F; border-left: 1px solid #00F;
Define el ancho del borde. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj. Valores posibles: absoluto (px) | none.
border-Width: [grosor]; border-Width: [grosor-horizontales] [grosor-verticales]; border-Width: [grosor-top] [grosor-der] [grosor-abajo] [grosor-izquierda];
Valor | Descripción |
---|---|
thin | Delgado |
medium | Defecto. Medio |
thick | Grueso |
border-width: thin; border-width: 1px; border-width: 0 1px; border-width: 5px 3px 4px 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;
Define el estilo del borde. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj.
Border-Style: none | solid | double | dotted | groove | ridge | insert | outset | inherit.
Valor | Descripción |
---|---|
none | No se muestra ningún borde. Valor por omisión. |
hidden | No muestra ningún borde. |
dotted | Borde punteado, formado por una serie de puntos separados por espacios. |
dashed | Borde discontinuo, formado por una serie de pequeños trazos intercalados por espacios. |
solid | Borde continuo, formado por una línea recta continua. |
double | Borde doble, formado por dos líneas rectas continuas separadas entre sí por un espacio en blanco. |
groove | Borde hundido, que visualmente parece que se encuentra por debajo del nivel de la superficie de la pantalla |
ridge | Borde saliente, que visualmente parece que se encuentra por encima del nivel de la superficie de la pantalla |
insert | Borde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo del nivel de la superficie de la pantalla |
outset | Borde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima del nivel de la superficie de la pantalla |
inherit | Hereda. |
border-style: solid; border-style: dotted solid; border-style: dotted solid solid double; border-top-style: dotted; border-right-style: groove; border-bottom-style: none; border-left-style: solid;
Define el dolor del borde. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj.
Border-Color: nombre color | #hex | rgb() | hsl();
border-color: red; border-color: blue red; border-color: yellow grey red navy; border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red;
Para saber mas de colores y ver el juego completo de nombre de colores clic aqui.
Establece el redondeo de las equinas. Posibles valores: absoluto(px|em)
Border-Radius: radios; Border-Radius: radio-der radio-izq; Border-Radius: radio-der-sup radio-der-inf radio-izq-sup radio-izq-inf;
Border-Radius: 3px; Border-Radius: 15px 50px; Border-Radius: 3px 5px 2px 10px;
Permite especificar una imagen para usar como borde alrededor de un elemento.
border-image: URL [slice] [width] [outset] [repeat];
Parámetro | Descripción |
---|---|
border-image-source | especifica la ruta a la imagen que se usará como borde (en lugar del borde normal alrededor de un elemento). |
border-image-slice | especifica cómo cortar la imagen especificada por border-image-source. La imagen siempre se divide en nueve secciones: cuatro esquinas, cuatro bordes y el centro. |
border-image-width | especifica el ancho de la imagen del borde. |
border-image-outset | especifica la cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde. |
border-image-repeat | especifica si la imagen del borde debe repetirse, redondearse o estirarse. |
border-image: URL(image.jpg); border-image: URL(image.jpg) 20% round;
Define el grosor de los elementos bloque. Aunque es muy similar a border en su apariencia, su principal diferencia es que no ocupa espacio como border, se dibujan por encima del elemento y que pueden tener formas no rectangulares. Al igual que con border se pude definir grosor, estilo y color a la vez.
outline: [ancho] [estilo] [color];
Parámetro | Descripción |
---|---|
Outline-width | Ancho del contorno |
Outline-style | Estilo del esquema |
Outline-color | Color del contorno |
Outline-offset | agrega espacio entre un contorno y el borde del elemento. |
outline: 3px dotted navy;
<span style="outline:1px solid red;">Ejemplo de texto largo que ocupa varias líneas.</span>
Ejemplo de
texto largo que
ocupa varias
líneas.
El elemento se mueve hacia a un lado y el texto se ajustará a su lado. Posibles valores: none | left | right | inherit.
float: left | right | none;
La propiedad display es ignorada.
Esta propiedad especifica si un elemento permite elementos flotantes a sus lados. Posibles valores son: none | left | right | both | inherit.
clear: both;
Cuando haces un elemento flotantes este se sale de su elemento contenedor resultando en una visualización incorrecta. El motivo de este comportamiento es que un elemento posicionado de forma flotante ya no pertenece al flujo normal de la página HTML. La solución consiste en usar la propiedad overflow en el elemento contenedor. visible | hidden | scroll | auto | inherit
overflow: visible | hidden | scroll | auto | initial | inherit;
#pag { border: 1px solid #CCC; background-color: #E0E0E0; padding: .5em; overflow: hidden; } .der {float: right;} .izq {float: left; } //En HTML <p id=pag> <span class=izq>« Anterior</span> <span class=der>Siguiente »</span> </p>
Especifica si se debe recortar el contenido, agregar una barra de desplazamiento o mostrar el contenido de desbordamiento de un elemento a nivel de bloque, cuando se desborda en los bordes izquierdo y derecho.
overflow-x: visible | hidden | scroll | auto | initial | inherit;
Especifica si se debe recortar el contenido, agregar una barra de desplazamiento o mostrar el contenido de desbordamiento de un elemento a nivel de bloque, cuando se desborda en los bordes superior e inferior.
overflow-y: visible | hidden | scroll | auto | i nitial | inherit;
Esta propiedad adjunta una o más sombras a un elemento.
Valor | Descripción |
---|---|
box-shadow: none | h-offset v-offset blur spread color;
box-shadow: 5px 10px; box-shadow: 5px 10px #888888; box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
Para adjuntar más de una sombra a un elemento, agregue una lista de sombras separadas por comas.
Valor | Descripción |
---|---|
slice | Defecto. Las decoraciones de caja se aplican al elemento en su conjunto y se rompen en los bordes de los fragmentos del elemento. |
close | Las decoraciones de caja se aplican a cada fragmento del elemento como si los fragmentos fueran elementos individuales. Los bordes envuelven los cuatro bordes de cada fragmento del elemento y los fondos se vuelven a dibujar por completo para cada fragmento. |
span.ex1 { box-decoration-break: clone; -webkit-box-decoration-break: clone; -o-box-decoration-break: clone; } span.ex2 { box-decoration-break: slice; -webkit-box-decoration-break: slice; -o-box-decoration-break: slice; }
box-sizing: border-box;