¿Qué son los estilos en HTML? Diseño de etiquetas html con el atributo de estilo (estilos CSS integrados)
CSS significa "Hojas de estilo en cascada", que significa "Hojas de estilo en cascada". Se utiliza para diseñar páginas web. Si el código HTML contiene el contenido (lo que mostrará el navegador), entonces el CSS determina su diseño (cómo lo mostrará el navegador). La belleza de CSS es que con la ayuda de un estilo puedes diseñar todos los mismos tipos de elementos de una página o de un sitio completo (todos los enlaces, párrafos, listas a la vez). Con un estilo CSS, usted define una vez cómo debe verse un elemento en particular, por ejemplo, una imagen, y cambia su diseño en todos los documentos a la vez. Para cambiar el formato del texto en todo su sitio, solo necesita cambiar el código CSS una vez.
Elementos CSS básicos
Así como HTML se compone de etiquetas, atributos y valores, CSS se compone de sus propios elementos. La esencia de las construcciones CSS se puede explicar de la siguiente manera: "Especifique a qué elemento de la página aplicarle estilo y especifique cómo aplicarle estilo". Estos son los componentes básicos de CSS.
- Selector. Un identificador que le indica al navegador a qué elemento de la página aplicar el diseño. Gracias a ello, el navegador “entiende” que el estilo está destinado, por ejemplo, a diseñar listas o tablas.
- Bloque de declaración de estilo. Está escrito después del selector y entre llaves. Especifica el estilo del elemento (su diseño). El bloque de declaración de estilo consta de dos partes.
- Propiedad. Un análogo de un atributo en HTML. Determina qué propiedad de apariencia se cambiará.
- Significado. Se especifica en una propiedad mediante dos puntos y determina exactamente cómo se cambiará la propiedad.
Puede haber varias propiedades y valores en un bloque de declaración de estilo, en cuyo caso se enumeran separados por un punto y coma.
Tipos de selectores
Dependiendo de las propiedades de los elementos de página que definen, los selectores son de diferentes tipos.
- Universal. Establece reglas para todos los elementos de la página para los que no se han establecido otras reglas.
Código * (tamaño de fuente: 14px;) establece el tamaño de fuente en 14 píxeles para todos los elementos del documento para los cuales no se especifican otras reglas mediante otros selectores. - Tega. Este tipo de selector especifica reglas de formato para el contenido de una etiqueta HTML específica. El nombre del selector es el mismo que el nombre del descriptor, solo que escrito sin corchetes angulares: pag, h1, ul.
Por ejemplo, código h2 (color: rojo;) establece el color del texto en verde para todos los títulos de segundo nivel, es decir, el contenido de las etiquetas . - Atributo. Con este grupo de selectores, puede determinar el estilo del contenido de todas las etiquetas que tienen un atributo específico especificado. Los selectores se pueden especificar con mayor precisión especificando no solo el nombre del atributo, sino también el valor asignado al mismo, así como el nombre de la etiqueta que lo contiene. Esto se puede utilizar para hacer que el diseño sea más individual.
- clase. Un tipo de selectores para cuando necesitas formatear el contenido de etiquetas del mismo tipo de manera diferente. Por ejemplo, desea que los enlaces en la parte inferior del sitio sean rojos, mientras que todos los demás deben permanecer en azul, como estaban. Para aplicar reglas de clase a un elemento del sitio, debe especificar el nombre de la clase en el atributo clase la etiqueta correspondiente.
Digamos usando la clase. paso A los elementos individuales se les debe dar un margen izquierdo de 15 píxeles.
El código CSS será así:
Paso (margen izquierdo: 15px;)
El código HTML que vinculará el elemento a la regla será:
Texto sangrado
- IDENTIFICACIÓN. Utilizado junto con el atributo identificación Etiqueta HTML y se utiliza cuando es necesario establecer propiedades para un solo elemento. A diferencia de un selector de clase, cuyo nombre está precedido por un punto, se escribe mediante un hash:
#exclusivo (color:naranja;)
- Contextual. En HTML, ciertas etiquetas a menudo se encuentran dentro de otras etiquetas y los selectores contextuales ayudan a definir reglas precisamente para esos casos. Por ejemplo, puedes usarlos para dar formato a elementos dentro de listas numeradas o texto en cursiva dentro de párrafos:
P i (familia finta: Century;)
Los grupos restantes de selectores se basan en una combinación de los tipos enumerados, así como en el principio de herencia, cuando un elemento hijo toma las propiedades de su padre.
Combinar y agrupar selectores resulta conveniente en muchas situaciones. Por ejemplo, para establecer reglas de clase. paso solo para enlaces, necesitas especificar ambos selectores separados por un punto (primero la etiqueta, luego la clase):
A.paso (margen izquierdo: 15px;)
¿Cómo incluir CSS en una página HTML?
Hay varias formas de hacer que las herramientas de creación de sitios web interactúen entre sí. Según el método de adición, los estilos se dividen en las siguientes categorías.
Estilos incorporados
Establecer en el documento directamente dentro de la etiqueta HTML usando el atributo estilo. Tener la máxima prioridad. Esto significa que si se especifica un diseño diferente para el mismo elemento, se dará preferencia a la regla que está escrita dentro de la etiqueta. El selector para el estilo incorporado no es necesario, ya que la conexión entre el estilo y la etiqueta es obvia: en él se especifica el diseño de la etiqueta.
El siguiente código establece el tamaño y el color de fuente para el texto dentro de la etiqueta.
Texto formateado usando un estilo interno.
Estilos globales
Establecer por etiqueta …