En el mundo del desarrollo web, existen algunos lenguajes de programación que son esenciales para crear páginas y aplicaciones efectivas. Uno de ellos es CSS, el cual se encarga de dar estilo y diseño a las diferentes secciones de un sitio web. En este artículo, vamos a hablar de las propiedades abreviadas de CSS, una forma rápida y eficiente de aplicar múltiples estilos a un mismo elemento. ¡No te pierdas esta guía completa que TIEngranaje tiene para ti!
A Propiedad abreviada de CSS es simplemente una propiedad de estilo CSS que combina múltiples propiedades en una sola. En lugar de tener más de una línea de CSS, puede usar una propiedad que permite múltiples valores para que pueda diseñar varias propiedades sin tener que definir cada propiedad individualmente. Esto hace que CSS sea más fácil de administrar. Otra razón para usar las propiedades abreviadas de CSS es ahorrar espacio, lo que permitirá que sus páginas web cargar más rápido.
Por ejemplo, si necesitabas estiliza tus fuentes y querías aplicar un font-size, line-height, font-weight, font-styley font-familynecesitaría tener al menos 5 líneas de CSS.
p {
font-size: 1.25em;
line-height: 1.5em;
font-weight: bolder;
font-style: italic;
font-family: "Times New Roman";
}Si usas el taquigrafía propiedad de fuente, puede reducir esto a una línea de CSS.
p {
font: bolder italic 1.25em/1.5em "Times New Roman";
}Propiedades abreviadas
Hay varios CSS taquigrafía propiedades.
border |
border-width border-style border-color; |
border-top |
border-top-width border-top-style border-top-color; |
border-right |
border-right-width border-right-style border-right-color; |
border-bottom |
border-bottom-width border-bottom-style border-bottom-color; |
border-left |
border-left-width border-left-style border-left-color; |
border-width |
border-top-width border-right-width border-bottom-width border-left-width; |
background |
background-color background-image background-repeat background-attachment background-position; |
font |
font: font-style font-variant font-weight font-size/line-height font-family; |
list-style |
list-style-type list-style-position list-style-image; |
margin |
margin-top margin-right margin-bottom margin-left; |
outline |
outline-color outline-style outline-width; |
padding |
padding-top padding-right padding-bottom padding-left; |
No se preocupe demasiado por los detalles de la propiedad enumerados en este artículo. Es más importante en este momento entender el concepto de taquigrafía para que pueda administrar su CSS de la manera más eficiente y efectiva posible.
