Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Las 3 formas de insertar CSS en tus páginas web.

Para algunos de ustedes, esto puede sonar como un artículo realmente aburrido. ¡Pero deberías darle una oportunidad porque no escribo sobre cosas que nunca usarás! Evito la torre de marfil, marginal y nerd centrada, como un gato que evita el agua.
He leído cientos (lamentablemente, esto es verdad) de esos libros de nerd gruesos de 2 pulgadas (no salgo mucho) y no puedo soportarlo cuando la gente desperdicia papel en ese tipo de cosas generalmente inútiles. Así que sigue leyendo, entusiasta estudiante, ¡y estarás bien encaminado para crear tus propios sitios web asesinos!🙂
A los sabios que crearon CSS se les ocurrieron 3 formas básicas para que usted use CSS en sus páginas web:

1. Con un archivo externo que enlace en su página web:

< link  href = "myCSSfile.css"  rel = "hoja de estilo"  type = "text / css" >
o usando el método de importación:
< style  type = "text / css"  media = "all" >
   @import "myCSSfile.css";
< / estilo >
¿Por qué utilizar el método de importación frente al método de enlace cuando se usan hojas de estilo externas? Utilice el método de importación si desea admitir navegadores realmente antiguos como Netscape 4.0.
Déjeme explicarle: Netscape no puede manejar la mayoría de CSS más allá de la configuración de fuente y los colores, si encuentra cualquier otro tipo de CSS podría causar que el viejo Netscape 4 se bloquee en algunas ocasiones o por lo menos dañe su página.
Netscape 4 no entiende el método @import de vincular a una hoja de estilo como pueden hacerlo los navegadores más nuevos, por lo que Netscape simplemente lo ignora. Puede usar esto para ocultar el elegante código de CCS en la hoja de estilo externa utilizando el método @import, de modo que todos los buenos navegadores puedan hacer referencia al mismo tiempo que mantienen a Netscape 4 fuera de la imagen.
Netscape 4.0 está bastante muerto (eso es realmente algo bueno) así que personalmente no me preocupo mucho por eso. Pero para algunos de ustedes, puede ser motivo de preocupación, así que pensé que debería mencionarse.

2. Al crear un bloque CSS en la propia página web; normalmente se inserta en la parte superior de la página web entre las etiquetas <head> y </head>:

< head > 
   < style  type = "text / css" >
      p {padding-bottom: 12px; }
   < / estilo > 
< / cabeza >

3. Al insertar el código CSS directamente en la etiqueta:

< p  style = "padding-bottom: 12px;" > Tu texto < / p >
Entonces, algunos de ustedes pueden preguntarse por qué tienen los 3 métodos para incluir el CSS en una página web. La respuesta es: flexibilidad y pereza! Ok, estoy bromeando sobre la pereza, reemplazarlo con 'precisión'. Entonces, ¿qué diablos significa eso?
Creo que la forma más fácil de explicarte lo que está pasando es darte ejemplos reales que demuestren las diferencias. Espera un segundo, no te duermas ... los ejemplos son cortos y creo que una vez que termines, ¡verás lo fácil que es!
Otra razón por la que desea continuar leyendo este artículo es que obtendrá una buena comprensión de algunos principios CSS fundamentales (y prácticos). Recuerde que la diferencia entre las personas que son realmente buenas en lo que hacen y las que no lo son tanto. Está en el dominio de lo básico. ¡Vamos a bajar!

Método 1: cree un archivo CSS independiente y vincúlelo a sus páginas web

El encabezado de esta parte del artículo sugiere por qué le gustaría pasar por la molestia de crear un archivo CSS independiente en lugar de simplemente escribir el código CSS en la propia página web. ¿Puedes adivinar? Sigue intentándolo ... ¡veces! ¿Lo obtuviste? Podría citarte alguna descripción centrada en nerd que describa la ventaja; ¡El problema es que solo los nerds que ya saben lo entenderían!
En pocas palabras: al mantener el código CSS en su propio archivo, puede vincular ese archivo CSS a tantas páginas web como desee. Esto tiene dos ventajas principales:
  1. Tendrá mucho menos código en todas sus páginas HTML: hace que las páginas sean más ordenadas y fáciles de administrar y hace que las páginas web sean un poco más rápidas con la descarga. (Aunque este punto es realmente menor en la mayoría de los casos, y en mi opinión, en mi opinión, es demasiado exagerado)
  2. Potencialmente, puede reducir la cantidad de trabajo que tiene que hacer a lo grande. ¿Porque preguntas? Sencillo; digamos que tiene 50 páginas web en las que ha configurado el texto como negro y el texto del título (texto entre las etiquetas <h3> por ejemplo) a azul. Entonces, un día decides que quieres cambiar el color del texto. Ya que el CSS que controla el color del texto para las 50 páginas está en un archivo CSS, puede cambiar fácilmente el color de su texto en las 50 páginas cambiando una línea en el archivo CSS.
Si, por otra parte, hubiera decidido incluir toda la información del color de la fuente en cada página, habría tenido que cambiar las 50 páginas. Esto hubiera sido aún peor si hubiera estado usando etiquetas de fuente, o CSS justo en cada etiqueta, ¡tendría que cambiar la configuración / código de color en todas las etiquetas <p> y <h3> en las 50 páginas! Te puedo decir por experiencia que eso apesta a lo grande!
La regla: si va a tener más de una página web con las mismas propiedades de estilo (que se parecen de alguna manera), debe crear un archivo CSS separado y vincular sus páginas web con él.

Método 2: crear un bloque CSS en la propia página web

La regla: utilice este método si desea anular el CSS que tiene en un archivo CSS vinculado o si solo tiene un sitio web de una página.
Ahora que cubrimos el primer método de poner todo su código CSS en un archivo separado y vincularlo, los otros métodos son fáciles de describir.
CSS significa (es el acrónimo de): 'Hojas de estilo en cascada'. Creo que las palabras "hojas de estilo" en CSS se autodescriben ... sabemos lo que significa "estilo" en las hojas de estilo. Pero, ¿cuál es el significado de 'en cascada' en CSS?

El efecto cascada en CSS.

La palabra 'en cascada' en CSS describe un mecanismo en cascada; es decir, que el código CSS en la página misma anulará el código CSS en un archivo vinculado separado. Y posteriormente, CSS declarado 'en línea' en la etiqueta en sí anularía a todos los demás CSS.
Así que veamos un ejemplo práctico; digamos que tiene un sitio web con 50 páginas donde el diseño y las fuentes son iguales en todas las 50 páginas. De manera inteligente, coloque la información CSS que establece el diseño y las opciones de fuente en una hoja de estilo separada, pero para una página en particular, necesita cambiar el color de parte del texto y agregar un borde alrededor de un párrafo. Este es un ejemplo perfecto donde es posible que desee colocar un poco de CSS en la página, ya que el color y el borde serán únicos para esa página. ¿Se está hundiendo todo esto?🙂

Método 3: Incruste el derecho de CSS en las propias etiquetas (llamado CSS en línea)

La regla: use este método en un elemento / etiqueta único que desee afectar con CSS.
Un ejemplo puede ser un encabezado especial en la página en el que desea tener un poco más de relleno del que suele tener para un encabezado. En lugar de crear una clase en otro lugar que solo se utilizará en esta ocasión, tiene sentido para mí simplemente incluir el CSS en línea. Debo recalcar que el CSS en línea es algo que rara vez se debe usar, ya que puede ensuciarse rápidamente.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas