CSS:atributos más comunes Border, anchos y altos - Parte 1 de ayuda y consejos para nuevos webmaster

Siguiendo con atributos comunes en CSS, hoy con bordes, anchos y altos.

Bordes

Estos son los atributos que podemos aplicar a los bordes, con sus respectivos valores:

{border-style:[none/dotted/dashed/solid/double/groove/ridge/inset/outset];} Donde none entrega un elemento sin borde; dotted, un borde formado por puntos; dashed, un borde formado por guiones; solid, un borde formado por una línea continua; double, borde de dos líneas contínuas; groove, ridge, inset y outset son distintos tipos de borde 3D.

{border-width: [ nºpx/thin/medium/thick ];} Donde podemos definir el ancho del borde en pixeles, o usando uno de los tres valores predefinidos. thin es el más delgado, thick es el más grueso y medium está entre los dos. Para que este atributo funcione, es necesario haber definido border-style también.


{border-color: [color];] Especificamos el color del borde, de la forma en que vimos en el tomo anterior.

Podemos especificar valores distintos para cada uno de los cuatro bordes de un elemento, especificando hasta 4 valores.

Usaremos:
border-top para el borde superior.

border-right para el borde derecho.

border-bottom para el borde inferior.

border-left para el borde izquierdo.

Si especificamos 4 valores: border-style: [top] [right] [bottom] [left]; 
Ej: border-style: solid dotted dashed double; que dará por resultado:
borde superior solid
borde derecho dotted
borde inferior dashed
borde izquierdo double

Si especificamos 3 valores:
border-style: [top] [right/left] [bottom];
ej: border-style: solid double dotted; entregará por resultado:
borde superior solid
borde derecho e izquierdo double
borde inferior dotted


Si especificamos 2 valores:
border-style: [top/bottom] [right/left];
ej: border-style: solid dashed; obtendremos por resultado:
borde superior e inferior solid
borde izquierdo y derecho dashed

Además, podemos especificar valores distintos para cada border de la siguiente manera:

border-[top/right/bottom/left]-style: [valores];
ej: border-top-style: solid;
  border-right-style: dashed;


LAS CARACTERÍSTICAS ANTERIORES SIRVEN CON TAMBIÉN CON border-color Y border-width.

Podemos usar la forma abreviada para los bordes, si especificamos valores en el siguiente orden:

border: [width] [style] [color];
ej: border: 2px solid #FF0000;
Anchos y altos


Esto es más simple de entender, usamos width para el ancho y hight para el alto:
p {
width: [ auto / nºpx / % / inherit ];
hight: [ auto / nºpx / % / inherit ];
}


Donde auto ajustará el ancho de acuerdo al contenido; nºpx indica que podemos especificarlo en pixeles u otra medida; % indica que podemos indicarlo en porcentaje respecto al elemento padre; e inherit provoca que se herede el ancho del elemento padre.

Ejemplo:

p {

width: 100px;

height: 100px;

}

No es necesario especificar ambas propiedades, y éstas se aplican a prácticamente cualquier elemento.

Si te lo perdiste, mira la parte anterior