Cómo y cuándo usar CSS, importante
¡Echemos un vistazo! Qué importa y cuándo usarlo. Úselo si se encuentra con una situación similar.
Descripción general en cascada
¡Antes de hacerlo bien! Antes de discutir el uso correcto de importante, primero sentemos las bases para esta sección. Smashing Magazine proporcionó anteriormente una explicación detallada de los pesos de CSS. Entonces, si desea saber más sobre la cascada de CSS y las relaciones de peso, lea este artículo.
Los pesos CSS se han traducido en W3cplus en los primeros días. Si tiene algunas dificultades para leer en inglés, puede leer la traducción "Algunas cosas que debe saber: pesos CSS".
-Desert
El siguiente esquema describe cómo un documento CSS decide asignar diferentes pesos a diferentes estilos. Un resumen general de las cascadas mencionadas en la especificación CSS:
Encuentre todas las declaraciones que actúan sobre elementos y atributos.
La aplicación de un estilo a un elemento depende del peso del estilo y del orden de las fuentes de estilo, como se muestra a continuación. Cuanto mayor sea el peso en la siguiente tabla, menor será el peso:
Declaración de agente de usuario (como el estilo predeterminado del navegador)
Declaración de usuario (como configurar o modificar la navegación del usuario a través del desarrollador herramientas de depuración) Opciones de servidor)
Declaración del desarrollador (Traducción: CSS al que se hace referencia en la página)
¡Úselo! Declaración importante del desarrollador
¡Uso! Aviso importante para el usuario
La aplicación de estilos depende de la situación específica y los selectores más específicos generalmente recibirán más peso que los selectores generales.
La aplicación de estilos depende del orden en que aparecen (es decir, los estilos posteriores anularán los estilos anteriores).
¡A partir de este esquema, es posible que ya lo entiendas! Cambiará la importancia de los pesos y el papel que desempeñan en la cascada. ¡Echemos un vistazo a continuación! Detalles más importantes.
Gramática y descripción
! Importante proporciona a los desarrolladores una forma de aumentar el peso del estilo. ¡Algo a tener en cuenta! Lo importante es una declaración de todo el estilo, incluidos los atributos y valores de los atributos de este estilo (gracias a Brad Czerniak por señalar la diferencia). ¡Aquí hay un ejemplo de código simple que lo ilustra claramente! ¡Qué importante es aplicar el estilo original:
#example{
font-size: 14px! Importante;
}
#Contenedor#Ejemplo{
tamaño de fuente: 10px;
}
En el ejemplo de código anterior, porque ! Nota importante: el tamaño de fuente del elemento con id "ejemplo" se establecerá en 14px.
¡Si no lo usas! Es importante destacar que el segundo bloque de código declarado por estilo es naturalmente más importante que el primero, por dos razones: el segundo bloque de código aparece más tarde en la hoja de estilo que el primero (es decir,
ocupa el segundo lugar); el segundo bloque de código tiene mayor peso (consta de dos id #contenedor
#ejemplo, más de un id, #ejemplo. Pero debido a que el primer bloque de código contiene ! importante, es más grande para el configuración del tamaño de fuente.
Vea cómo se calculan los pesos en los pesos y la herencia de CSS, de la siguiente manera:
——Traductor: David
¡Acerca de! :
¿Cuándo se introdujo por primera vez en CSS1? ¡Las reglas las declara el desarrollador! Los estilos importantes obtienen mayor peso en CSS2.
¡Si! Lo importante es utilizar un atributo de estilo abreviado, de modo que todas las subpropiedades representadas por este atributo de estilo abreviado se verán afectadas. Importante.
¡Palabras clave! Importante debe colocarse al final del estilo de línea, antes del punto y coma, de lo contrario no tendrá ningún efecto. (Pero el espacio antes del punto y coma no lo afectará).
Si por alguna razón especial, debe declarar dos propiedades idénticas en un bloque de código, ¡por favor! Es importante agregarlo después del primer atributo, porque al hacerlo le dará más peso al primer atributo en todos los navegadores excepto IE6 (este es un truco solo para IE6, pero no afectará su CSS).
¡Si usas palabras diferentes en IE6 e IE7! Importante (¡como! Hotdog), este estilo CSS aún tendrá más peso, pero otros navegadores lo ignorarán.
En cuanto al segundo punto, el traductor hizo los siguientes comentarios:
. mi {margen: 0! Importante;}
Eso equivale a
. e{
Margen superior: 0! Importante;
Margen derecho: 0! Importante;
Margen inferior: 0! Importante;
Margen izquierdo: 0! Importante;
}
——Traductor: David
¡Cuándo usarlo! Importante
Los pros y los contras de utilizar cualquier tecnología dependen de las circunstancias. ¡Aquí están mis pensamientos personales sobre cómo usarlo de manera efectiva! Algunos puntos importantes.
Nunca lo uses
¡No lo uses a menos que sea absolutamente necesario! Importante. ¡Si lo usas por pereza! Es importante destacar que si abusa de él para evitar la depuración rutinaria, usted (o quien desarrolle su proyecto más adelante) sufrirá mucho.
¡No abuses de él, sólo úsalo de vez en cuando! Lo importante es que pronto descubrirás que tu estilo es difícil de mantener. Como comentamos anteriormente, inicialmente, CSS producirá una secuencia normal de acciones basadas en cascada y pesos
. ¡Pero cuando lo usas! Importante altera el orden original, dando más peso a estilos que normalmente no deberían tener tanto peso.
¡Si nunca lo usas! Lo importante es que esto indica que realmente entiendes CSS y demuestra que has pensado detenidamente antes de escribir el código.
Como dice el viejo refrán, "Nunca digas 'nunca'", ¡así que hablemos de ello a continuación! Uso legítimo importante.
Ayuda a probar la accesibilidad.
Como se mencionó anteriormente, ¡los estilos de usuario pueden incluir! Las declaraciones importantes permiten a los usuarios agregar peso a estilos CSS específicos según sus necesidades específicas para ayudarlos a leer y acceder al contenido.
¡Usuarios con necesidades especiales pueden colocarlo! Es importante agregar a la impresión propiedades como el tamaño de fuente para ampliar la fuente o estilos relacionados con el color para mejorar el contraste de la página web.
La siguiente captura de pantalla de la página de inicio de Smashing Magazine muestra el efecto de superponer texto de tamaño normal con estilos definidos por el usuario con la ayuda de las herramientas de desarrollo de Firefox:
En este caso, Tamaño del texto cambia de tamaño con el tamaño de la ventana del navegador y no se utiliza en estilos. Es importante destacar que los estilos definidos por el usuario ignorarán los pesos y anularán los estilos del desarrollador. De esa manera
Sin embargo, si el desarrollador utiliza el tamaño del texto del cuerpo. Es importante destacar que incluso si el usuario define el estilo con un selector más específico, no puede anular esta configuración de tamaño de texto. Por lo tanto,
Incluso bajo la influencia del estilo del usuario, ¡incluso los propios desarrolladores abusan de él! Por si es importante, ¡este artículo lo contiene! Los estilos importantes resuelven problemas manteniendo el tamaño del texto.
Supervisión.
Solucionar temporalmente un problema urgente
Siempre habrá un momento en el que un cliente tenga un error de CSS en su sitio online y tendrás que solucionarlo rápidamente. En la mayoría de los casos deberías utilizar Firebug u otras herramientas de desarrollo.
Depura tu código CSS y eventualmente arréglalo.
Sin embargo, si este error ocurre en IE6 u otros navegadores que no proporcionan herramientas de depuración, es posible que deba hacerlo.
¡Utilízalo! Es importante realizar una solución rápida.
Cuando utilizas este método de corrección temporal para mantener el sitio web en línea (para que puedas conseguir clientes primero), te tomas el tiempo para corregir el error de una manera que no rompa la cascada y sea altamente fácil de mantener. Tampoco es demasiado tarde. ¡Cuando encuentre una solución mejor, podrá reemplazar las perdidas! parte importante, y el cliente no sabe nada al respecto.
Anula estilos con Firebug u otras herramientas de desarrollo.
Podemos usar Firebug o Chrome Dev Tools para ver los elementos de la página, y podemos hacerlo libremente sin afectar los estilos CSS reales.
Edición de estilo, prueba de efectos, depuración de errores, etc. La siguiente captura de pantalla muestra algunos de los estilos de Smashing Magazine que se ven en las herramientas de desarrollo de Chrome:
El cuadro rojo con estilos tachados en la imagen indica que han sido sobrescritos por estilos posteriores. Para que este estilo vuelva a funcionar, debe desactivar los siguientes estilos. También puedes aumentar el peso haciendo que el selector sea más específico, pero esto aumentará el peso de todo el bloque de código, que no es lo que queremos.
! Lo importante es que puedes agregarlo después del estilo de una sola línea para que el estilo anulado vuelva a funcionar. De esta manera, puedes depurar tu CSS sin tener que modificar mucho tu estilo real hasta que encuentres el problema.
¡La imagen de abajo tiene el mismo estilo agregado después de la imagen de arriba! Importante Es posible que hayas notado que el tachado anterior desapareció, ya que este estilo ahora tiene más peso que el estilo anterior que lo anuló:
Anulación de estilos en línea en contenido generado por el usuario
. Un problema desconcertante en el desarrollo de CSS es cuando encontramos estilos en línea en el contenido generado por el usuario, lo que ocurre principalmente en algunos sistemas CMS que usan WYSIWYG fckeditor.
Medio. En CSS en cascada, los estilos en línea anulan los estilos normales. Sin embargo, no queremos que los elementos que deberían ser manipulados por nuestros estilos CSS definidos sean cambiados por estilos en línea en el contenido generado por el usuario. ¡Disponible ahora
! ¡Es importante evitar este problema porque los desarrolladores ya han agregado uno! Los estilos importantes anulan los estilos en línea.
¡Puedes agregar estilos que solo surten efecto al imprimir! Importante, aunque no es necesario en todos los casos, ni tampoco recomendable, por los mismos motivos que comentábamos antes. Sin embargo, esto le permite anular estilos específicos sin tener que anular el selector.
El estilo de impresión es el estilo utilizado por la impresora al imprimir páginas web. Para obtener más información sobre estilos de impresión, lea este artículo.
——Traductor: David
Acerca de las páginas de blog diseñadas individualmente.
Si alguna vez has incursionado en el arte de diseñar una página de blog personal (muchos diseñadores se oponen al uso de “dirección de arte” en esta técnica, es cierto), como lo demuestra Heart Directed, podrás aviso Existe el requisito de que cada artículo personal tenga su propio estilo independiente, o es necesario utilizar estilos en línea. Puede utilizar el código proporcionado en este artículo para escribir su propio estilo para su página personal.
! Puede resultar útil en este momento tan importante. Para crear una página única dentro de su sitio, puede anular fácilmente los estilos predeterminados sin tener que preocuparse por los pesos CSS originales.