Codificación aprenderaprogramar.com: CU01027D
SHORTHAND NOTATION O NOTACIÓN ABREVIADA CSS
Con bastante frecuencia tendremos propiedades CSS donde es posible definir un valor global, como un borde único, o bien hasta cuatro valores específicos para el lado superior (top), derecho (right), inferior (bottom) o izquierdo (left). Para facilitar la escritura de código CSS permite el uso de diferentes formas abreviadas.
La forma abreviada (en inglés “shorthand notation”) básica para diferentes propiedades que usan los cuatro lados de las cajas CSS se basa en usar esta sintaxis: selectorElemento {nombrePropiedad: valorTop valorRight valorBottom valorLeft; }
Por ejemplo la forma abreviada img {border-style: solid dashed dotted double; } es equivalente a escribir de forma extendida img {border-top-style: solid; border-right-style: dashed; border-bottom-style: dotted; border-left-style: double; }. Tener en cuenta que en la forma abreviada los valores van separados simplemente con un espacio. En ambos casos el resultado sería similar al que vemos en la siguiente imagen.
Como se puede comprobar, usar la forma abreviada nos permite ahorrar en extensión de código que es necesario teclear y por tanto nos permite ahorrar tiempo cuando estemos escribiendo código CSS. Además, cuando los archivos CSS son muy extensos, usar la forma abreviada puede redundar en que nuestros archivos sean más ligeros y se carguen más rápidamente.
La notación abreviada o shorthand notation se usa para muchas propiedades para establecer márgenes, rellenos, etc. por lo que nos la encontraremos repetidamente cuando trabajemos con CSS. Hay una cosa que debemos memorizar: el orden en que se escriben los valores y su correspondencia con los cuatro lados de la caja. Para ello podemos usar esta regla mnemotécnica: el día comienza a las 12:00 y el primer lado es TOP, las agujas del reloj avanzan hacia la derecha y el segundo lado el RIGHT. Las agujas siguen avanzando y el tercer lado es BOTTOM. El reloj sigue avanzando y el cuarto lado es LEFT. De ahí que cuando vemos una expresión de tipo img {border-style: solid dashed dotted double; } debamos pensar en solid --> TOP, dashed --> RIGHT, dotted --> BOTTOM, double --> LEFT.
Pero se pueden usar formas abreviadas de otras maneras, usando en vez de cuatro valores menos valores. En la siguiente tabla vemos el significado de las expresiones según el número de valores que usemos:
| Valores empleados | Ejemplo | Significado |
| 1 | img {border-style: dotted; } | Los cuatro lados de la caja se muestran con el valor indicado. |
| 2 | img {border-style: dotted solid; } | El primer valor se aplica a TOP y BOTTOM y el segundo valor se asigna a RIGHT y LEFT |
| 3 | img {border-style: dotted solid dashed; } | El primer valor se aplica a TOP, el segundo a RIGHT y LEFT y el tercero a BOTTOM |
| 4 | img {border-style: dotted solid dashed double;} | El primer valor se aplica a TOP, el segundo a RIGHT, el tercero a BOTTOM y el cuarto a LEFT |
Hay más formas de notaciones abreviadas en CSS como veremos más adelante. Algunos navegadores, en especial los más antiguos, podrían no reconocer las expresiones abreviadas, aunque prácticamente todos los navegadores actuales sí las reconocen.
PROPIEDAD CSS BORDER-WIDTH
Vistos ya los diferentes tipos de bordes que podemos aplicar con CSS, un aspecto importante será definir su grosor. Esto se hace con la propiedad border-width.
| PROPIEDAD CSS border-width | |
| Función de la propiedad | Define el grosor de borde que se aplica a un elemento. |
| Valor por defecto | medium (grosor por defecto medio) |
| Aplicable a | Todos los elementos |
| ¿Se hereda directamente? | No |
| Valores posibles para esta propiedad | Una unidad de medida absoluta o relativa admitida y aplicable (en general cualquier unidad excepto porcentaje será válida) |
| thin (fino) | |
| medium (medio) | |
| thick (grueso) | |
| inherit (heredado del elemento padre) | |
| Ejemplos aprenderaprogramar.com | img {border-style: solid; border-width: 15px;} .imgVentana {border-style: inset; border-width:1.25em;} |
El grosor exacto en el caso de usar thin, medium y thick depende del navegador que estemos utilizando, de ahí que normalmente los diseñadores prefieran especificar el tamaño de los bordes con valores como pixeles o em, que les permiten un mayor control.
Recordar que para que el borde sea visible debemos establecer border-style, ya que sin esta propiedad establecida la aplicación de border-width no generará ningún resultado.
La propiedad border-width puede especificarse usando la shorthand notation como hemos explicado anteriormente. Por ejemplo {border-width:0.25em 0.85em 0.45em;} establece el borde superior en 0.25em, los bordes laterales izquierdo y derecho en 0.85em y el borde inferior en 0.45em.
La propiedad border-width se puede aplicar a todo el borde del elemento, o bien a cualquiera de los cuatro bordes en que se puede subdividir un borde. De esta manera se generan cuatro propiedades cuyo funcionamiento es análogo al de border-widht, pero que permiten dar un tratamiento diferenciado a cada uno de los bordes: border-top-width, border-right-width, border-bottom-width y border-left-width. La sintaxis a utilizar y la forma de funcionamiento es la misma que hemos explicado anteriormente para border-style.
PROPIEDAD CSS BORDER-COLOR
La propiedad border-color nos permite aplicar colores de borde.
| PROPIEDAD CSS border-color | |
| Función de la propiedad | Define el color de borde que se aplica a un elemento. |
| Valor por defecto | Será el valor que tenga la propiedad color para el elemento, establecida en el código o la que tenga el elemento por defecto. |
| Aplicable a | Todos los elementos |
| ¿Se hereda directamente? | No |
| Valores posibles para esta propiedad | Un color establecido de cualquiera de las maneras válidas en CSS |
| transparent (el borde existe pero es transparente) | |
| inherit (heredado del elemento padre) | |
| Ejemplos aprenderaprogramar.com | img {border-style: solid; border-width: 15px; border-color: cyan} .imgVentana {border-style: solid dotted; border-width:0.35em; border-color: red blue;} |
El valor transparent nos permite generar la apariencia de que existe un borde pero este no será visible por ser transparente.
Recordar que para que el borde sea visible debemos establecer border-style, ya que sin esta propiedad establecida la aplicación de border-color no generará ningún resultado.
La propiedad border-color puede especificarse usando la shorthand notation como hemos explicado anteriormente. Por ejemplo {border-color:#ff0000 rgb(0,255,0) blue rgba(0,255,0,0.33);} establece los bordes de distintos colores siguiendo el orden top – right – bottom – left.
La propiedad border-color se puede aplicar a todo el borde del elemento, o bien a cualquiera de los cuatro bordes en que se puede subdividir un borde. De esta manera se generan cuatro propiedades cuyo funcionamiento es análogo al de border-widht, pero que permiten dar un tratamiento diferenciado a cada uno de los bordes: border-top-color, border-right-color, border-bottom-color y border-left-color. La sintaxis a utilizar y la forma de funcionamiento es la misma que hemos explicado anteriormente para border-style.
PROPIEDAD CSS BORDER
Hasta ahora hemos visto que para establecer un borde habíamos de definir al menos la propiedad border-style, y si queríamos especificar el grosor y el color adicionalmente teníamos que definir border-width y border-color.
Hay una propiedad que permite expresar las tres propiedades básicas de un borde de forma abreviada: la propiedad border. La sintaxis a emplear es:
| border { valorBorderWidth valorBorderStyle valorBorderColor; } |
| PROPIEDAD CSS border | |
| Función de la propiedad | Permite definir grosor, estilo y color de borde. |
| Valor por defecto | Los de las distintas sub-propiedades de que consta. |
| Aplicable a | Todos los elementos |
| ¿Se hereda directamente? | No |
| Valores posibles para esta propiedad | Un valor (establecerá border-style) |
| Dos valores (establecerá border-style y grosor o color) | |
| Tres valores (establecerá border-width, border-style y border-color) | |
| inherit (heredado del elemento padre) | |
| Ejemplos aprenderaprogramar.com | img {border: 15px solid #FFAA33; } .imgVentana { border: dotted;} |
Nota: en general los navegadores permiten que las subpropiedades de border se expresen en cualquier orden, es decir, dará igual escribir img {border: 15px solid #FFAA33; } que img {border: solid #FFAA33 15px;}. El navegador interpretará en cada caso qué es el estilo, qué es el grosor y qué es el color.
La propiedad admite hasta tres valores (anchura, estilo y color) de los cuales es obligatorio el estilo y opcionales los otros dos.
| Valores empleados | Ejemplo | Significado |
| 1 | img {border: dotted; } | Los cuatro lados de la caja se muestran con el estilo indicado. Grosor y color serán los de defecto. |
| 2 | img {border: 20px solid; } img {border: solid red; } | Se aplica el estilo indicado y el grosor ó color indicado. Lo no especificado será por defecto. |
| 3 | img {border: 15px solid #FFAA33; } | Se aplica el grosor, estilo y color indicados. |
Este tipo de propiedades como border que permiten abreviar diferentes propiedades se denominan “shorthand properties” o propiedades abreviadas.
La propiedad border se puede aplicar a cualquiera de los cuatro bordes en que se puede subdividir un borde. De esta manera se generan cuatro propiedades cuyo funcionamiento es análogo al de border, pero que permiten dar un tratamiento diferenciado a cada uno de los bordes: border-top, border-right, border-bottom y border-left. La sintaxis a utilizar y la forma de funcionamiento para estas propiedades son las que ya conocemos.
El siguiente esquema resume las propiedades de borde CSS:
EJERCICIO 1
Crea un documento HTML con 2 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde escribiendo de forma individual cada una de las siguientes propiedades CSS:
a) Para el div 1: la parte superior con borde de puntos redondeados, grosor 10 píxeles y color verde. La parte derecha con borde de trazos o segmentos rectangulares, grosor 20 píxeles y color azul. La parte inferior con borde de línea doble, grosor 10 píxeles y color #A52A2A. La parte izquierda con borde con efecto groove, grosor 30 píxeles y color #2F4F4F.
b) Para el div 2: la parte superior con borde con efecto inset, grosor 30 píxeles y color #B22222. La parte derecha con borde sólido, grosor 22 píxeles y color #DAA520. La parte inferior con borde de línea doble, grosor 25 píxeles y color #4B0082. La parte izquierda con borde de puntos redondeados, grosor 17 píxeles y color #808000.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
EJERCICIO 2
Crea un documento HTML con el mismo aspecto y propiedades CSS que las descritas para el ejercicio 1, pero en este caso usando la notación shorthand de bordes CSS y la propiedad border abreviada. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
