Archivo de estilo CSS. Conexión de varios archivos CSS a un documento HTML. Escribir estilo CSS

Crear archivo css Tan fácil como html. Simplemente vaya a cualquier editor de texto, por ejemplo el Bloc de notas, y cree allí un archivo con extensión css. Démosle un nombre estándar: estilo.css.

¡Felicidades! Tu archivo está listo. Está vacío por ahora, pero luego se puede llenar con contenido relevante. A continuación veremos los conceptos básicos: formas de conectar CSS.

Hojas de estilo externas

Quizás externo CSS- esta es la solución más correcta y óptima para el sitio. Basta con indicar en la página simplemente etiqueta de enlace(creado para incluir otros archivos) con un enlace a la hoja de estilos y ¡los estilos están conectados!

Atención

La línea con la etiqueta de enlace supone que style.css está en el mismo directorio (carpeta) que este archivo.

La línea con la etiqueta de enlace supone que style.css está en el mismo directorio (carpeta) que nuestro archivo (por ejemplo, index.html). Si la ubicación del archivo CSS ha cambiado, entonces el atributo href debe modificarse en consecuencia. Por ejemplo, a menudo sucede que se crea una carpeta separada para CSS (lo cual es conveniente y lógico). Pero entonces el atributo href se verá diferente:

Hojas de estilo internas

A veces puedes ver otra construcción CSS que se inserta directamente en etiqueta html

Texto azul, tamaño 14 píxeles.

La ventaja es que puedes configurar estilos inmediatamente en el mismo archivo. Una desventaja importante es que las propiedades especificadas se asignarán sólo a un elemento específico, en este caso un párrafo. Por lo tanto, se pierden todos los beneficios de conectar propiedades de forma remota.

Hojas de estilo integradas

Hay una manera más fácil Inserciones CSS. Si no desea crear un archivo CSS separado, sino que solo necesita usar un par de propiedades, entonces esta opción es adecuada. Empecemos ahora mismo con un ejemplo.

encabezado de primer nivel

Cabecera de segundo nivel, azul

título de tercer nivel

En el ejemplo puedes ver que escribimos los estilos justo antes del cierre. etiqueta de cabeza dentro de las etiquetas de apertura y cierre estilo. En realidad etiqueta estilo también se puede escribir en cuerpo, pero si desea que sus publicaciones se vean estructuradas y que la persona que vea este código después de usted no se agarre la cabeza, entonces es mejor escribir estilos en un solo lugar.

La desventaja de la hoja de estilo incorporada también es obvia: dichas entradas deberán realizarse para cada página por separado.

Hay 3 formas de implementar estilos CSS para su sitio: puede usar estilos CSS globales agregando reglas CSS al contenedor Documento HTML, puede agregar un enlace a un documento externo. .css archivo que contiene todas las reglas necesarias o utilizar CSS interno para aplicar reglas a un elemento específico. En este tutorial, veremos las tres opciones de CSS y aprenderemos sus ventajas y desventajas.

CSS global se coloca en un contenedor página específica. Con esta opción de conexión, las clases y los identificadores (ID) se pueden usar para hacer referencia al código CSS; sin embargo, solo estarán activos en esa página específica. Los estilos CSS conectados de esta manera se cargan cada vez que se recarga la página, por lo que pueden afectar su velocidad de carga. Sin embargo, existen varias situaciones en las que utilizar CSS global puede resultar útil. Por ejemplo, si necesita enviarle a alguien una plantilla de página, le resultará mucho más fácil proporcionar un resultado preliminar si todo está en una sola página. CSS global se coloca entre etiquetas. A continuación se muestra un ejemplo de una hoja de estilo global:

Beneficios del CSS global:

• Una hoja de estilo sólo afecta a una página.
• CSS global puede utilizar clases e identificadores (ID).
• No es necesario cargar varios archivos. HTML y CSS pueden estar en el mismo archivo.

Desventajas del CSS global:

• Mayor tiempo de carga de la página.
• Solo se conecta a una página, lo que no es efectivo si desea utilizar el mismo CSS para varias páginas.

Cómo conectar CSS a una página HTML

