Después de haber simplificado las etiquetas margin y padding de nuestro css, hoy vamos aprender a simplificar la etiqueta «border«.
Muchas veces nos encontramos la etiqueta borde de nuestro CSS de la siguiente forma:
#div {
border-width: 1px;
border-style: solid;
border-color: #666666;
}
o así:
#div {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #666666;
}
Cuando la forma simplificada y también correcta, sería así,
#div {
border:1px solid #666;
}
y así, respectivamente.
#div {
border-right:2px solid #666;
}
Veis que fácil ha sido reducir tres lineas en una, pues imaginaos esto a lo largo de todo nuestro «style.css», las lineas que ahorraremos, y lo limpio que veremos el código cuando tengamos que buscar algo.
La etiqueta «border» consta de tres parámetros:
- width(anchura): thin, thick, medium o un valor en px.
- style(estilo): solid, dashed, dotted, double.
- color: nombre, hex, rgb o 0-255.
#div {
border-width: 5px;
border-style: dotted;
border-color: blue;
}
#div {
border:5px dotted blue;
}
Con estas reglas aplicamos el diseño a los 4 bordes, pero también podemos aplicarlo uno a uno definiendo el borde que queremos.
#div {
border-top: 2px dotted blue;
border-right: 1px solid red;
border-bottom: 3px double yellow;
border-left: 2px dashed black;
}
Al igual que con el margin y el padding los valores del border también se pueden agrupar en arriba/abajo y derecha/izquierda si estos valores son iguales:
#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}
#div {
border-width:3px 2px;
}
Pues bueno con esto y vuestra imaginación, ya podéis hacer todo los tipos de bordes que queráis 😉
Hola, me estás siendo de gran ayuda con esto del css pero tengo una duda, en mi blog http://www.diariodepensador.es me sale un recuadro en cada imagen con link, no soy capaz de eliminarlo y me imagino que será algo de css, como veo que dominas el lenguaje, ¿me podrías echar una mano?, gracias
Prueba a poner en tu style.css esto:
Gracias por tu pronta respuesta, el caso es que me aparecen 2 .entry img
.entry img {
overflow: hidden;
}
——
.entry img {
margin: 5px;
padding: 5px;
}
——
Lo he puesto en el 1º sustituyendo lo que traia y nada
Puedes juntar los 2, y fíjate que lo que yo te he puesto, no es lo mismo, te falta una «a».
Ok, perdona si soy muy pesado pero es q estoy empezando y aún no domino nada.
He cambiado el de origen por el que me pones, incluida la a y no me hace nada
Ey ahora que estoy depurando mi Theme estas clases me vienen de lujo, en cuanto tenga otra vez tiempo me pongo a optimizar mi style 😉
Muy buena explicacion