Conexión de CSS externo. Hay dos formas de adjuntar archivos de hojas de estilo CSS a una página web. Incluyendo un archivo CSS separado

Buen día a todos.

Entonces, en uno de los artículos anteriores nos familiarizamos.

Pero no hemos abordado una cuestión muy importante. Es decir - cómo vincular estilos CSS al código HTML páginas de nuestro sitio web.

Esta pregunta es realmente muy importante. Después de todo si vinculamos estilos CSS incorrectamente a las páginas de nuestro sitio, entonces no podremos utilizar estos estilos. El navegador simplemente los ignorará y no veremos el resultado que da el uso de determinados estilos.

Hay diferentes formas de vincular estilos CSS al código de la página y hoy intentaremos verlas todas.

Empecemos.

Según la naturaleza de conectar hojas de estilos en cascada CSS a un documento HTML, existen: hojas de estilo externas e internas.

1. Hojas de estilo CSS internas.

Las hojas de estilo internas se encuentran dentro de nuestra página web. Sí, sí... Justo dentro del código HTML de cada página individual.

Esto, por supuesto, es un poco inconveniente, pero aún así existe esa posibilidad y no puedo dejar de decirlo.

Entonces, la primera forma de vincular estilos CSS al código de la página es usar la etiqueta, se aplica a todo el contenido del documento HTML. Puede haber tantos como desee, incluso todos los estilos para todo el sitio. Pero esto está un poco mal. Hablaré de esto un poco más adelante cuando mire las hojas de estilo externas.

A veces tienes que escribir estilos CSS dentro del código HTML.

Por ejemplo, cuando coloca algún tipo de banner publicitario en su sitio web, inserta el código de este banner en el código de la página.

Para que este banner se muestre correctamente (sin ir más allá de los límites asignados, tal vez necesite un marco, etc.), a veces es necesario adjuntarle varias instrucciones CSS.

Pero no tiene sentido realizar cambios en la hoja de estilo general. Una pancarta es un fenómeno temporal. Hoy uno, mañana otro. Por lo tanto, es más fácil escribir estilos directamente dentro del código de este banner.

Es decir, necesitamos conectar estilos CSS solo a un elemento de página específico. Esto se hace de forma muy sencilla: utilizando el atributo de estilo.

Los estilos escritos de esta manera sólo afectan al elemento en cuya etiqueta se colocan. En este caso, sólo para este párrafo (etiqueta

). ¡Y ningún otro!

2. Hojas de estilo externas.

El nombre hojas de estilo CSS externas significa que no están escritas en el cuerpo del documento HTML, sino en un archivo especial separado. Estos archivos tienen la extensión .css

Entonces, como prometí, te diré por qué es mejor usar hojas de estilo externas.

El hecho es que esto permite que las páginas de su sitio se carguen un poco más rápido. Quizás por una fracción de segundo, pero más rápido. Este reduce la carga en su sitio y más conveniente para sus visitantes: tendrán que esperar menos a que se carguen las páginas.

Por qué está pasando esto.

Si los estilos CSS de su sitio están en un archivo separado, entonces el navegador del usuario no necesita cargar estos estilos cada vez que se carga una nueva página. Los descarga una vez, los coloca en el caché (un área de memoria en la computadora del visitante) y cuando se carga la siguiente página, toma los estilos de allí.

Hay dos formas de adjuntar archivos de hojas de estilo CSS a una página web.

El primer método, el más común, es utilizar la etiqueta con atributos: rel = "stylesheet" type = "text/css" href = "style file.css" dentro del código del encabezado de la página (etiqueta ).

Por ejemplo:

1 2 3 4

<cabeza > ..... <enlace rel = "hoja de estilo" tipo = "texto/css" href = "estilo.css" > </cabeza>

Este ejemplo adjunta estilos CSS escritos en el archivo style.css a la página. Son válidos durante todo el documento.

hay otra manera adjuntar hojas de estilo externas a HTML documento. Esto está usando la directiva @import. Le permite importar el contenido de un archivo CSS a la hoja de estilo actual.

