Revisar el nivel de prioridad de estilo CSS
La hoja de estilo en cascada (CSS) Creo que es el lenguaje más simple en comparación con otros lenguajes relacionados con la web, por lo que no es sorprendente encontrar que muchas personas que recién están empezando a aprender cómo crear un sitio web aprenden principalmente este lenguaje y HTML primero..
En este post, volveremos a lo básico de CSS. Vamos a revisar cómo se aplican inicialmente los estilos CSS, qué estilos se aplicarán, cómo algunos enunciados de estilos se sobrescriben entre sí y otros no..
Por lo tanto, esta publicación está dedicada específicamente a los principiantes que están empezando a entender los desafíos, y probablemente aún cometan errores al compilar su primera hoja de estilo. Así que, vamos a empezar.
Estilos de navegador predeterminados
Firefox, Chrome, Safari, Opera e Internet Explorer son actualmente los cinco principales navegadores de escritorio en el mercado. Estos navegadores y todos los demás navegadores siguen una regla estándar para incluir estilos predeterminados incorporados para representar los elementos HTML.
Entonces, cuando pongamos algunos elementos HTML aleatorios sin ningún estilo agregado, verás que todavía se representa correctamente en el navegador..
Pero, si inspeccionamos ese elemento con cuidado, cada uno de los navegadores tiene (ligeramente) valores diferentes para su “defecto” Declaración que causa incoherencias en los navegadores, especialmente en el antiguo como IE6, 7 y Firefox 3.0..
Por ejemplo, como puede ver en la captura de pantalla anterior, el Firefox más nuevo representó el blockquote por defecto con margen: 16px 40px 16px 40px, mientras que en el otro lado el Internet Explorer 7 hará blockquote con margen: 0px 40px.
Para superar las inconsistencias que se muestran arriba, muchos diseñadores y desarrolladores web prefieren sobrescribir todos esos estilos con Restablecer CSS. Este archivo CSS generalmente contiene casi todo HTML Tipo Selectores, definiéndolos con reglas iguales..
Hay muchos restablecimientos de CSS disponibles, pero aquí están mis tres favoritos:
- Normalize.css
- Restablecer CSS
- HTML5 Restablecer hoja de estilo
Selectores
Probablemente lea con frecuencia este término en los blogs de diseño / desarrollo web que visitó; Selectores.
El Selector en CSS es la sintaxis que se usa para apuntar a cualquier parte del documento HTML para los estilos que se aplicarán. Hay tres selectores básicos que discutiremos aquí, ya que probablemente serán los selectores comunes que se utilizarán en su primer sitio web. Cubriremos otras en futuras publicaciones..
Selector de tipo
Una vez que hemos mencionado anteriormente, el selector de tipo apuntará a cualquier elemento HTML específico en el documento. Por ejemplo:
p / ** declaración ** /
coincidirá con todos los pag o la párrafo Los elementos y su uso eventualmente sobrescribirán los estilos predeterminados dados desde los navegadores.
Selector de clase
Cuando ha agregado una clase o incluso muchas clases a un elemento, también puede orientar esas clases. los Selector de clase comienza con un punto parámetro.
.caja / ** declaración ** /
El fragmento de código anterior coincidirá con todos los elementos que tienen la clase de cuadro, o también podemos seleccionar más específicamente.
p.box / ** declaración ** /
Apuntará solo al pag elemento que tiene el caja clase.
Cuando estamos usando el Clase selector, todos los mismos estilos de declaración tanto de la Tipo selector y el Navegador por defecto será sobrescrito.
Selector de ID
los CARNÉ DE IDENTIDAD Es un atributo muy restrictivo, solo podemos tener uno. carné de identidad en un elemento y debe ser único también.
Contenido
En caso de que tengamos un carné de identidad En un elemento, podemos usar el selector de identificación para apuntar a ese elemento; El selector de id se define con un hash # parámetro.
#uniqueID / ** declaración ** /
Desde el CARNÉ DE IDENTIDAD es único, tiene el nivel de prioridad más fuerte del tipo de selector. Entonces, cuando declaramos estilos con el CARNÉ DE IDENTIDAD selector que finalmente sobrescribirá la misma declaración de la Clase, Tipo selectores y la Navegador por defecto estilos.
Incrustando los estilos
Hemos superado todos los selectores básicos esenciales y ahora veremos cómo esos estilos están incrustados en un documento HTML..
Estilos externos
Los estilos externos son los estilos que se agregan en un archivo separado, generalmente en un .css archivo que luego se vincula al documento HTML utilizando el etiqueta para aplicar esos estilos.
Y todos los estilos declarados en los archivos se comportarán como lo que hemos mencionado en el Selectores sección anterior, principalmente sobreescribirá el navegador predeterminado estilo, y sobrescribir en otra declaración de estilo dependiendo del nivel de prioridad de los selectores.
Esta práctica es la forma más recomendada de adjuntar los estilos, especialmente cuando tiene miles de líneas de códigos CSS con muchas páginas para adjuntar..
Al hacerlo, los estilos también serán fáciles de administrar, por ejemplo, puede separar los archivos CSS en varios archivos dependiendo de su función específica, como typography.css para controlar todos los estilos relacionados con la tipografía, etc..
Estilos internos
Los estilos internos son los estilos que están incrustados directamente en un documento HTML, generalmente dentro de etiqueta.
Pero esta práctica no se recomienda cuando tengas cientos de líneas de estilos, ya que tu página HTML será demasiado larga y el estilo solo afectará el lugar donde están incrustados los estilos. Cuando haya dejado que digan diez páginas, deberá copiar esos estilos e incrustarlos en todas las páginas, y cuando necesite cambiar los estilos, deberá cambiarlo a diez páginas diferentes, lo que obviamente es una tarea tediosa..
Según su nivel de prioridad, el estilo interno es más alto, por lo que sobrescribirá los estilos externos.
Estilos en linea
Los estilos en línea son los estilos que están directamente incrustados en el elemento HTML.
Este es un parrafo
Este ejemplo anterior agregará 5px Margen al elemento de párrafo y también sobrescribirá los márgenes que se han declarado para ese elemento, tanto en estilos internos como externos..
Pero evite hacer esto, ya que su marca se saturará con todas esas declaraciones de estilo; Si tienes un montón de estilos incrustados, incluso se convertirá en una pesadilla para ver y mantener todos tus html y estilos..
Otras lecturas: Tres formas de insertar CSS - W3CSchools.
La regla importante
Hay algunas circunstancias en las que tenemos que aplicar un estilo específico para un elemento, pero el mismo estilo para ese elemento también se ha declarado en otra parte de la hoja de estilo o en el documento. Por ejemplo:
Tenemos la siguiente etiqueta de anclaje con estilos incrustados
Este es un enlace
Y también tenemos un estilo separado para esa etiqueta de anclaje en la hoja de estilo.
a border: 1px solid # 333; color de fondo: # 555;
En ese ejemplo, podemos usar el !importante Regla para forzar al navegador a usar los estilos en la hoja de estilo en lugar del que está en el elemento..
a border: 1px solid # 333! important; color de fondo: # 555! importante;
los !importante regla indicará que este estilo es el más importante y se debe aplicar sobre el otro estilo, incluso cuando está incrustado directamente en el elemento (Estilos en línea).
Otras lecturas: Declaraciones importantes de CSS: cómo y cuándo usarlas - Smashing Magazine.
Conclusión
Hemos llegado a través de todo el tema en este artículo. Ahora podemos ver que cada selector y la forma en que incorporamos los estilos tienen diferentes niveles de prioridad en el mecanismo del navegador. Como he mencionado anteriormente, estos temas están destinados a niveles principiantes, por lo que definitivamente no son algo nuevo para los diseñadores web experimentados..
Pero, creo que todos los diseñadores web en general estarán de acuerdo en que volver a lo básico a veces es necesario para revisar nuestro conocimiento fundamental de un tema. De hecho, a menudo nos perdemos algunas de las cosas básicas, ya que tendemos a estar más impresionados con cosas increíbles (y locas) como esta..
Por último, le proporcioné una demo y un archivo fuente para que examine nuestra discusión en este artículo más a fondo..
- Manifestación
- Descargar fuente
Espero que disfrute de esta publicación y si encuentra alguna inexactitud en ella, o me he perdido algunos puntos importantes, no dude en notificarme en la sección de comentarios a continuación..
