Es bueno que me dedique al autodesarrollo.

Puedo aprender CSS en un mes o menos

Paso 4: ver la página HTML en un navegador

Abra el ejemplo en un navegador y asegúrese de que el resultado de nuestro ejemplo coincida con la imagen:

Conexión de una hoja de estilo externa

Ahora crearemos un archivo separado que contendrá una hoja de estilo y lo conectaremos a nuestro documento HTML Ud.

1. EN programa de bloc de notas++ crear uno nuevo archivo vacío y guárdelo con el nombre page.css (al guardar el archivo debe seleccionar Hojas de estilo en cascada *.css) en la misma carpeta donde creó el documento HTML.
2. Mueva el código CSS del ejemplo anterior (el contenido de la etiqueta

   ¡Hola Mundo!

   
   
   
   
   Este ejemplo define un estilo de etiqueta.

   , que luego se puede utilizar en una página web determinada.

   Comentario

   La hoja de estilo global se puede colocar no solo dentro del contenedor , pero también en cualquier parte del código del documento HTML.
   Estilos internos

   El estilo interno es esencialmente una extensión de etiqueta única utilizado en una página web. El parámetro de etiqueta de estilo se utiliza para definir un estilo y sus atributos se especifican mediante un lenguaje de hoja de estilo; consulte el Ejemplo 4.

   Ejemplo 4: uso de estilos internos
   

   Título

   
   
   
   
   En este ejemplo, el estilo de etiqueta

   se especifica utilizando el parámetro de estilo, que enumera los atributos de estilo separados por punto y coma.

   Comentario

   Se recomienda utilizar estilos internos en un sitio web sólo con moderación o no utilizarlos en absoluto. El hecho es que agregar estos estilos aumenta el tamaño total de los archivos, lo que aumenta el tiempo de carga en el navegador y dificulta la edición de documentos para los desarrolladores.

   Todos los métodos descritos usando CSS se pueden utilizar de forma independiente o en combinación entre sí. En este caso, conviene recordar su jerarquía. El estilo interno siempre se aplica primero, luego la hoja de estilo global y por último la hoja de estilo asociada. El ejemplo 5 utiliza dos métodos para agregar hojas de estilo a un documento.

   Ejemplo 5. Combinación diferentes metodos conectando estilos
   

   "tamaño de fuente: 36px; familia de fuentes: Times, serif; color: rojo"> Título 1

   Título 2

   
   
   
   
   En este ejemplo, el primer encabezado se establece en rojo de 36 píxeles mediante un estilo interno y el siguiente encabezado se establece en verde mediante una hoja de estilo global.

   Importar CSS

   Puede importar el contenido de un archivo CSS a la hoja de estilo actual usando el comando @import. Este método se puede utilizar junto con una hoja de estilo global o vinculada, pero no con estilos en línea. La sintaxis general es la siguiente.

   @URL de importación ("nombre de archivo") tipos de medios;@importar tipos de medios "nombre de archivo";

   Después palabra clave@import especifica la ruta al archivo de estilo de dos maneras: usando la directiva url o sin ella. El ejemplo 6 muestra cómo importar un estilo desde archivo externo a la hoja de estilo global.

   Ejemplo 6: importar CSS a una hoja de estilo global
   

   Título 1

   Título 2

   
   
   
   
   Este ejemplo muestra la conexión del archivo header.css, que se encuentra en la carpeta de estilos.

   El tercer artículo de la serie "Conectando CSS" está dedicado a hojas de estilo externas. Usar tablas externas es la forma más flexible, poderosa, conveniente y la manera correcta conectar HTML y .

   La esencia del método es que el CSS se coloca en un archivo (o archivos) separado. Y el HTML especifica qué archivos CSS se le deben aplicar.

   Presentamos una mesa externa

   Una hoja de estilo externa es un archivo de texto normal con extensión CSS. En general, esta extensión no es necesaria, pero es muy recomendable para evitar problemas con algunos navegadores especialmente antiguos.

   El archivo de hoja de estilo sólo debe contener reglas y Comentarios CSS. La presencia de marcado HTML en una hoja de estilo externa, por ejemplo, puede hacer que se ignoren algunas partes o la hoja de estilo completa.

   Etiqueta de enlace para hojas de estilo externas

   La etiqueta se utiliza para incluir CSS externo.

   Encuéntrame, etiqueta de enlace:

   • establece contacto con documentos externos, normalmente con hojas de estilo;
   • debe estar ubicado en la sección ;
   • Puede haber varias etiquetas de enlace en un documento.

   Ejemplos de conexión CSS

   Normalmente se utilizan tres atributos:

   • — es responsable de establecer la relación y en este caso tiene el significado de “hoja de estilo”;
   • — Tipo MIME del objeto conectado. Para nosotros, esta es una hoja de estilo: significa que el tipo es “texto/сss”;
   • - absoluto o ruta relativa al propio archivo CSS.

   También es posible conectar CSS individuales según el dispositivo de visualización. Para ello se utiliza el atributo media. Se pueden encontrar más detalles sobre sus significados en.

   Un ejemplo de cómo conectar una hoja de estilo adicional para dispositivos de impresión:

   Un ejemplo de cómo conectar CSS usando (es decir, 6.css solo se conectará si la página se ve usando un navegador identificado como IE6):

   Ventajas del CSS externo

   Además del hecho de que todas las reglas están claramente agrupadas en un archivo separado y son fáciles de encontrar y, si es necesario, editar, las tablas externas tienen una serie de ventajas importantes en comparación con . Por ejemplo:

   1. El mismo archivo CSS puede "servir" tantas páginas HTML como desee. La cantidad de HTML se reducirá, haciendo cambios comunes a todas las páginas del sitio será mucho más sencillo.
   2. Las reglas se pueden dividir en bloques lógicos(estilos generales, estilos para secciones específicas del sitio), colóquelos en varios archivos CSS diferentes y, por ejemplo, páginas individuales, conecta sólo aquellos que necesites. Sólo tenga en cuenta que esto es un arma de doble filo: por un lado, tenemos tamaño más pequeño CSS conectado (archivos innecesarios los estilos no están cargados), por otro lado - más archivos pequeños con estilos significa más llamadas al servidor, lo que, por supuesto, no tendrá un efecto muy bueno en el rendimiento.
   3. Puede seleccionar estilos para navegadores específicos y conectarlos usando comentarios condicionales. Esto se utiliza para controlar a los navegadores especialmente testarudos. Es cierto que utilizando comentarios condicionales también puede conectar una tabla anidada, pero dicho diseño parecerá realmente engorroso.

   Reanudar

   Usar hojas de estilo externas es la forma más conveniente e inteligente de unir HTML y CSS. Espero que la conclusión sea clara. EN proyectos reales Utilice hojas de estilo externas.

   Hay varias formas de agregar estilos a una página web, que difieren en sus capacidades y propósito. Veámoslos con más detalle a continuación.

   Hoja de estilo externa

   Los estilos se encuentran en un archivo separado con la extensión css; el elemento se utiliza para vincular el documento HTML con el archivo CSS; . Se encuentra dentro , como se muestra en el ejemplo 1.

   Ejemplo 1. Conexión de estilos externos

   Título

   
   
   

   El valor del atributo rel. Siempre habrá una hoja de estilo y permanecerá sin cambios. El valor href es la ruta al archivo CSS; la ruta se puede especificar relativa o absoluta. Tenga en cuenta que de esta manera puede conectar una hoja de estilo que se encuentra en otro sitio. En el ejemplo anterior conectamos la fuente cirílica Lobster del sitio web Fuentes de Google.

   El contenido del archivo style.css se muestra en el Ejemplo 2.

   Ejemplo 2: Contenido del archivo style.css

   H1 (familia de fuentes: "Lobster", cursiva; color: verde; )

   Como puede ver en este ejemplo, el archivo de estilo es normal. archivo de texto y contiene sólo sintaxis CSS. A su vez, el documento HTML contiene sólo un puntero al archivo con el estilo, de esta forma se implementa plenamente el principio de separación entre código y diseño del sitio. Por lo tanto, utilizar una hoja de estilo externa es el método más versátil y conveniente para agregar estilo a un sitio. Esto permite la edición independiente. archivos HTML y CSS.

   Hoja de estilo interna

   Los estilos se escriben en el propio documento HTML, dentro del elemento.

   Título

   
   
   

   En este ejemplo, el estilo del elemento se establece en

   , que luego se puede utilizar en una página web determinada (Figura 1). Tenga en cuenta que podemos combinar de forma segura con

   Título 1

   Título 2

   
   
   

   En este ejemplo, el primer encabezado está configurado en rojo y el tamaño es de 36 píxeles usando el atributo de estilo, y el segundo encabezado está configurado en rojo. verde a través del elemento

   Título 1

   Título 2

   
   
   

   Este ejemplo muestra la importación. archivo de estilo desde el sitio web de Google Fonts para conectarse fuente cirílica Langosta.