Puedes usarlo tanto para agregar unas hojas de estilo a otras como para adjuntar un archivo de hoja de estilo a un documento HTML. Para hacer esto, debes escribirlo dentro de la etiqueta. (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:ninguna)
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 sea "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 Código HTML en el cuerpo de una etiqueta de página web. Ejemplo:

  Texto amarillo con fuente Verdana

  
  
  

  Podría ser así:

  Entre etiquetas Se prescriben las reglas CSS necesarias para la página web.
  La desventaja de este método es que estos estilos solo serán para una página donde se encuentran.

  Rumbo H2

  
  
  

  Resultado:

  

  En el ejemplo anterior, cambié el tamaño y el color del encabezado H2 usando una hoja de estilos CSS.

  ○ Método No. 3 – “Estilos internos”

  Utilizo el método n.º 3 en casos excepcionales, por ejemplo, para cambiar una sola etiqueta en una página web. Para conectar un estilo a cualquier etiqueta, debe especificar el parámetro de estilo.

  Style="habrá reglas CSS aquí"

  Rumbo H2

  
  
  

  Resultado:

  

  En el ejemplo anterior, cambié el tamaño y el color del encabezado H2 usando estilos CSS.

  ○ Método de conexión de estilo combinado

  Los tres métodos se pueden combinar.

  Título

  Título

  
  
  

  ¡Eso es todo por hoy! Espero verte en las próximas lecciones.
  ¡Suscríbete a las actualizaciones del blog!

  Publicación anterior
  Próxima entrada

  En el primer capítulo, aprendiste que el diseño de un sitio web se crea utilizando CSS. Para comprender mejor qué se debe utilizar y por qué, veamos un ejemplo ilustrativo. Piense en HTML como el marco estructurado en blanco y negro de una casa sin ningún tipo de decoración, y CSS es lo que utilizamos para crear una apariencia única.

  Como puedes ver, la casa de la derecha ahora tiene colores, materiales y decoraciones adicionales. Lo mismo sucede en una página web: con la ayuda de reglas CSS, aparecen colores y sangrías, el estilo de fuente y el tamaño de los elementos cambian y se crea un estilo completo.

  hoja de estilo sencilla

  Echemos un vistazo a cómo se ve la hoja de estilo más básica y en qué elementos se compone. Este es un ejemplo de estilo CSS para todas las etiquetas.

  Los cuales están en la página web:

  ¿Cómo será el texto ahora?

  En el navegador y ¿qué significa cada línea? Es muy simple: la fuente tendrá un estilo y color en negrita #1E824C (código de color hexadecimal) y se mostrará en 1em (una unidad relativa igual al tamaño de fuente predeterminado en el navegador).

  
  

  El estilo descrito anteriormente, como cualquier otro, incluye un conjunto de elementos que tienen sus propios nombres. Recuérdalos para que cuando leas los siguientes capítulos entiendas lo que está pasando.

  Selector Al especificarlo, le decimos al navegador a qué queremos aplicar exactamente el estilo. En nuestro caso, el selector es la p. Bloque de declaración Este es el nombre de todo el contenido ubicado entre las llaves () después del selector. Propiedad de estilo Este es un comando que especifica la opción de formato deseada (por ejemplo, desea cambiar el estilo de fuente peso de fuente, color color, tamaño de fuente tamaño de fuente, etc.). Se deben colocar dos puntos después del nombre de la propiedad. Aprenderá más sobre las propiedades CSS más adelante. Valor de la propiedad Después de los dos puntos, se escribe el valor de la propiedad en sí, que usted mismo define, creando así su propio estilo. Dependiendo de la propiedad, debe especificar el valor apropiado.

  Por ejemplo, el estilo de fuente se especifica mediante las palabras clave negrita, más negrita, etc., el color se especifica mediante un valor hexadecimal, RGB(A), HSL(A) o las palabras clave rojo, naranja, blanco, etc., el tamaño de fuente se especifica mediante CSS unidades (porcentaje) % , píxeles píxeles, puntos pt, altura de fuente em) o constantes pequeñas , medianas , grandes , etc. Después de especificar el valor de la propiedad, se coloca un punto y coma.
  
  

  Debido a que CSS es insensible a los saltos de línea, los espacios, las tabulaciones y las mayúsculas y minúsculas, puede formatear su código de manera que sea fácil de leer y editar más adelante. Por ejemplo, podríamos escribir el código anterior en una línea:

  P (peso de fuente: negrita; color: #1E824C; tamaño de fuente: 1em;)

  También funciona, pero ¿es fácil de entender? Especialmente cuando el código CSS es bastante largo. Eso sí, no estaría de más separarlo al menos con espacios. Hay varias reglas de buenos modales y, si las aprende de inmediato, se dirá "gracias" en el futuro.

  Muy a menudo, al describir un estilo, se utiliza una forma compacta de notación, en la que todas las propiedades de un selector se indican en un bloque:

  P (peso de fuente: negrita; color: #1E824C; tamaño de fuente: 1em;)

  Y esta forma de notación es muy engorrosa, aunque funciona:

  P (peso de fuente: negrita;) p (color: #1E824C;) p (tamaño de fuente: 1em;)

  Para facilitar la navegación por el código, se recomienda escribir cada propiedad en una nueva línea y utilizar tabulaciones o espacios al enumerar propiedades. A veces hay un espacio entre los dos puntos y el valor de la propiedad, pero usted decide qué prefiere.

  Para mayor comodidad, puede agregar comentarios directamente en CSS. En ellos podrás escribir explicaciones y notas que te ayudarán a navegar por las hojas de estilo.

  Los comentarios en CSS se escriben entre los caracteres /* y */. No se muestran en la página web en el navegador y solo son visibles en el código. Los desarrolladores también suelen utilizar comentarios para ocultar secciones de código CSS temporalmente innecesarias. Los comentarios se ven así:

  /* Estilo del cuerpo del texto */ p (peso de fuente: negrita; color: #1E824C; tamaño de fuente: 1em;)

  Hojas de estilo internas y externas.

  Una vez que haya creado una hoja de estilo, puede elegir cómo adjuntarla a su página web. Hay dos opciones para las tablas: internas, que se agregan directamente a la página, y externas, que se encuentran en un archivo separado con la extensión .css y se conectan a la página mediante un enlace.

  Las hojas de estilo internas están escritas en un documento HTML entre etiquetas.. Debe agregar una hoja de estilo a cada página web. Si el sitio tiene una gran cantidad de páginas que requieren el mismo diseño, agregar y editar estilos se convierte en un trabajo ingrato: el proceso llevará mucho tiempo. Por lo tanto, las hojas de estilo internas se consideran inconvenientes.

  Las hojas de estilo externas son mucho más comunes. Solo necesita conectar la tabla a todas las páginas web necesarias usando la etiqueta con el atributo rel (define la relación entre la página y el archivo incluido) y el valor de la hoja de estilo, lo que significa que el archivo incluido contiene una hoja de estilo. El atributo href es la ruta (URL) a su archivo .css:

  Al editar solo un archivo, puedes cambiar el estilo de todo el sitio a la vez, independientemente de cuántas páginas haya. Esto es muy conveniente, especialmente para grandes recursos.

  Lección: crear una hoja de estilo

  Dado que las hojas de estilo externas son las más convenientes y más utilizadas en el desarrollo de diseños, aprenderemos cómo crearlas. Puede descargar el archivo con los archivos de esta lección en esta página.

  En la carpeta encontrará un documento HTML con un ejemplo de una página simple y una imagen (para usar en el tutorial). Abra el documento HTML en su navegador. Verás que la página se ve completamente normal. Para darle un aspecto más atractivo, vamos a diseñarlo.

  Por ahora, no es necesario profundizar demasiado en lo que significa un fragmento de código determinado. Ahora necesitas entender el principio de funcionamiento. Empecemos.

  Conectando CSS a HTML

  Para comenzar, abra cualquier editor de texto en su computadora (el bloc de notas servirá) y cree un archivo vacío llamado estilo, guardándolo con la extensión .css (debería terminar con un archivo estilo.css). Guarde el archivo en la carpeta donde se encuentra el documento HTML descargado.

  Abra el documento HTML en un editor de texto, así como en un navegador (para ver fácilmente los cambios en la apariencia de la página). Agregar entre etiquetas el siguiente código:

  Resume brevemente lo que acabas de hacer. Al pegar este código en su documento HTML, usted:

  • proporcionó un enlace a una fuente llamada Roboto Condensed, que se tomará del servidor de Google (le contaremos más sobre las fuentes de Google más adelante);
  • conectó nuestra hoja de estilo externa style.css (vacía por ahora).

  Escribir estilo CSS

  Guarde los cambios en el documento HTML y vaya al archivo .css vacío que creó. Agreguemos algo de estilo a la página:

  Html ( padding-top: 5px; imagen de fondo: url(fondo.jpg); )

  Guarde sus cambios. Felicitaciones, ha escrito su primera regla: se trata de la etiqueta. . La primera propiedad, padding-top, agregará un relleno superior de 5 píxeles entre la ventana del navegador y el contenido de la página web. Con la segunda propiedad, imagen de fondo, has incluido una imagen para el fondo de toda la página especificando la ruta al archivo gráfico (ubicado en la misma carpeta que el documento HTML).

  Actualiza la página web abierta en tu navegador. Si todo se hace correctamente, verá que ha aparecido un fondo en la página y el espacio entre la parte superior de la ventana y el texto ha aumentado ligeramente.

  Cuerpo (ancho: 75%; relleno: 40px; margen: 15px automático; color de fondo: #EBEBEB; radio de borde: 30px;)

  Guarde los cambios en el archivo. Ahora tu:

  • establecer el área para el contenido de la etiqueta , que equivale al 75% del ancho de la ventana del navegador;
  • proporcionó un margen de 40 píxeles desde todos los lados del área de contenido;
  • posicionó el área en el centro de la página y también hizo una sangría en la parte superior e inferior de 15 píxeles;
  • establezca el color de fondo #EBEBEB para el área de contenido;
  • redondeó las esquinas del área rectangular, especificando un radio de redondeo de 30 píxeles.

  Actualice el documento HTML nuevamente. Al mismo tiempo, asegúrese de que el caché esté deshabilitado o vuelva a cargar la página con todos los archivos asociados actualizados, usando una combinación de teclas especial (por ejemplo, para Chrome esto es Ctrl+F5).

  Verá que se ha agregado un área rectangular con esquinas redondeadas en el centro de la página. Este es el resultado de sus acciones en el archivo CSS. También puedes intentar hacer la ventana de tu navegador más pequeña y admirar cómo el ancho del área rectangular se ajusta a su tamaño. Esto se debe al hecho de que el ancho se especifica como porcentaje.

  Cambiar la fuente usando CSS

  Es hora de decorar nuestro texto. Agregue este código a su hoja de estilo y guarde sus cambios:

  H1 (color: #E87E04; tamaño de fuente: 2em; margen izquierdo: 20px; familia de fuentes: "Roboto Condensed", sans-serif;) h2 (color: #E87E04; tamaño de fuente: 1,7em; margen izquierdo : 20px; familia de fuentes: "Roboto Condensed", sans-serif; ) p (color: #22313F; altura de línea: 150%; margen superior: 20px; margen izquierdo: 20px; familia de fuentes: "Roboto Condensed" ", sans-serif; )

  Habiendo escrito esto, configuró los colores de fuente para las etiquetas h1, h2, p, indicó sus tamaños, agregó un margen desde el borde izquierdo de 20 píxeles y, además, para

  Sangramos la parte superior en 20 píxeles y configuramos la altura de línea (interlineado del texto) en un 50% más grande que el estándar. Además, conectó la fuente Roboto Condensed a las tres etiquetas (es por eso que tuvo que proporcionar un enlace en el archivo HTML desde el principio).

  Actualiza la página en tu navegador y admira el resultado. En este tutorial intentaremos una cosa más. Agregue este código a CSS:

  Énfasis (peso de fuente: negrita;)

  Guarde y actualice la página en su navegador. Verás que en el último párrafo la fuente se ha puesto en negrita en algunas partes del texto. Para comprender lo que sucedió, vaya a la ventana del editor de texto donde abrió el archivo HTML al principio. Mira el último párrafo: parte de la oración está envuelta en una etiqueta. con la clase de énfasis. De esta manera habrás escrito un estilo para una sola línea de texto en un párrafo. Hablaremos más sobre las clases en el próximo capítulo.

  Deberías terminar con una página como esta:

  
  
  

  Como práctica, intente cambiar el tamaño del texto para

  (digamos 1,1 em), y también aumentar el espacio entre

  Y el borde izquierdo del área de contenido en otros 10 píxeles.

  conclusiones

  Este capítulo analizó la sintaxis de CSS y cómo crear una hoja de estilo básica. Aprendiste cómo incorporar CSS en una página HTML y cómo crear estilos simples. Resaltemos las cosas principales que debe recordar de este capítulo:

  Cualquier estilo CSS consta de varios elementos: un selector, una propiedad de estilo y el valor de esta propiedad.

  Todas las propiedades y sus valores se escriben en un bloque de declaración entre dos llaves () después de especificar el selector.

  Debe seguir cuidadosamente las señales: dos llaves (que se abren al principio del bloque de anuncios y se cierran al final). Sin estos corchetes, CSS no funcionará correctamente.

  Es necesario colocar dos puntos después de la propiedad y un punto y coma después del valor.

  Para mayor comodidad y mejor legibilidad de su código CSS, escriba cada propiedad en una nueva línea y no escatime en espacios y tabulaciones.