Una de las formas más efectivas de escribir CSS es utilizar abreviaturas. El uso de abreviaturas puede hacer que sus archivos CSS sean más pequeños y más legibles. Comprender las abreviaturas de las propiedades CSS también es una de las habilidades básicas de los ingenieros de desarrollo front-end. Hoy resumimos sistemáticamente las abreviaturas de las propiedades CSS.
abreviatura de color
La abreviatura de color es la más simple. Cuando el valor del color está en hexadecimal, si el valor de cada color es el mismo, se puede escribir como:
| color: #113366 |
se puede abreviar como
| color: #136 |
Las abreviaturas se pueden utilizar siempre que se utilicen valores de color hexadecimales, como color de fondo, color de borde, sombra de texto, sombra de cuadro, etc.
tamaño de la caja
Aquí se utilizan principalmente dos atributos: margen y relleno. Tomamos el margen como ejemplo y el relleno es el mismo. El cuadro tiene cuatro direcciones, arriba, abajo, izquierda y derecha, y cada dirección tiene un margen:
| margen superior: 1px; margen derecho: 1px; margen inferior: 1px; margen izquierdo: 1px; |
Estos cuatro valores se pueden abreviar juntos:
| margen:1px 1px 1px 1px; |
El orden de las abreviaturas es arriba->derecha->abajo->izquierda. Dirección en el sentido de las agujas del reloj. Si los lados opuestos tienen el mismo valor, se pueden omitir:
| margin:1px;// Los márgenes en las cuatro direcciones son iguales, lo que equivale a margin:1px 1px 1px 1px; margin:1px 2px;// Los márgenes superior e inferior son ambos de 1px, y los márgenes izquierdo y derecho son ambos de 2px, lo que equivale a margin:1px 2px 1px 2px margin:1px 2px 3px;//El margen derecho y el margen izquierdo son iguales, lo que equivale a margin:1px 2px 3px 2px; margin:1px 2px 1px 3px;//Tenga en cuenta que aunque los márgenes superior e inferior aquí son ambos de 1px, aquí no se pueden utilizar abreviaturas. |
borde
El borde es un atributo relativamente flexible. Tiene tres subatributos: ancho de borde, estilo de borde y color de borde.
| ancho de borde: número + unidad; estilo de borde: ninguno || oculto || punteado || doble ranura || inicio color del borde: color; |
Se puede abreviar en orden de ancho, estilo y color:
| borde: 5px sólido #369; |
A veces, el borde se puede escribir de forma más sencilla y se pueden omitir algunos valores, pero preste atención a cuáles son necesarios. También puede probarlo:
| border:groove red; // ¿Adivina cuál es el ancho de este borde? border:solid; //¿Cómo se vería esto? borde:5px; //¿Está bien? borde:5px rojo; //¿Está bien? ? borde:rojo; //¿Está bien? ? ? |
Como puede ver en el código anterior, el ancho predeterminado del borde es 3px y el color predeterminado es negro: negro. En la abreviatura de borde, se requiere estilo de borde.
También puedes utilizar abreviaturas para cada borde:
| borde superior: 4px sólido #333; borde derecho: 3px sólido #666; borde inferior: 3px sólido #666; borde izquierdo: 4px sólido #333; |
También puedes utilizar abreviaturas para cada atributo:
| ancho de borde: 1px 2px 3px; // Se pueden usar hasta cuatro valores, las reglas de abreviatura son similares a la abreviatura del tamaño del cuadro, las mismas a continuación estilo de borde: ranura de puntos sólidos y discontinuos; color del borde: rojo azul blanco negro; |
describir
El contorno es similar al borde. La diferencia es que el borde afectará al modelo de caja, pero el contorno no.
| ancho del contorno: número + unidad; estilo de contorno: ninguno || discontinuo || punteado || doble || inserción || color-contorno: color; |
Puede abreviarse como:
| contorno: 1px rojo sólido; |
De manera similar, en la abreviatura de contorno, también se requiere el estilo de contorno y los otros dos valores son opcionales. El valor predeterminado es el mismo que el de borde.
fondo
Fondo es una de las abreviaturas más utilizadas y contiene las siguientes propiedades:
| color de fondo: color || #hex || RGB(% || 0-255) || imagen de fondo:url(); repetición de fondo: repetir || repetir-x || repetir-y || posición de fondo: XY || (arriba||abajo||centro) (izquierda||derecha||centro); archivo adjunto de fondo: desplazamiento || arreglado; |
La abreviatura de fondo puede mejorar enormemente la eficiencia de CSS:
| fondo:#fff url(img.png) sin repetición 0 0; |
La abreviatura de fondo también tiene algunos valores predeterminados:
| fondo:transparente ninguno repetir desplazamiento arriba a la izquierda; |
Los valores de las propiedades de fondo no se heredan. Puedes declarar solo uno de ellos y el valor predeterminado se aplicará a los demás valores.
fuente
La abreviatura de fuente también es la más utilizada y también es una de las formas de escribir CSS eficiente.
La fuente contiene las siguientes propiedades:
| estilo de fuente: normal || cursiva || oblicua; variante de fuente: normal || versalitas; peso de fuente: normal || negrita || más negrita || más claro || tamaño de fuente: (número+unidad) || (xx-pequeño - xx-grande); altura de línea: normal || (número+unidad); font-family:nombre,"más nombres"; |
Cada atributo de fuente también tiene un valor predeterminado. Es relativamente importante recordar estos valores predeterminados:
| estilo de fuente: normal; variante de fuente: normal; peso de fuente: normal; tamaño de fuente: heredar; altura de línea: normal; familia de fuentes: heredar; |
De hecho, la abreviatura de fuente es la que requiere mayor precaución entre estas abreviaturas. Una leve negligencia puede provocar algunas consecuencias inesperadas. Por lo tanto, muchas personas no están de acuerdo con el uso de la abreviatura de fuente.
Pero aquí tienes un pequeño manual que creo que te ayudará a comprender mejor la abreviatura de fuente:
estilo de lista
Quizás el atributo de listas más utilizado sea:
| estilo de lista: ninguno |
Borra todos los estilos de lista predeterminados, como números o puntos.
El estilo de lista también tiene tres atributos:
| tipo de estilo de lista: ninguno || disco || círculo || romano superior || posición-estilo-lista: dentro || fuera || imagen-estilo-lista: (url) || ninguno || heredar |
Los atributos predeterminados del estilo de lista son los siguientes:
| estilo de lista: disco fuera de ninguno |
Cabe señalar que si una imagen se define en estilo de lista, la prioridad de la imagen es mayor que la del tipo de estilo de lista, por ejemplo:
| estilo de lista: círculo dentro de la URL (../img.gif) |
En este ejemplo, si existe img.gif, el símbolo de círculo configurado anteriormente no se mostrará.
PD: De hecho, list-style-type tiene muchos estilos útiles. Los estudiantes interesados pueden consultar: https://developer.mozilla.org/en/CSS/list-style-type.
radio de borde (radio de esquina)
Border-radius es un atributo recién agregado en CSS3, que se utiliza para implementar bordes redondeados. La desventaja actual de este atributo es que cada navegador lo admite de manera diferente. IE aún no lo admite. Gecko (firefox) y webkit (safari/chrome) necesitan usar los prefijos privados -moz- y -webkit- respectivamente. Lo que es aún más confuso es que si el atributo border-radius de una sola esquina se escribe de manera más diferente entre los dos navegadores, tendrá que escribir una gran cantidad de atributos privados:
| -moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-inferior-izquierdo-radio:6px; -webkit-border-arriba-izquierda-radio:6px; -webkit-border-arriba-derecha-radio:6px; borde-inferior-izquierdo-radio:6px; borde-arriba-izquierdo-radio:6px; borde-arriba-derecha-radio:6px; |
¿Ya estás deslumbrado? Esto es solo para lograr la situación en la que la esquina superior izquierda no está redondeada y las otras tres esquinas sí están redondeadas. Entonces, para el radio fronterizo, Shenfei recomienda encarecidamente utilizar la abreviatura:
| -moz-border-radius:0 6px 6px; -webkit-border-radius:0 6px 6px; radio de borde: 0 6px 6px; |
Esto es mucho más sencillo. PD: Lamentablemente, la última versión de Safari (4.0.5) aún no admite esta abreviatura... (gracias @fireyy)
Eso es todo. ¿Hay otros atributos que puedan abreviarse? Todos son bienvenidos a discutirlo juntos.