Adjuntando CSS. Hay dos formas de adjuntar archivos de hojas de estilo CSS a una página web. Usando la directiva @import
Ahora es difícil imaginar cambiar la apariencia y el formato de los documentos HTML sin utilizar hojas de estilo CSS, ya que HTML hace tiempo que dejó de ser un lenguaje de diseño autosuficiente y comenzó a realizar sus funciones originales de estructurar y marcar documentos web. En este artículo, detallaremos las formas en que puedes incorporar CSS en un documento HTML.
Brevemente sobre CSS y HTML
Anteriormente, las páginas web se diseñaban exclusivamente utilizando HTML. Hoy en día, este enfoque no se practica y para el estilo se utilizan herramientas CSS, que tienen posibilidades muy amplias para crear diseños impresionantes.
Para que el diseño del sitio se muestre correctamente, es necesario conectar CSS al documento HTML; estas herramientas funcionan de forma inseparable entre sí: HTML crea la estructura y las hojas de estilo son responsables de la apariencia.
Hay varias formas básicas de personalizar la visualización de estilos en su código HTML, cada una con sus pros y sus contras.
Conectando el archivo CSS
Este es el método principal que los desarrolladores consideran el más práctico y conveniente.
Con este método, puede cambiar rápidamente el diseño de una página web si existe una estructura determinada del documento HTML; por ejemplo, para el mismo sitio puede escribir varias opciones de diseño y conectarlas según la necesidad correspondiente.
Para incluir un archivo con estilos, primero debe configurar la estructura del archivo; esto se hace para que pueda escribir la ruta correcta al documento deseado directamente en el código.
Crea un directorio donde se ubicará el documento HTML principal, en la misma carpeta crea un archivo llamado estilo en un editor de texto y guárdalo en resolución .css. Contendrá código CSS con todas las reglas de estilo de documento especificadas.
La conexión CSS se realiza mediante una etiqueta HTML. con el atributo href. Se parece a esto:
Aquí el código se ubica en lo que se considera óptimo, pero no obligatorio. Puede ubicarse en cualquier parte del documento.
Este método es conveniente porque todos los cambios en la hoja de estilo se realizan en un archivo separado, lo que hace que el código sea más fácil de entender y leer y hace que el documento sea más ordenado.
Si realiza cambios en style.css y abre index.html en el navegador, podrá ver todos los cambios que se han ingresado.
De la misma manera, puede establecer no solo la ruta al archivo en la estructura del sitio, sino también un enlace a la página con el estilo ubicada en Internet. En este caso, también cabe entre comillas después del atributo href.
El método de incluir una hoja de estilo de un archivo separado optimiza el rendimiento del sitio, ya que permite que el navegador cargue datos desde el caché, como resultado de lo cual las páginas se cargan más rápido.
Hojas de estilo dentro de un documento HTML
A veces, el valor de un parámetro de estilo se establece directamente en el cuerpo del documento HTML mediante el atributo de estilo.
Sintaxis:
El texto de este párrafo es rojo.
El inconveniente obvio es la falta de universalidad; tendrás que especificar un valor para cada etiqueta.
Además, la conexión mediante hojas de estilo internas no permite que el navegador almacene información en caché, a diferencia del método anterior.
Estilo global
Si necesita aplicar estilo a un elemento específico en un documento HTML, use la etiqueta
El estilo especificado se aplicará a la etiqueta.
, tan pronto como esté registrado en la página.
Incluir CSS de esta manera será leído por el navegador con mayor prioridad que la hoja de estilo externa.
Cómo agregar una fuente a un sitio web
La fuente es uno de los principales elementos de diseño de cualquier página web. La impresión que un sitio web produce en un usuario depende directamente de la fuente utilizada. Afortunadamente, no tienes que limitarte a los auriculares estándar; puedes conectar otros; te diremos cómo se hace.
Usando CSS, las fuentes se conectan de la siguiente manera:
- Busque y descargue unos auriculares adecuados.
- Abra el archivo CSS y escriba el siguiente código en él:
Primero se especifica el nombre de la fuente, luego la ruta a la misma y finalmente los parámetros. Tenga en cuenta que en este ejemplo, el archivo de fuente se encuentra en la carpeta de fuentes, que, a su vez, se encuentra en el directorio raíz. Por conveniencia, es mejor crear carpetas separadas para varios archivos y elementos (imágenes, scripts, hojas de estilo, etc.).
Así, en la carpeta de fuentes tenemos un archivo llamado OpenSans.ttf, con los parámetros habituales. Ahora se mostrará en el navegador.
Conexión de la fuente a través de Google Fonts
Una de las formas más comunes de incluir fuentes en CSS y HTML es el servicio Google Fonts.
La interfaz es intuitiva: debe encontrar una fuente adecuada por nombre o parámetros específicos, hacer clic en el botón Seleccionar esta fuente y el servicio genera instantáneamente un código que se inserta en el campo de etiqueta.
Documento HTML, así como el correspondiente archivo CSS con estilos.Cómo debería verse en HTML:
Y en el archivo CSS con estilos:
Familia de fuentes: "Open Sans", sans-serif;
Este método es conveniente porque le permite encontrar rápidamente la fuente deseada en una base de datos muy grande y ahorra mucho tiempo, además de eliminar los problemas que surgen debido a la visualización incorrecta de las fuentes en algunos navegadores.
resumámoslo
Entonces, analizamos las formas principales de conectar estilos CSS a documentos HTML. En función de las tareas marcadas para el desarrollador en cada caso concreto, se puede elegir la opción de mayor prioridad.
Diseñar páginas web es un proceso creativo que requiere, sin embargo, un enfoque cuidadoso. Aproveche la posibilidad de comentar el código y no se olvide de la optimización del sitio web.
Cualquier documento HTML, sin importar cuántos elementos contenga, esencialmente estará "muerto" sin el uso de estilos. Estilos o mejor aún hojas de estilo en cascada(Hojas de estilo en cascada) o simplemente CSS determinar la presentación del documento, su apariencia. Echemos un vistazo rápido al uso de estilos en el contexto de HTML5.
Un estilo en CSS es una regla que le indica al navegador web cómo formatear un elemento. El formato puede incluir configurar el color de fondo del elemento, configurar el color y el tipo de fuente, etc.
Una definición de estilo consta de dos partes: un selector, que apunta a un elemento, y un bloque de declaración de estilo, un conjunto de comandos que establecen reglas de formato. Por ejemplo:
Div(color de fondo:rojo; ancho: 100px; alto:60px; )
En este caso el selector es div. Este selector especifica que este estilo se aplicará a todos los elementos div.
Después del selector, hay un bloque de declaración de estilo entre llaves. Entre las llaves de apertura y cierre, se definen comandos que indican cómo formatear el elemento.
Cada comando consta de una propiedad y un valor. Así, en la siguiente expresión:
Color de fondo: rojo;
El color de fondo representa la propiedad y el rojo representa el valor. La propiedad define un estilo específico. Hay muchas propiedades CSS. Por ejemplo, color de fondo especifica el color de fondo. Después de los dos puntos viene el valor de esta propiedad. Por ejemplo, el comando anterior establece la propiedad color de fondo en rojo. En otras palabras, el color de fondo del elemento se establece en “rojo”, es decir, rojo.
Después de cada comando hay un punto y coma, que separa este comando de los demás.
Los conjuntos de estos estilos suelen denominarse hojas de estilo o CSS(Cascading Style Sheets u hojas de estilos en cascada). Hay diferentes formas de definir estilos.
atributo de estilo
La primera forma es incrustar estilos directamente en el elemento usando el atributo de estilo:
Estilos
Hay dos elementos definidos aquí: encabezado h2 y bloquear div. El título tiene un color de texto azul definido mediante la propiedad de color. en el bloque div las propiedades de ancho están definidas ( ancho), altura ( altura), así como el color de fondo ( color de fondo).
La segunda forma es utilizar el elemento de estilo en el documento html. Este elemento le dice al navegador que los datos que contiene son código CSS y no HTML:
Estilos
Ya no hay un elemento aquí. estilo, pero hay un elemento enlace, que incluye el archivo creado anteriormente estilos.css:
Así, al definir estilos en un archivo externo, hacemos que el código html sea más limpio, separando la estructura de la página de su estilo. Cuando se definen de esta manera, los estilos son mucho más fáciles de modificar que si se definieran dentro de elementos o dentro de un elemento. estilo, y este método es el preferido en HTML5.
El uso de estilos en archivos externos le permite reducir la carga en el servidor web mediante un mecanismo de almacenamiento en caché. Debido a que el navegador web puede almacenar en caché el archivo CSS y la próxima vez que se acceda a la página web, podrá recuperar el archivo CSS deseado del caché.
También es posible que todos estos enfoques se combinen y, para un elemento, algunas propiedades CSS se definan dentro del propio elemento, otras propiedades CSS se definan dentro del elemento de estilo y otras estén en un archivo externo incluido. Por ejemplo:
Y en el archivo style.css se define el siguiente estilo:
Div (ancho: 50 px; alto: 50 px; color de fondo: rojo;)
En este caso, el elemento div tiene una propiedad de ancho definida en tres lugares, con valores diferentes. ¿Qué valor se aplicará al elemento al final? Aquí tenemos el siguiente sistema de prioridades:
- Si un elemento tiene estilos integrados (estilos en línea) definidos, entonces tienen la máxima prioridad, es decir, en el ejemplo anterior, el ancho final será de 120 píxeles.
- Los siguientes en orden de prioridad son los estilos que se definen en el elemento de estilo.
- Los estilos de menor prioridad son los definidos en un archivo externo.
Atributos HTML y estilos CSS.
Muchos elementos html le permiten configurar estilos de visualización mediante atributos. Por ejemplo, para varios elementos, podemos usar los atributos ancho y alto para establecer el ancho y alto del elemento, respectivamente. Sin embargo, se debe evitar este enfoque y se deben utilizar estilos CSS en lugar de atributos en línea. Es importante entender claramente que el marcado HTML debe proporcionar sólo la estructura del documento HTML, y toda su apariencia y estilo deben estar determinados por los estilos CSS.
Validación de código CSS
En el proceso de escribir estilos CSS, pueden surgir dudas sobre si es correcto definir estilos de esta manera y si son correctos. Y en este caso podemos usar el validador css, que está disponible en http://jigsaw.w3.org/css-validator/.
Aquí hay un video tutorial sobre cómo conectar CSS a HTML.
CSS significa "hojas de estilo en cascada" (del inglés Cascading Style Sheets). CSS es un conjunto de parámetros que se utilizan para mostrar un elemento particular en una página web. Estos parámetros se pueden especificar en un archivo separado o escribirse directamente en el código HTML de la página. Por ejemplo, en nuestra página web pueden existir los siguientes elementos: título del artículo, párrafos, citas, notas al pie, imágenes, vídeos, enlaces. Puede establecer un estilo de visualización específico: tamaño, color, grosor del marco, etc.
Cuando se trabaja con un sitio web, se recomienda utilizar un archivo separado con estilos, en lugar de incrustar código con configuraciones de estilo en páginas individuales. Esto reducirá significativamente el tiempo: cuando conozca la ubicación de la hoja de estilo, siempre podrá encontrar rápidamente un estilo específico y editarlo. El archivo de estilo tiene la extensión .css, su nombre suele ser estilo.css.
Conectando el archivo CSS
Hay varias formas de incluir un archivo CSS. Hablaremos de dos métodos que se utilizan con mayor frecuencia al crear sitios web:
1. Vinculación. Este método se utiliza cuando necesita configurar estilos para todas las páginas de un sitio en un archivo. Este método se utiliza a menudo al crear un sitio web. Para conectar la hoja de estilo use el comando , que debe colocarse en el cuerpo de la etiqueta.
.Las dos primeras propiedades indican al navegador que el sitio utiliza CSS, luego se indica la dirección del archivo de la hoja de estilo.
2. Incrustar etiquetas en documentos. Con este método, el estilo de un elemento de página específico se establece directamente en el código HTML. Por ejemplo:
Aquí hemos especificado estilos para los contenedores en consecuencia.
Pongamos un ejemplo de una hoja de estilo: cree un archivo estilo.css y escribe los estilos:
body ( font-family: Arial, Verdana, Sans-serif; /* Familia de fuentes */ font-size: 12pt; /* Tamaño de fuente del cuerpo en puntos */ background-color: #f0f0f0; /* Color de fondo de la página web * / color: #000000; /* Color del cuerpo del texto */ ) h1 ( color: #a52a2a; /* Color del encabezado */ tamaño de fuente: 24pt; /* Tamaño de fuente en puntos */ familia de fuente: Georgia, Times, serif ; /* Familia de fuentes */ font-weight: normal /* Estilo de texto normal */ )
Aquí hemos establecido estilos para el cuerpo de la página.
y por el titulo. También puede establecer estilos específicos para cualquier otro elemento de la página de su sitio web.
Ahora conectemos nuestra hoja de estilo al sitio:
Conectando CSS al sitio ¡Hola Mundo!
Esta es mi primera página con estilos CSS.
Entonces lo descubrimos ¿Qué es CSS? por qué se utiliza esta tecnología, aprendí cómo conectar estilos al sitio. Esta lección es una especie de introducción a las hojas de estilo en cascada. En otras lecciones hablaremos más detalladamente sobre la tecnología CSS.
Así que continuamos lecciones html para principiantes. En la última lección, hablé sobre la etiqueta HEAD y cómo configurar la codificación HTML de una página, así como especificar palabras clave y una descripción para la misma. ¿Qué aprenderemos hoy? En este tutorial aprenderemos cómo incluir estilos en una plantilla. Más detalles a continuación.
¿Cómo incluir estilos de diseño en una plantilla? Para empezar, aprendamos sobre ¿Qué son los estilos CSS?. Los estilos de diseño CSS son una herramienta de diseño para páginas WEB escritas con lenguajes de marcado HTML, XHTML y XML. Se pueden especificar, como en el propio documento HTML, o conectarse externamente, es decir. describir en un archivo separado. Propongo considerar tanto el primer como el segundo método. Casi todo páginas web y sitios web utilizar estilo CSS.
1. El método para conectar estilos de diseño CSS es dentro del documento HTML o conectar estilos internos.
Si los estilos no se especifican en un archivo separado, deben especificarse en el documento dentro de la etiqueta.
. Un ejemplo de cómo conectar estilos CSS dentro de un documento:
.....
Estilos conectados de esta manera. válido en todo el documento, pero ¿qué pasa si necesitas especificarlos para un solo bloque? Puede describir estilos dentro de un bloque (etiqueta) específico utilizando el atributo de esta etiqueta: estilo. Un ejemplo de cómo conectar estilos para una etiqueta:
Texto aleatorio tamaño 15 y color rojo.
Los estilos descritos de esta manera son no afecta otras etiquetas de documentos.
2. Un método que le permite conectar estilos de otro archivo o conectar estilos de diseño externos.
Si tiene estilos en un archivo separado, debe conectarlos con una línea especial. Para especificar estilos para todo el documento HTML, usaremos la etiqueta , que debe estar ubicado dentro de la etiqueta del que hablé en . Un ejemplo de tal conexión:
La ruta al archivo que contiene los estilos se indica en esta parte de la etiqueta: href="style.css" entre comillas. El ejemplo incluye un archivo de estilo que se encuentra en la misma carpeta que el documento HTML.
También puede conectar estilos externos de otra manera: con una directiva @import especial, que se incluye dentro de la etiqueta. . Conexión de ejemplo usando directiva @importar:
.....
archivo de estilo css, o más bien la ruta hacia él, en este método se indica entre paréntesis.
Las conexiones de estilo que se describieron en el segundo método deben ubicarse entre las etiquetas. .
Si necesita incluir estilos CSS para un documento XML, debe utilizar la siguiente línea:
En este método de conexión, la ruta al archivo con estilos se indica entre comillas.
¡La lección ha terminado por hoy! ¡Feliz diseño y nuevos conocimientos!
¿Quieres ir a Europa? ¿Necesitas
Hojas de estilo externas
Creemos una página HTML normal con el siguiente código:
encabezado de primer nivel
Sólo envía un mensaje de texto aquí
título de segundo nivel
Sólo envía un mensaje de texto aquí
Ahora crea un documento en blanco en el Bloc de notas. estilo.css y guárdelo en la misma carpeta donde se encuentra la página html:
Esta es nuestra página de estilos. Conectemos estilos (style.css) a la página html. Hay una etiqueta en html. , que se encarga de conectar archivos externos. Agregar a la página html:
encabezado de primer nivel
Sólo envía un mensaje de texto aquí
título de segundo nivel
Sólo envía un mensaje de texto aquí
Hojas de estilo internas
Esta hoja de estilo se especifica dentro de un elemento HTML usando el atributo estilo. He aquí un ejemplo:
Este es el título en rojo.
La desventaja de este método es obvia: el parámetro estilo tienes que especificar cada encabezado y por lo tanto perderás la ventaja de CSS.
Hojas de estilo integradas
En este caso, la hoja de estilo está incrustada en el encabezado de la página html. HTML tiene etiquetas , 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 utilizar 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; 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.
