Entendiendo los Positivos y Negativos de los Estilos Inline de CSS

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print
Entendiendo los Positivos y Negativos de los Estilos Inline de CSS

Entendiendo los Positivos y Negativos de los Estilos Inline de CSS

VALORACIÓN DEL ARTÍCULO:
5/5


CSS, u hojas de estilo en cascada, es lo que se utiliza en el diseño de sitios web modernos para aplicar el aspecto visual a una página. Mientras que HTML crea la estructura de la página y Javascript puede manejar comportamientos, el aspecto de un sitio web es el dominio de CSS. Cuando se trata de estos estilos, la mayoría de las veces se aplican utilizando hojas de estilo externas, pero también se pueden aplicar estilos CSS a un único elemento específico utilizando lo que se conoce como “estilos en línea”.

Los estilos en línea son estilos CSS que se aplican directamente en el HTML de la página. Este enfoque tiene ventajas y desventajas. Primero, veamos exactamente cómo se escriben estos estilos.

Cómo escribir un estilo en línea

Para crear un estilo CSS en línea, empiece escribiendo su propiedad de estilo de forma similar a como lo haría en una hoja de estilo, pero tiene que ser todo de una línea. Separe varias propiedades con punto y coma como lo haría en una hoja de estilo.

background:#ccc; color:#fff; borde: negro sólido 1px;>

Coloca esa línea de estilos dentro del atributo style del elemento que quieres que sea estilizado. Por ejemplo, si desea aplicar este estilo a un párrafo en su HTML, ese elemento tendría el siguiente aspecto:

En este ejemplo, este párrafo en particular aparecería con un fondo gris claro (eso es lo que #ccc renderizaría), texto negro (del color #000), y con un borde negro sólido de 1 píxel alrededor de los cuatro lados del párrafo.

Ventajas de los estilos en línea

Gracias a la cascada de hojas de estilo en cascada, los estilos en línea tienen la mayor prioridad o especificidad en un documento. Esto significa que se van a aplicar sin importar qué más se dicte en su hoja de estilo externa (con la única excepción de los estilos a los que se les dé la declaración !importante de esa hoja, pero esto no es algo que se deba hacer en los sitios de producción si se puede evitar). Los únicos estilos que tienen mayor precedencia que los estilos en línea son los estilos de usuario aplicados por los propios lectores. Si tiene problemas para que los cambios se apliquen, puede intentar establecer un estilo en línea en el elemento. Si los estilos todavía no se muestran usando un estilo en línea, sabes que hay algo más en marcha.

Los estilos en línea son fáciles y rápidos de añadir y no tiene que preocuparse por escribir el selector CSS adecuado, ya que está añadiendo los estilos directamente al elemento que desea cambiar (ese elemento reemplaza esencialmente al selector que escribiría en una hoja de estilo externa). No es necesario crear un documento completamente nuevo (como con las hojas de estilo externas) o editar un nuevo elemento en la cabecera del documento (como con las hojas de estilo internas). Sólo tiene que añadir el atributo de estilo que es válido en casi todos los elementos HTML. Todas estas son razones por las que usted puede estar tentado a usar estilos en línea, pero también debe ser consciente de algunas desventajas muy significativas de este enfoque.

Desventajas de los estilos en línea

Debido a que los estilos en línea son los más específicos en la cascada, pueden anular cosas que usted no tenía la intención de que lo hicieran. También niegan uno de los aspectos más poderosos de CSS - la capacidad de crear estilos de muchas y muchas páginas web desde un archivo CSS central para hacer que las futuras actualizaciones y cambios de estilo sean mucho más fáciles de gestionar.

Si sólo tuviera que utilizar estilos en línea, sus documentos se inflarían rápidamente y serían muy difíciles de mantener. Esto se debe a que los estilos en línea deben aplicarse a todos los elementos en los que se deseen. Así que si quieres que todos tus párrafos tengan la familia tipográfica "Arial", tienes que añadir un estilo en línea a cada etiqueta en tu documento. Esto añade trabajo de mantenimiento para el diseñador y tiempo de descarga para el lector, ya que necesitaría cambiar esto en todas las páginas de su sitio para cambiar esa familia de fuentes. Alternativamente, si utiliza una hoja de estilo separada, podrá cambiarla en un solo lugar y hacer que cada página reciba esa actualización. Verdaderamente, esto es un paso atrás en el diseño web - ¡retrocede a los días de la etiqueta!

Otra desventaja de los estilos en línea es que es imposible modelar pseudo-elementos y clases con ellos. Por ejemplo, con las hojas de estilo externas, puede darle estilo al color visitado, flotante, activo y de enlace de una etiqueta de anclaje, pero con un estilo en línea, todo lo que puede hacer es darle estilo al enlace en sí, porque eso es a lo que se adjunta el atributo de estilo.

En última instancia, recomendamos no usar estilos en línea para sus páginas web porque causan problemas y hacen que las páginas trabajen mucho más para mantener. El único momento en que los usamos es cuando queremos comprobar un estilo rápidamente durante el desarrollo. Una vez que lo tenemos buscando correctamente ese elemento, lo movemos a nuestra hoja de estilo externa.

Deja un comentario

TAMBIÉN TE INTERESA

Consejos para elegir un Purificador de Aire

Hasta hace algunos años nos teníamos que resignar a pasar horas y horas encerrados en nuestros hogares y centros de trabajo sin tener poder sobre el ambiente, y sobre las partículas contenidas en el mismo. Probábamos sin mucho éxito con los clásicos sprays para eliminar los olores, y usábamos diferentes soluciones para evitar problemas de

firmar un PDF

Cómo firmar un pdf de manera rápida y segura

La digitalización ha entrado de lleno en la vida de las personas y en su relación con empresas y administraciones. Firmar un pdf se ha convertido en un acto cotidiano para muchos profesionales en todo tipo de contratos. Hay muchas formas de hacerlo, pero en estas líneas te mostraremos la más fácil gracias a una

Cámaras de Vigilancia

Cámaras de Vigilancia ¿Qué problemas legales existen?

Nadie duda de la eficacia de las cámaras de vigilancia, pero en medio de los buenos comentarios se presenta la polémica sobre si son o no una violación a la intimidad de las personas y qué tanto vulneran sus derechos. Índice de contenidos1 La tecnología y la vigilancia1.1 Amenaza a la privacidad2 Límites y controles

Principales funciones de Linux 5.10

Resumen de las principales funciones de Linux 5.10

El nuevo Kernel Linux 5.10 recibe soporte a largo plazo (LTS) y, por lo tanto, recibirá parches durante al menos los próximos dos años. Kernel.org actualmente declara diciembre de 2022 como el “Fin de la vida útil” (EOL). Sin embargo, como regla general, el período de mantenimiento de los núcleos LTS se extiende hasta cinco o

ataques informáticos

¿Qué es un ataque man-in-the-middle?

Si has oído hablar de los ataques man-in-the-middle pero no estás completamente seguro de lo que significan, este es el artículo para ti. Un ataque de hombre en el medio es difícil de identificar y defender. Los ataques MITM generalmente no se basan en infectar computadoras en ambos extremos del sistema. Más bien, se basan en controlar

configuración WLAN

Ventajas y desventajas de la extensión WLAN

Configura enrutadores WLAN y comienza a navegar libremente, lo que suena tan simple en teoría, a menudo falla en la práctica debido a distancias demasiado grandes o factores perturbadores como calefacción por suelo y paredes gruesas. Con un sistema de malla, puedes hacer que la señal de radio sea accesible para todos tus dispositivos finales a la misma velocidad de transmisión a pesar