1. Abra su página HTML en cualquier editor de texto. Si la página ya está cargada en su cuenta de hosting, puede utilizar el editor de texto proporcionado por su hosting. Si el documento HTML proporcionado está en su computadora, puede usar cualquier editor de texto para editarlo y luego volver a cargarlo en su cuenta de hosting usando .
2. Encuentra la etiqueta de apertura y agregue el siguiente código después:

Después de todos los pasos, el documento HTML con CSS global debería verse así :

Guía de hosting

Este es nuestro texto.

Opción 2: CSS externo

Quizás la opción más conveniente para conectar CSS a su sitio sea vincularlo a un sitio externo. .css archivo. En este caso, todos los cambios realizados en el archivo CSS externo se reflejarán en su sitio en su conjunto. Se coloca un enlace a un archivo CSS externo en el contenedor. páginas:

Considerando que las hojas de estilo en sí se encuentran en el archivo estilo.css. P.ej:

Xleftcol ( flotante: izquierda; ancho: 33%; fondo:#809900; ) .xmiddlecol ( flotante: izquierda; ancho: 34%; fondo:#eff2df; )

Beneficios del CSS externo:

• Tamaño de página HTML más pequeño y estructura de archivos más limpia.
• Velocidad de carga rápida.
• El mismo se puede utilizar para diferentes páginas. .css archivo.

Desventajas del CSS externo:

• Es posible que la página no se muestre correctamente hasta que el CSS externo esté completamente cargado.

Opción 3- CSS interno

CSS en línea se utiliza para una etiqueta HTML específica. Atributo (no confundir con el atributo del mismo nombre) en el que se describen los elementos que necesitamos.

Eche un vistazo al ejemplo, habrá comentarios a continuación.

Todo sobre elefantes

En este sitio encontrará cualquier información sobre los elefantes.

comprar un elefante

¡¡Con nosotros podrás adquirir los mejores elefantes a precios competitivos!!

alquilar un elefante

¡¡Sólo aquí puedes alquilar elefantes!!

Como puede verse en el ejemplo, logramos exactamente el mismo resultado que en el primer caso, solo que ahora no asignamos un estilo a cada elemento individualmente, sino que lo colocamos en el "encabezado" del documento, indicando así que todos los títulos

,

- los párrafos serán azules

- rojo. Imagínese cuánto más fácil sería nuestro trabajo si hubiera cien párrafos de este tipo y unos quince títulos en una página, y el documento en sí pesara menos al "eliminar" todas las descripciones de estilo repetidas para cada elemento individual.

Ahora los comentarios prometidos:

Etiqueta Los estilos de ciertos elementos HTML se declaran directamente según la siguiente sintaxis:

Si en un bloque de declaración de estilo se especifican varias propiedades de un elemento, se separan por punto y coma.

CSS en un archivo externo separado.

En resumen, llegamos a la principal ventaja, en mi opinión, de CSS, es decir, la capacidad de colocar toda la información relacionada con el diseño de un sitio en un archivo externo separado.

Entonces, abre el bloc de notas (u otro editor) y escribe el siguiente texto en él:

Cuerpo (color de fondo: #c5ffa0)
a (color:#000060; peso de fuente: negrita;)
a:hover (color:#ff0000; peso de fuente: negrita; decoración de texto:ninguno)
h1 (color: #0000ff; tamaño de fuente: 18px)
h2 (color: #ff00ff; tamaño de fuente: 16px)
p (color: #600000; tamaño de fuente: 14px)

Intentaré contarles en detalle lo que escribimos sobre esta cosa extraña en los capítulos siguientes de este libro de texto.

¡Todo! ¡Se ha creado el archivo de descripción de estilo! Ahora solo queda un poquito, es decir, forzar a las páginas necesarias de nuestro sitio a extraer información de este archivo.

Esto se hace usando la etiqueta (conexión). Etiqueta multiusos y sirve para “vincular” un documento HTML con archivos externos adicionales que aseguren su correcto funcionamiento. Etiqueta es una especie de enlace, sólo que no está destinado a los usuarios, sino a los programas de navegación (navegadores). Porque lleva exclusivamente información de servicio; se encuentra en el encabezado del documento HTML entre las etiquetas; y no se muestra en la pantalla de los navegadores.

Etiqueta tiene atributos:

href- La ruta al archivo.
rel- Define la relación entre el documento actual y el archivo al que se hace referencia.

• Icono de acceso directo: especifica que el archivo incluido es un archivo .
• hoja de estilo- Especifica que el archivo incluido contiene una hoja de estilo.
• application/rss+xml: un archivo en formato XML para describir la fuente de noticias.

tipo- Tipo de datos MIME del archivo adjunto.

Dado que incluimos una hoja de estilos en cascada como un archivo externo, nuestro enlace de servicio toma la siguiente forma:

Repito, para disipar ciertamente posibles malentendidos. Atributo rel asignar un valor hoja de estilo Como estamos conectando una hoja de estilos en cascada como un archivo externo, indicamos la ruta al archivo css (en este ejemplo el archivo se llama miestilo.css y se encuentra al lado del documento HTML en el que está escrito este enlace) también indicamos que este archivo es de texto y contiene una descripción de estilo tipo="texto/css"

Ahora insertamos esta línea en los encabezados de página de nuestro sitio y disfrutamos del resultado.

archivo mystyle.css
cuerpo (color de fondo: #c5ffa0)
a (color:#000060; peso de fuente: negrita;)
a:hover (color:#ff0000; peso de fuente: negrita; decoración de texto:ninguno)
h1 (color: #0000ff; tamaño de fuente: 18px)
h2 (color: #ff00ff; tamaño de fuente: 16px)
p (color: #600000; tamaño de fuente: 14px)
Archivo index.html

Menú:

Todo sobre elefantes.
Compra un elefante.
Alquila un elefante.

---

Todo sobre elefantes

En este sitio encontrará cualquier información sobre los elefantes.

Archivo elefante.html

Menú:

Todo sobre elefantes.
Compra un elefante.
Alquila un elefante.

---

comprar un elefante

¡¡Con nosotros podrás adquirir los mejores elefantes a precios competitivos!!

Archivo elefante1.html

Menú:

Todo sobre elefantes.
Compra un elefante.
Alquila un elefante.

---

alquilar un elefante

¡¡Sólo aquí puedes alquilar elefantes!!

En el ejemplo anterior, "sitio sobre elefantes", actualmente hay tres páginas, cada una de las cuales está asociada con un único archivo CSS externo: mystyle.css. Por lo tanto, lo "descargamos" significativamente e hicimos que el diseño de todo el sitio fuera "compatible con dispositivos móviles". ¿Imagínese cuántos kilobytes ganaríamos si este sitio tuviera cien páginas completas? Y además, ¿cuánto tiempo nos ahorraríamos si tuviéramos que cambiar algo en su diseño?

En este capítulo, analizamos tres formas de incrustar CSS en un documento HTML. ¿Cuál es mejor usar?

• Usar atributo estilo para cualquier elemento, si este elemento con un estilo diferente a otros elementos es el único en todo el sitio.
• Usar etiqueta , con parámetro tipo, indica que se está incluyendo una hoja de estilos CSS. He aquí un ejemplo:

  
  
  

  
  
  

  
  

  Este título será rojo.

  
  

  Este título será rojo.

  
  
  
  
  

  Todos los encabezados h1 de nuestra página son rojos. Si lo deseas, puedes volver a pintar uno de ellos de azul; para ello, necesitas usar la hoja de estilo interna:

  
  
  

  
  
  

  Este título será rojo.

  
  

  Este encabezado será azul

  
  

  Este título será rojo.

  
  
  
  
  

  En esta situación se aplica el principio de cascada, que resolverá el conflicto. En nuestro ejemplo, la tabla interna tiene mayor prioridad y por lo tanto el título se volverá azul.

  Las desventajas de este método son obvias... Es necesario crear una hoja de estilo para cada página HTML, por lo que usaremos una hoja de estilo externa.

  Ahora que hemos visto formas de conectar CSS con HTML, a continuación veremos la sintaxis de CSS.

  Hola, queridos lectores del proyecto Anatomía de la Empresa. ¡El webmaster Alexander está contigo! En el último artículo, analizamos qué son los estilos CSS y qué importancia tienen en la programación WEB.

  Es bastante obvio que si los estilos CSS tienen un impacto significativo en la visualización de un archivo HTML, entonces deben estar conectados de alguna manera. Hoy veremos cuatro formas principales de conectar el estilo CSS con HTML.

  ¡No procrastinemos y comencemos!

  ¡Incluyendo un archivo CSS separado!

  Una de las formas más cómodas y sencillas de conectar estilos es conectar un archivo separado con estilos. Para ello utilizamos el editor de texto notepad++ (o cualquier otro) para crear un archivo con extensión .css y colocarlo en la misma carpeta que el archivo en el que queremos colocarlo.

  Luego en el archivo HTML entre las etiquetas publicar el siguiente código:

  Ahora veamos lo que significa todo esto:

  Link # traducido del inglés significa "enlace". De esta forma le mostramos al navegador que de lo que vamos a hablar a continuación es de un enlace. rel= # con este atributo mostramos cómo se relaciona el archivo CSS con el archivo HTML. "hoja de estilo" # es decir, que el archivo CSS es una hoja de estilo en cascada. type="text/css" # aquí todo es simple: esto es una indicación de que el archivo está escrito en formato de texto y tiene la extensión .css href="style.css" # este es un enlace a un archivo con estilos CSS.

  En mi opinión, esta es la forma preferida de incluir estilos CSS.

  Escribimos estilos directamente en el archivo HTML (primer método)
  

  La siguiente forma de especificar estilos CSS es escribirlos directamente en el documento HTML. Se parece a esto:
  

  
  
  

  Si observamos cómo se mostrará este documento HTML en el navegador, veremos que el texto entre las etiquetas Volverse rojo. Y usando el atributo de estilo, decimos que a continuación tenemos parámetros de estilo de visualización. Color es un selector responsable del color. Rojo es el valor de este selector. De esta forma podremos resaltar determinadas partes del texto con un determinado tipo de visualización.

  Colocar hojas de estilo en cascada dentro de HTML (segundo método)

  Otra forma de incluir estilos CSS es colocar tablas en cascada dentro del propio archivo HTML. En mi opinión, este método no es el más conveniente, porque al usarlo, analizar el código del sitio no resulta muy conveniente. Para comenzar a escribir estilos CSS, solo necesita insertar etiquetas en el archivo HTML . En la práctica se ve así:

  Aquí hay un ejemplo: mostrar estilos CSS en un documento HTML

  
  
  

  Tenga en cuenta que dentro de la etiqueta también escribimos código de acuerdo con las reglas CSS, usando llaves. En artículos posteriores hablaré con más detalle sobre las reglas de sintaxis en CSS.
  

  Conexión de varios archivos CSS a un documento HTML.

  Las reglas HTML permiten incluir varios archivos CSS a la vez. Muchos webmasters usan esto: crean archivos CSS separados para texto e imágenes. O archivos separados para el encabezado, pie de página y cuerpo principal de la página. Averigüemos cómo implementar esto.

  Creamos varios archivos con estilos CSS. Deje que sus nombres sean estilo-1.css y estilo-2.css. Lo colocamos, como en el método número uno, en la misma carpeta que el archivo HTML.

  Aquí hay un ejemplo: mostrar estilos CSS en un documento HTML

  
  
  

  Todo es similar al primer método, solo que en este caso indicamos enlaces a dos archivos a la vez.

  Enlace al archivo CSS dentro de un archivo del mismo tipo.

  Además de todos los métodos anteriores, existe un método que le permite colocar enlaces a muchos otros dentro de un archivo CSS.

  Esto se implementa de la siguiente manera:
  Primero, necesitamos conectar al menos un archivo CSS a su código de la misma manera.

  En segundo lugar, ingrese el siguiente código en el archivo ya conectado:

  @importar URL("estilo-2.css");

  Esta línea incluye un archivo CSS adicional a nuestro archivo. Si tiene alguna dificultad para conectar CSS, puede preguntarles en los comentarios.
  Como aprendimos en las dos lecciones anteriores, la tecnología CSS es una herramienta poderosa que todo webmaster debería dominar. Para mejorar la asimilación del material, decidí añadir un vídeo formativo + test al final de cada lección para consolidar la información recibida.

  Prueba de fijación de materiales:
  

  Necesitamos incluir el archivo CSS colocando un enlace en el archivo HTML. ¿Cuál de los siguientes métodos es correcto?

  Opción 1:

  opcion 2:
  

  Opción 3:

  Opción 4:

  
  ¿Podemos colocar cascadas CSS directamente en el archivo HTML?