Entendiendo los Positivos y Negativos de los Estilos Inline de CSS

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.

TAMBIÉN TE INTERESA

SMS-fraudulento-Renta-2024

Ojo con tu declaración de la Renta 2024: SMS y webs falsas podrían saquearte

La campaña de la Renta 2024 se encuentra activa desde hace semanas. Hacienda llama, como cada año, a millones de contribuyentes para presentar su declaración. Desde hace años, este trámite se puede realizar cómodamente en los canales online habilitados por la Administración. Además de Renta Web, cabe la posibilidad de hacer la operación o simulación

grabar-un-despido-en-TikTok

La (peligrosa) tendencia de grabar un despido en TikTok

TikTok es una red social en la que cabe absolutamente de todo. Y cuando decimos todo, es todo. Una de las últimas tendencias en auge es grabar un despido en TikTok. Si uno hace una búsqueda de contenido desde hashtags como #layoffs y #techleyoffs, encontrará un gran número de vídeos de personas que son echadas

impacto-a-la-IA-Generativa-en-el-cloud-privado

El impacto de la IA Generativa en el Cloud Privado

En este artículo indagamos sobre un término que está muy de moda en estos días: la IA Generativa. Además de describir qué y cuál es su potencial, lo vamos a relacionar con el Cloud Privado, ya que estos entornos pueden dar un gran paso adelante gracias a la capacidad de procesamiento y generación de datos

recetas-de-postres

Conviértete en todo un chef con las recetas de cocina de Alexa

El famoso asistente de voz de Amazon puede hacer casi de todo lo que le pidas, incluidas las recetas de cocina de Alexa. Tras cinco años de vida en España, algo más en Estados Unidos, los datos que maneja la compañía indican que muchas personas recurren a Alexa como su ayudante en la cocina, ya