Especificidad y Orden de Declaración en CSS
Contenido del curso
Eleazar Carreón Álvarez
Aaron Joel Limachi Quispe
Joel Dominguez Merino
Jossie Steeven Quintero Giron
Sergio Brandon De Lucio Chavero
Camila Andrea Díaz Serrano
Yeisson Stik Gutierrez Rivera
María José Ledesma
Yeisson Stik Gutierrez Rivera
Yeisson Stik Gutierrez Rivera
mandy .
Uriel Alfonso Velandia Donado
Alvaro Ruiz
Joel Dominguez Merino
Andrés Corral
Marianna Guedez
Mave Fers
Andrea Alejandra Martínez Garnica
Héctor Alonso Padilla Ramírez
Juan Diego Bolaños Peña
Carlos Muñoz
Carlos Eduardo Gomez García
Usuario anónimo
User
Juliana Vega
Diego Alejandro Moreno Pedroza
Geovanny Amesty
Javier Curto Brull
Christian Velázquez
Juan Diego Carranza Vega
Stalin Badillo
Lucas Cabrera
Jossie Steeven Quintero Giron
Lucas Cabrera
Manuel Alejandro Garcia Salazar
Iván Arcos
Jose Luis Grande Acevedo
José Valente Damaso
Carlos Ramos
Jean Paul Yepes
Didier Irias
Jesús Enrique García
Jesús alfaro
Visual Studio también te ayuda en esto. Solo tienes que poner el mouse por encima del selector y te dará la especificad
Gracias.
Gracias por el dato!
xd tomaste el curso de creación de memes?
jaja que buen meme
Acá un ejemplo!
Muy buen ejemplo majo, gracias por tu aporte.
qué manía tienes de repetir las cosas!!!
Gracias por repostear el recurso
Esta pág. me es muy útil pues coloco mi código CSS y puedo monitorear su especificidad, es muy curiosa. Generador gráfico de especificidad CSS nota: tocar la pantalla para refrescar.
wowo lo probare! muchas gracias por el aporte :D
Me gustó esta herramienta
++CASCADAS++ La cascada se usa cuando hay dos o mas declaraciones que afectan a un elemento, es decir, cuando hay mas de dos reclas que afectan a una etiqueta html, cuando esto ocurre la cascada determinara cual de estas es tiene mayor importancia, y la de mayor importancia sera la que se aplicara. L forma de calcular el peso de una regla no se hace de forma arbitraria, se calculan en base a 3 criterios:
1.- Importancia -----> Las declaraciones importantes son las declaraciones que van seguidas de una directiva llamada: !important. Cualquier otra declaracion sin !important son consideradas declaraciones normales.
2.- Especificidad -----> La regla dice que el selector mas especifico sera el que se tome en cuenta. La forma para calcular la especificidad de un selector se hace con la siguiente formula.
se juntan todos los bloques obtenidos, a mayor numero mayor especificidad, y sera tomado en cuente la regla con mayor especificidad.
3.-Orden ------> Podemos definir los estilos en hojas externas, en la cabecera de la pagina y en la misma etiqueta (estilos en linea), el navegador lee el contenido de una pagina de arriba hacia bajo y los ultimos estilos definidos seran los que se tomaran en cuenta.
Gracias por tu comentario!! No me había quedado muy en claro el tema de "Orden de las fuentes", pero ya logré entender. Gracias!
Muchas gracias por tu aporte! Le entendí mejor n.n, muchas gracias!
Especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.
Primer grupo (derecha a izquierda)
Fuente Entendiendo la especificidad de CSS
¡Muchas Gracias! Me quedó más claro gracias a esto. Estaba confundido con lo de "inline"
Gracias por tu aporte. Me queda ahora muchísimo más claro.
Entender especificidad es entender CSS, prácticamente puedes tomarlo como que, mientras más espécífico sea, mayor importancia le dará CSS, y todos los estilos que tu coloques debajo de otros serán reemplazados en dado caso de que tengan la misma especificidad.
Esto es importante, porque por ejemplo, si tu quisieras reemplazar las clases de algún framework podrías hacerlo simplemente colocandop tus estilos DESPUÉS de mandar a llamar al Framework ^^
Me gusta mucho este, gracias!
Super entendible!!!
Orden de declaración en .css
Importancia.
Hoja de estilo de agente de usuario (Estilos del navegador): primero el navegador va a implementar los estilos que ya trae por defecto
Declaraciones normales en hojas de estilo de autor (nuestro .css) que son los estilos que nosotros colocamos en nuestro proyecto.
Declaraciones importantes en hojas de estilos de autor (utilizar el !important)
Especificidad: el orden de importancia es:
Para evitar rescribir estilos y que se rompa nuestro código tenemos que evitar los !important, Iniline styles #id y tag.
Orden de la fuente: las declaraciones finales son las que se se van a ejecutar en el caso que los estilos tienen la misma especificidad
Como curiosidad y para calcular el "peso" de la especificidad en CSS podemos usar una herramienta como Specificity Calculator
Cuanto más grande sea el número calculado debajo mayor especificidad tendrá la regla.
Gracias.
Aquí un vídeo para reforzar aún mas el concepto de especificidad: https://www.youtube.com/watch?v=v5GxoV14YOE
Muchas gracias, muy buen video para complementar lo aprendido :)
Muy útil!
Falto mencionar las especificidad de los pseudo-clases y pseudo-elementos: Pseudo-Clase: (0,1,0) Pseudo-Elemento: (0,0,1)
Gracias compa.
Gracias compañero.
Cuando Diego habla sobre cómo carga CSS en el navegador, es algo parecido a esto:
Para terminar de entender el tema de herencia en CSS es importante también entender el orden de la declaración y la especificidad que tiene CSS. ¿Cómo se controla el orden al declarar CSS? Aquí se va a mencionar las reglas que aplica CSS y el navegador para poder implementar los estilos. CSS y el navegador van a tener 3 puntos que son importantes para decidir que estilos se van a implementar
Clase 27 - Especificidad en selectores
¿Cuáles son los elementos que tiene en cuenta el navegador para implementar los estilos CSS?
¿Cuál es el orden de importancia que usa el navegador para implementar los estilos CSS?
¿Usar declaraciones importantes con la palabra !important es buena práctica, por qué?
¿Cuál es el valor y orden de la especificidad que usa el navegador para implementar estilos CSS?
¿Podemos juntar los elementos de especificidad para hacer que un estilo sobreescriba a otro?
¿Qué debemos de tener en cuenta respecto al orden de las fuentes en CSS?
Un resumen de como se aplican las propiedades en CSS
Consegui esto me parecio interesante compartirlo https://specifishity.com/
genial esa pagina gracias
