Cómo crear una hoja de estilos en cascada. Formateo lógico y físico. Selector de pseudoclase de tipo estructural

Mesa estilos CSS, si tomamos la definición en sí, es un lenguaje para describir la apariencia de un documento. Es decir, HTML es responsable de la estructura de la página y las hojas de estilo CSS son responsables de todo el diseño. He recopilado información aquí que le permitirá utilizar la hoja de estilo libremente. No escribiré sobre lo necesario que es saberlo, porque ya está claro: sin él no podrás llevar el sitio a un nivel más o menos aspecto normal. Si alguien recién está comenzando a aprender estilos CSS, estos materiales serán suficientes para comenzar a aprender CSS.

1. Cosas básicas

Empezaré por lo más básico. Cuando comencé este sitio, escribí pequeños tutoriales sobre cómo aprender hojas de estilo CSS. Las lecciones son ideales tanto para quienes recién comienzan como para quienes ya saben algo para actualizar sus conocimientos. Allí se presenta todo en imágenes y ejemplos reales.

Una pequeña digresión: Cuando comencé a estudiar el tema de la creación de sitios web, aprendí casi todas las etiquetas HTML y no me inspiraron mucho. Pero después de que comencé a estudiar la hoja de estilos CSS y a intentar aplicar cada una de sus propiedades, me gustó mucho (no la habría creado si no me hubiera gustado). Vi que puedes hacer cosas increíbles solo con CSS. Este no es un lenguaje de programación que lleve meses aprender. La hoja de estilo se puede dominar en una (máximo dos) semanas.

Por supuesto, no estudiarás absolutamente todas las propiedades y sus significados, ¡y esto no es necesario! Sólo necesitas conocer los conceptos básicos para que puedas empezar a aplicarlo y utilizarlo en tus proyectos. Uno matiz importante es que necesitas aplicar INMEDIATAMENTE la propiedad que acabas de aprender ejemplo real. Sea su propio sitio web o un sitio web HTML simple, no hay diferencia. Lo importante es que intentes escribirlo tú mismo y veas el resultado.

Tengo muchos ejemplos en mi sitio que usan CSS. ¡Juntos contienen más de 100 lecciones! Cuando conozca al menos los conceptos básicos, podrá cambiar y aplicar de forma segura todos los ejemplos de las lecciones.

Mis lecciones sobre lo básico. estilos en cascada CSS

2. Hojas de referencia de CSS y CSS3

Pues aprendiste lo básico y al cabo de un par de días te olvidaste de todo con “éxito” y, probablemente, pienses que esto no es lo tuyo y todo se complica. Quiero animarte un poco de inmediato: yo mismo no conozco todas las propiedades de CSS. ¿Pero qué me impide verlos en Internet?

Es cierto que por ahora irá a Yandex o Google y luego escribirá la solicitud que necesita. Y si la búsqueda aún no te da lo que necesitas. Puedes pasar mucho tiempo de esta manera y aún así no encontrar lo que realmente buscas.

Afortunadamente, buena gente ha recopilado hojas de trucos muy útiles que me han ayudado más de una vez. Basta con averiguar dónde está todo y luego buscar. propiedades requeridas no presenta ninguna dificultad.

Hojas de trucos CSS y CSS3

Estos son simplemente materiales insustituibles al diseñar y desarrollar un diseño de sitio web. El tiempo que lleva distraerse y buscar en Internet descripciones de propiedades se reduce muchas veces.

Es cierto que, como comprenderá, cuanto más cree sitios web o diseñe, menos tendrá que mirar esta información sobre herramientas, ya que todas las propiedades necesarias siempre permanecen en la memoria. Pero aún así, no será superfluo tener a mano este juego de chuletas.

Es como en la escuela: Incluso si no usas una hoja de trucos, tu alma de alguna manera está más tranquila con ella 😆.

Puede combinar varias propiedades CSS relacionadas en una sola propiedad para ahorrar tiempo y esfuerzo.

Comparación de valores individuales y abreviados.

Considere la siguiente regla para los márgenes (las abreviaturas de relleno y bordes funcionan de la misma manera):

div.foo (margen superior: 1 em; margen derecho: 1,5 em; margen inferior: 2 em; margen izquierdo: 2,5 em;)

Esta regla se puede escribir más brevemente:

div.foo (margen: 1em 1,5em 2em 2,5em;)

Especificar menos de cuatro valores para una propiedad abreviada

El valor abreviado puede tener menos de cuatro significados, según la lista siguiente. Los resultados están ordenados por la cantidad de valores proporcionados:

Directorio de abreviaturas

Recortes de límites para varias propiedades	También vale la pena mencionar que incluso puedes establecer los valores de propiedad del borde para solo un borde de un elemento como este: ancho del borde izquierdo: 2px; estilo de borde izquierdo: sólido; color del borde izquierdo: negro;
Accesos directos para algunas propiedades de margen, relleno y borde	Todo esto funciona de la misma manera que se muestra arriba en la sección "Elegir entre una sola propiedad y un valor abreviado".
Abreviaturas de fuentes	Con una línea de acceso directo puede definir el tamaño de fuente, el peso, el estilo, la familia y la altura de la línea. Por ejemplo, considere el siguiente código: tamaño de fuente: 1,5 em; altura de línea: 200%; peso de fuente: negrita; estilo de fuente: cursiva; familia de fuentes: Georgia, "Times New Roman", serif Todo esto lo puedes definir con la siguiente línea: fuente: 1,5em/200% negrita cursiva Georgia, "Times New Roman", serif;
Taquigrafía para el fondo	Con uno cadenas CSS Puede definir el color de fondo, la imagen de fondo, la repetición de la imagen y la posición de la imagen. Tomemos el siguiente código: color de fondo: #000; imagen de fondo: url(imagen.gif); repetición de fondo: no repetición; posición de fondo: arriba a la izquierda; Esto se puede representar usando la siguiente abreviatura: fondo:#000 url(image.gif) no repetir arriba a la izquierda;
Abreviaturas de listas	En este caso, una historia similar con propiedades de listas le permite establecer valores de propiedad para el tipo, la posición y la imagen del marcador de lista en una línea. Tomemos el siguiente código: tipo de estilo de lista: círculo; posición-estilo-lista: dentro; imagen-estilo-lista: url(bullet.gif); Esto equivale a lo siguiente: estilo de lista: círculo dentro de la URL (bullet.gif);

Aplicar CSS a HTML

Hay tres maneras aplicando CSS al documento HTML:

• cadena;
• anidado;
• hojas de estilo externas.

Estilos de cuerda

Puedes aplicar una hoja de estilo a un elemento usando el atributo de estilo de esta manera:

Dentro de este atributo, todos Propiedades CSS y sus significados.

La ventaja de los estilos en línea es que el navegador se verá obligado a utilizar estas configuraciones. Todos los demás estilos definidos en otras hojas de estilo, o incluso anidados dentro titulo del documento, será anulado por estos estilos.

El gran problema con los estilos en línea es que hacen que los estilos sean mucho más difíciles de mantener. El uso de CSS tiene como objetivo separar la presentación de un documento de su estructura, pero los estilos en línea hacen exactamente lo contrario: reglas de presentación difusas en todo el documento.

Aparte de los problemas de mantenimiento, no obtendrá ningún beneficio de la parte esencial de CSS: el uso en cascada.

Estilos anidados

Las hojas de estilo anidadas se colocan en el interior del encabezado del documento. elemento de estilo, como en la siguiente página de ejemplo:

La ventaja de las hojas de estilo anidadas es que no es necesario agregar un atributo de estilo a cada párrafo; puede aplicarles estilo a todos con una única definición. Esto también significa que si necesita cambiar apariencia todos los párrafos, esto se puede hacer en un solo lugar, pero todo esto, sin embargo, está limitado a un solo documento.

Hojas de estilo externas

Las hojas de estilo externas significan colocar todas las definiciones CSS en un archivo separado y guardarlo con la extensión archivo css y luego aplicarlo a documentos HTML usando el elemento enlace en el título del documento. Por ejemplo:

Las hojas de estilo externas le permiten almacenar todas las definiciones de estilo en un solo archivo. Esto significa que puede realizar cambios en todo su sitio cambiando solo uno. Luego, el navegador web puede descargarlo una vez y luego almacenarlo en caché para todos los demás documentos que hacen referencia a él, lo que reduce la cantidad de información descargada.

Importar hojas de estilo

Hay otra forma de importar hojas de estilo externas a archivos HTML: la declaración @import. Se inserta en la hoja de estilos anidada, de la misma manera que el código CSS anidado que se muestra arriba. La sintaxis es la siguiente:

Los dos conceptos fundamentales de CSS son herencia Y en cascada. Herencia se refiere a la forma en que un elemento en el marcado HTML hereda las propiedades de sus elementos ancestros (que lo contienen) y las pasa a sus descendientes, mientras que en cascada trata de las declaraciones CSS que se aplican al documento y de cómo las reglas en conflicto se anulan entre sí.

Herencia

Herencia En CSS, es un mecanismo mediante el cual ciertas propiedades se pasan de un elemento ancestro a sus elementos descendientes.

Al utilizar la herencia, puede, por ejemplo, definir propiedades de fuente para los elementos html o del cuerpo, y todos los demás elementos las heredarán. Puede definir los colores de fondo y de primer plano para un elemento contenedor específico, y los elementos descendientes de ese contenedor heredarán automáticamente el color de primer plano.

Cada elemento de un documento HTML heredará todas las propiedades heredables de su antecesor, con la excepción del elemento raíz (html), que no tiene antecesor.

en cascada

en cascada es un mecanismo que controla el resultado final cuando se aplican múltiples declaraciones CSS en conflicto al mismo elemento. Hay tres conceptos principales que controlan el orden en que se aplican las declaraciones CSS:

• Importancia
• Especificidad
• Orden del código fuente

Importancia es el más significativo. Si dos declaraciones tienen la misma importancia, la especificidad de las reglas determina cuál se aplicará. Si las reglas tienen la misma especificidad, entonces el orden del código fuente controla el resultado.

Importancia

Importancia La declaración CSS depende de dónde se define. Las declaraciones contradictorias se aplicarán en el siguiente orden, y las posteriores prevalecerán sobre las anteriores:

• Hojas de estilo del agente de usuario
• Declaraciones regulares en hojas de estilo de usuario
• Declaraciones regulares en hojas de estilo de autor.
• Declaraciones importantes en hojas de estilo de autor
• Declaraciones importantes en hojas de estilo de usuario

Hoja de estilo del agente de usuario es la hoja de estilo incorporada del navegador. Cada navegador tiene sus propias reglas predeterminadas que determinan cómo mostrar varios elementos HTML si el usuario o el diseñador de la página no especifica ningún estilo. Por ejemplo, los enlaces no visitados normalmente aparecerán en azul y subrayados.

Hoja de estilo de usuario es una hoja de estilo definida por el usuario. No todos los navegadores admiten hojas de estilo de usuario, pero pueden resultar muy útiles, especialmente para usuarios con ciertos tipos de discapacidades funcionales. Por ejemplo, una persona con dislexia puede tener una hoja de estilo que especifica ciertas fuentes y colores que facilitan la lectura.

hoja de estilo del autor es lo que comúnmente se llama una "hoja de estilo". Esta es una hoja de estilo que el autor del documento (o más probablemente el diseñador del sitio) escribió y adjuntó (o incluyó).

Para convertir una declaración ordinaria en una importante, debe colocar la directiva !important después de ella. Como puede ver, las declaraciones importantes en la hoja de estilo de un usuario se superpondrán a todo lo demás, lo cual tiene sentido.

La presentación predeterminada del navegador solo se aplicará si estas declaraciones no son anuladas por ninguna hoja de estilo de usuario o regla de hoja de estilo de autor, ya que la hoja de estilo del agente de usuario tiene la prioridad más baja.

Especificidad

Especificidad se define como una medida de qué tan específico es un selector de alguna regla. Un selector de baja especificidad puede coincidir con muchos elementos (como *, que coincide con todos los elementos del documento), mientras que un selector de alta especificidad puede coincidir solo con un elemento por página (como #nav, que coincide solo con un elemento con una identificación navegación coincidente).

La especificidad de un selector se puede calcular fácilmente. Si dos o más declaraciones entran en conflicto para un elemento determinado y todas las declaraciones tienen la misma importancia, entonces la declaración con el selector más específico tendrá prioridad en la regla.

La especificidad tiene cuatro componentes, que pueden denominarse a, b, cy d. El componente a es el más discriminante, d es el menos.

• El componente a se define de manera muy simple: es 1 para declaración atributo de estilo, de lo contrario es 0 .
• Componente b es el número de selectores de identificación en el selector (los que empiezan Con#).
• Componente c es un numero selectores de atributos, incluidos selectores de clases y pseudoclases.
• El componente d es el número de tipos de elementos y pseudoelementos en el selector.

Con un poco de matemáticas, puedes obtener una cadena de estos cuatro componentes que define la especificidad de cualquier regla. Las declaraciones CSS en el atributo de estilo no tienen selector, por lo que su especificidad siempre será 1,0,0,0.

La tabla muestra algunos ejemplos.

Selector	a	b	C	d	Especificidad
h1	0	0	0	1	0,0,0,1
.foo	0	0	1	0	0,0,1,0
#bar	0	1	0	0	0,1,0,0
html>cabeza+cuerpo ul#nav *.home a:enlace	0	1	2	5	0,1,2,5

Vale la pena señalar que conectar caracteres (como >, + y

Aplicar una hoja de estilo a un documento

Incrustar hojas de estilo en un documento
Establecer un estilo para un fragmento de documento separado
Importar una hoja de estilo

Especificación de varias propiedades a la vez
Selectores de agrupación
Comentar una hoja de estilo
Propiedades de estilo
propiedades de fondo
Elementos de marco
Propiedades de lista
Propiedades del texto
Agrupar propiedades para que sea más fácil definir un estilo
herencia de propiedad
Usando selectores de contexto
Por qué las hojas de estilo se llaman en cascada

Las hojas de estilo se proporcionan según las recomendaciones del W3C y son una herramienta estándar para formatear páginas web, utilizando enfoques típicos de escritorio. sistemas de publicación. Microsoft Internet Explorer 3.0 fue el primer navegador que admitió hojas de estilo. El navegador Netscape Navigator admite hojas de estilo desde la versión 4.0B2 (Beta 2), disponible en febrero de 1997.

Puede encontrar información detallada sobre las recomendaciones del W3C en: h ttp://www.w3.org/pub/WWW/TR/WD-cssl.html . El estándar W3C utiliza el término "hojas de estilo en cascada nivel 1 (CSSI").

En primer lugar, es necesario aclarar qué se entiende por la denominación “hojas de estilo”. La mayoría de los editores de texto modernos permiten al usuario definir el estilo que se utilizará para formatear el documento. En particular, puedes elegir un estilo de párrafo con un solo Espaciado entre líneas, en fuente Courier y con un margen izquierdo de una pulgada. Este estilo de formato se puede aplicar posteriormente a cualquier número de párrafos de este y otros documentos. hojas de estilo NT

METRO Actúo exactamente de la misma manera. A continuación se muestra una breve lista de las características principales:

Cambie el espacio entre líneas, palabras y caracteres individuales.

Establecer los márgenes izquierdo, derecho, superior e inferior de un elemento (un bloque de texto contenedor HTML).

Establecer la sangría de un elemento.

Cambie el tamaño, el estilo y otros atributos de la fuente de un elemento.

Establecer un borde alrededor de un elemento.

Inclusión imagen de fondo Y color de fondo al elemento.

Una gran ventaja de las hojas de estilo HTML es la capacidad de separar la operación de formato del contenido del documento. Primero, determine cómo debe verse el texto en un lugar u otro de la página y luego ingrese el texto mismo. Si luego decide, por ejemplo, cambiar el color de fuente de los títulos a azul, todo lo que necesita hacer es cambiar el estilo de esos títulos. No es necesario realizar cambios en el texto. .

Existen cuatro métodos para aplicar una hoja de estilo a un documento:

Vinculación: puede vincular un documento HTML con una hoja de estilo almacenada en un archivo separado.

Incrustación: puede incrustar una hoja de estilo en un documento HTML utilizando un contenedor.



Etiqueta

Como se indicó anteriormente, las hojas de estilo se almacenan en archivos de texto, conveniente para editar. No son difíciles de crear manualmente, pero existen editores de hojas de estilo especiales, por ejemplo, programa popular Microsoft FrontPage.

Las hojas de estilo le permiten definir un estilo para una o más etiquetas. Por ejemplo, puede crear una hoja de estilos que defina estilos para etiquetas.

,

,

Y . Cada definición se llama regla (gobernar mi). La regla contiene selector(etiqueta HTML) seguida de declaración(definición de estilo). El selector es el vínculo entre la definición y la etiqueta. A continuación se muestra un ejemplo de una regla que especifica el estilo de cada una de las etiquetas de título.

:

H1 (color: azul)

La declaración está encerrada entre llaves. Cada declaración tiene dos partes: el nombre de la propiedad y el valor asignado a la misma, separados por dos puntos. HTML incluye docenas de propiedades (tamaño de fuente, estilo de fuente, color, margen derecho, etc.), que se analizarán a continuación. Cada propiedad puede tomar varios valores, uno de los cuales se le asigna de forma predeterminada.

En el ejemplo anterior, sólo se especificó una propiedad de color. Sin embargo, nada impide definir toda una serie de propiedades en una etiqueta, separándolas entre sí con un punto y coma:

HI (color: azul; tamaño de fuente: 12 puntos; línea de texto: centro)

En este ejemplo, el visor mostrará cada encabezado de primer nivel en fuente azul de 12 puntos y los alineará con el centro de la ventana. Todas las demás propiedades utilizarán sus valores predeterminados (por ejemplo, la propiedad de estilo de fuente se establecerá en normal).

Si necesita definir el mismo estilo para varias etiquetas, puede enumerarlas en una lista separada:

P (tamaño de fuente: 12 puntos)
UL (tamaño de fuente: 12 puntos)
LI (tamaño de fuente: 12 puntos)

HTML le permite hacer lo mismo en una forma más compacta, en una línea:

P, UL, LI (tamaño de fuente: 12 puntos)

La coma es un elemento obligatorio aquí. Si se omite, el significado de la regla cambia (consulte la sección " " más adelante en este capítulo).

A medida que su hoja de estilo se vuelve más compleja, probablemente necesitará incluir más información sobre el propósito de una regla. Los comentarios aparecen entre los caracteres /* y */ y los navegadores los ignoran, por ejemplo:

CUERPO (margen izquierdo: lin) /* Sangría de 1 pulgada */
H1 (margen izquierdo: -lin) /* Desplazamiento a la izquierda 1 pulgada */
H2 (margen izquierdo: -lin) /* Desplazamiento a la izquierda 1 pulgada */

HTML le permite definir una amplia gama de propiedades de hojas de estilo. Los nombres de las propiedades constan de una, o más a menudo dos o tres palabras, separadas por un guión. En nombres complejos, la primera palabra suele representar la categoría y también es una abreviatura del nombre de la propiedad (consulte la sección " ").

La tabla proporciona una descripción general de las propiedades de las hojas de estilo HTML. La columna Categoría muestra si una propiedad se puede agrupar con otras propiedades. La tercera columna proporciona información sobre si la propiedad es heredada o no por etiquetas subordinadas (para herencia de propiedad, consulte la sección " ").

		Herencia
		Las hojas de estilo HTML le permiten decorar el fondo de un elemento de página con un color o una imagen. Cabe señalar que aquí y más adelante hablaremos sobre el uso de propiedades no para toda la página, sino para un elemento separado. Por ejemplo, si define un fondo para una etiqueta , entonces sólo las etiquetas tendrán este fondo toda la pagina: Ud. L (imagen de fondo: URL (http://www.myserver.com/images/watermark.gif)) Las recomendaciones del W3C brindan la capacidad de definir bordes, márgenes y espacios en blanco para los elementos de la página. Puede, por ejemplo, encerrar un título en un marco o cambiar los márgenes en una etiqueta de párrafo.<Р>para organizar una sangría para todos los párrafos del texto. Para estos fines, puede utilizar los siguientes grupos de propiedades: borde: se utiliza para definir un borde ubicado a la izquierda, derecha, arriba y abajo de un elemento. Puede establecer el ancho, el color y el estilo del marco. margen: se utiliza para definir los márgenes ubicados a la izquierda, derecha, arriba y abajo de un elemento. También puede establecer el ancho de los márgenes. relleno: se utiliza para indicar el espacio libre entre el marco y el contenido del elemento. Estas propiedades se utilizan para especificar cómo se muestran las listas. Con su ayuda, puede cambiar la posición del marcador (propiedad list-style-position), el estilo o la imagen del marcador (propiedades list-style-type y list-style-image). Las propiedades de la lista se heredan, es decir, si la propiedad está definida en la etiqueta , será válido para todas las etiquetas Contenedor UL. Las propiedades le brindan control total sobre cómo el visor muestra el texto. Con su ayuda, puede controlar el color, el tamaño, la fuente, el interlineado, etc. Todas las propiedades del texto se describirán en detalle a continuación. Muchas de las propiedades descritas anteriormente se pueden agrupar entre sí. Entonces, en lugar de la regla H1 (peso de fuente: negrita; estilo de fuente: normal; tamaño de fuente: 12 puntos; familia de fuentes: serif) Puedes escribir una formulación más concisa: H1 (fuente: negrita normal serif de 12 puntos) Las hojas de estilo HTML le permiten agrupar las propiedades de borde, fondo, fuente, lista, margen y relleno. Consideremos cada uno de los grupos por separado. grupo de propiedad fronteriza Puede agrupar propiedades de borde de cinco maneras diferentes. Puede definir propiedades para un lado del marco individual usando b orden superior, borde derecho, borde inferior Y borde izquierdo, o defina todo el marco a la vez usando borde. Con cada una de estas propiedades puedes especificar el ancho, estilo y color del borde, por ejemplo: b orden superior: negro punteado fino grupo de propiedades de fondo En el grupo de propiedades de fondo puede especificar valores de color, imagen, repetición, archivo adjunto y posición, por ejemplo: fondo: URL blanca (http://www.myserver.com/image/bg.gif) repetir-x fijo arriba a la izquierda grupo de propiedades de fuente Al grupo de fuentes se le puede dar peso, estilo, tamaño y valores de familia, por ejemplo: fuente: negrita normal 12 puntos, serif listar grupo de propiedades Las propiedades se agrupan mediante la propiedad de estilo de lista. Es posible especificar la imagen del marcador, el tipo y la posición del marcador, por ejemplo: estilo de lista: URL cuadrada (http://www.myserver.com/images/marker.gif) dentro grupo de propiedad de margen El grupo de márgenes se puede utilizar para definir un ancho para cada uno de los márgenes superior, derecho, inferior e izquierdo, por ejemplo: margen: .5in 1in .5in 1in Si solo se especifica un valor, el visor hará que los demás campos tengan el mismo ancho. Si no especifica uno o dos valores, los campos con un valor no especificado tendrán el mismo ancho que los campos opuestos. Por ejemplo, si omite el último valor (izquierda), el ancho de los márgenes izquierdos será igual al ancho de los márgenes derechos, es decir, 1 pulgada. Grupo de propiedades de relleno En el grupo de relleno puede especificar valores para arriba, derecha, abajo e izquierda, por ejemplo: relleno: 0,25 pulgadas 0,25 pulgadas 0,25 pulgadas 0,25 pulgadas Si solo se especifica un valor, el espectador asignará el mismo valor a los valores faltantes. Si no especifica uno o dos valores, los espacios vacíos con valores no especificados tendrán el mismo ancho que sus valores opuestos. Por ejemplo, si omite el último valor (izquierda), el espacio entre el lado izquierdo del marco y el contenido del elemento será el mismo que el espacio del lado derecho. En HTML, las etiquetas subordinadas heredan algunas propiedades de sus etiquetas principales. Por ejemplo, todas las etiquetas de contenedor (< P >Y ) tendrá algunas propiedades de etiqueta . exactamente la misma etiqueta hereda las propiedades de la etiqueta . Considere el siguiente código: Hola. Este es un párrafo de texto. Esto se enfatiza La hoja de estilo de este documento establece el color en la etiqueta. < P > El azul, sin embargo, es el color de la etiqueta. no definido explícitamente (el valor predeterminado es negro). No hay nada de qué preocuparse aquí ya que esta etiqueta está en el contenedor principal. Y así hereda el color azul. A veces resulta necesario definir dos (o más) estilos para una etiqueta. Por ejemplo, es posible que necesites especificar dos estilos para una etiqueta. : uno para el caso en el que está subordinado a una etiqueta , y el segundo cuando está subordinado a la etiqueta . Esto se puede hacer usando selectores de contexto. El selector de contexto determina la secuencia exacta de etiquetas a las que se aplicará un estilo particular. En otras palabras, puede especificar que se debe aplicar algún estilo, por ejemplo, en una etiqueta sólo si esta etiqueta es una etiqueta subordinada : OL LI (tipo de estilo de lista: decimal) Por la misma etiqueta se puede definir otro estilo, válido sólo si está subordinado a una etiqueta : UL LI (tipo de estilo de lista: cuadrado) Cabe señalar que la lista de selectores no está separada por comas. De lo contrario, a todas las etiquetas de la lista se les asignará el mismo estilo. Las directrices del W3C llaman a las hojas de estilo "hojas de estilo en cascada". " porque para el diseño de una página web puedes utilizar no una, sino varias tablas a la vez. En este caso, el propio espectador determina la secuencia de uso de las tablas y resuelve los conflictos entre ellas utilizando el principio de cascada. Por ejemplo, una hoja de estilo para una página puede ser definida no sólo por su autor, sino también por el lector, y luego las reglas en cascada deciden qué hoja de estilo tendrá efecto. ¿Como funciona? El navegador asigna un factor de ponderación a cada regla. Al interpretar cada etiqueta, el programa examina todas las reglas de esta etiqueta y las clasifica según el valor del coeficiente de ponderación. Gana la regla de mayor peso. Existen las siguientes pautas generales para resolver conflictos entre hojas de estilo: Prioridad de los tipos de hojas de estilo en el documento (descendente): configuración de estilo actual (en línea), incrustación, vinculación. También puede cambiar el peso de una regla utilizando la palabra clave importante. En el siguiente ejemplo, el valor de la propiedad roja es columna El valor o y sans-serif de la propiedad font-family están marcados con esta palabra funcional y, por lo tanto, el espectador no debe anularlos. Sin embargo, si dos de esas reglas entran en conflicto, el conflicto se resuelve de acuerdo con los principios establecidos anteriormente. H1 (color: rojo! importante peso de fuente: negrita familia de fuentes: sans-serif! importante) Una clase es una definición de varios estilos de un elemento, cada uno de los cuales se puede utilizar en el lugar correcto de la página. Por ejemplo, puede definir tres variaciones del estilo de encabezado H1. Definir variaciones es similar a especificar un estilo, solo que se agrega un nombre de clase arbitrario al nombre de la etiqueta, separado por un punto: H1 azul (color: azul) H1 .rojo (color: rojo) H1 .negro (color: negro) Ahora, incluyendo la etiqueta en el documento. , puedes especificar un estilo específico usando el atributo CLASS: título rojo

¿Para qué sirven las hojas de estilo?

Creó páginas anteriores porque se crearon antes de la llegada de las hojas de estilo en cascada o CSS (Cascading Style Sheets).

Los principales problemas que enfrentaban los desarrolladores de sitios web antes de la llegada de CSS:

Problema de posicionamiento (diseño de página). Aunque se empezaron a utilizar tablas para ello (originalmente no estaban pensadas para ello), no resolvieron todos los problemas. No es posible hacer lo siguiente:
- No se pueden establecer dimensiones fijas para ningún bloque. Por ejemplo, un bloque de texto se moverá cuando se desborde (incluso si está en una tabla).
- No se pueden establecer coordenadas fijas para la posición del bloque en la página.
- No se puede poner un bloque encima de otro. Por ejemplo, intente colocar una imagen encima de una mesa u otra imagen.

El segundo problema era que cada vez tenía que configurar el tamaño y el color de la fuente, las propiedades de las celdas de la tabla, etc. en las páginas. Esto aumentó considerablemente el tamaño de la página, lo que significa que se cargó más lentamente. Si quisieras cambiar el color o el tamaño de fuente, tendrías que editar todas las páginas.

El tercer problema fue que todos los navegadores tienen configuraciones individuales. Por ejemplo, un navegador puede agrandar la fuente, provocando que toda la página se distorsione.

Con la ayuda de CSS, estos problemas se pueden solucionar.

Formas de utilizar CSS

Hay tres formas de utilizar hojas de estilo:

Hojas de estilo internas(Hojas de estilo en línea): mediante un atributo especial, se colocan directamente en etiquetas HTML.
HTML de ejemplo:

Ejemplo de CSS:

Como puede ver, el código de la hoja de estilo en línea resultó ser más que HTML. Por lo tanto, ISS sólo debe usarse si necesitas darle a un elemento específico tu estilo personal.
Usando el atributo de estilo adicional, podemos definir los parámetros de estilo que necesitamos en cualquier etiqueta. Esta es la forma más sencilla y funciona con una sola etiqueta. Pero imagine cuánto crecerá el tamaño del archivo y lo inconveniente que será arreglarlo si especificamos el estilo para cada etiqueta.

Hojas de estilo globales(Hojas de estilo globales): define el estilo de los elementos en todo el documento.
La etiqueta se utiliza para esto.. Dentro de esta etiqueta de contenedor somos libres de establecer cualquier cantidad reglas CSS, que consta de un selector (nombre etiqueta HTML, al que se aplicará la regla) y su definición (directamente un conjunto de formateadores), encerrada entre llaves. La sintaxis del ejemplo anterior es:

... ...

Esta forma de vincular CSS y HTML se llama incrustación. Se recomienda utilizarlo en los casos en los que decida establecer un determinado conjunto de reglas de formato para una sola página del sitio y, según su plan, todas las demás páginas deberían verse diferentes.

Asignar estilos a varias páginas del sitio simultáneamente

Además de incrustar e incrustar para Enlaces CSS y HTML utiliza formas de importar y vincular hojas de estilo. Esto es definitivamente las mejores maneras para dar un estilo unificado a varias (o incluso a todas) las páginas de un sitio. En este caso, toda la hoja de estilo se almacena en un archivo (la extensión del archivo debe ser estándar: .css).

A continuación se muestra un ejemplo del contenido de dicho archivo (por ejemplo, my.css):

Cuerpo (familia de fuente: "Times New Roman", serif; tamaño de fuente: 12 puntos; color: verde oscuro;) h1 (familia de fuente: Arial, sans-serif; tamaño de fuente: 16 puntos; color: verde; peso de fuente : negrita; ) h2 (familia de fuentes: Arial, sans-serif; tamaño de fuente: 14 puntos; color: verdeamarillo; peso de fuente: negrita; estilo de fuente: cursiva;)

Tenga en cuenta: etiquetas no se utilizan hojas de estilo dentro del archivo; la extensión .css indica claramente al navegador que el archivo es una hoja de estilo. Uno de esos archivos puede vincularse a varias páginas a la vez (o importarse a varias páginas a la vez). En el archivo html para vincular, debe escribir en cualquier lugar entre las etiquetas Y la siguiente línea:

... ...

Esta línea indica que el archivo que se está vinculando es una hoja de estilo (rel="stylesheet"), el formato de este archivo es .css (type="text/css") y está ubicado en el mismo directorio que archivo html, o tiene una URL diferente (href="my.css"). Obviamente, podemos escribir esta línea en cualquiera (o todos) de nuestros archivos html. Por lo tanto, se prescribirá un diseño de estilo único para varias páginas a la vez.

Tenga en cuenta que los estilos en línea (estilos escritos para elementos individuales páginas que utilizan el atributo de estilo) y estilos incrustados (estilos escritos en<голове>páginas dentro de una etiqueta de contenedor ...

Además de la dirección de la hoja de estilo importada, puede escribir en la etiqueta del contenedor ... ...

La pregunta del periodista

La respuesta del entrevistado.

...



En el ejemplo anterior, las preguntas del periodista se mostrarán en fuente Arial gris, negrita, cursiva, 10 puntos, con sangría de 15 píxeles desde el borde izquierdo de la página. Las respuestas se mostrarán en fuente Times New Roman negra de 12 puntos. Es importante no olvidar asignar el parámetro de clase a las distintas clases de párrafo directamente en el código html. Puede crear cualquier cantidad de clases para cualquier elemento de página.

selector de identificación

Tomemos otro caso. Supongamos que desea crear algunos elementos únicos en la página a la que planea acceder en el futuro desde programas JavaScript. Quizás estos elementos se repitan en otras páginas y te gustaría preguntarles diseño uniforme a través de CSS. Para este caso, las hojas de estilo en cascada tienen la capacidad de asignar identificadores (id) a elementos únicos. El uso más común de identificadores es para elementos de formulario, que en la especificación HTML 4.0 tienen soporte CSS total o limitado (según el elemento). A continuación se muestra un ejemplo de cómo asignar reglas de ID y CSS a dichos elementos:

... ... ...

El texto ingresado en este campo aparecerá en verde:

El texto ingresado en este campo aparecerá en rojo:

...



Asimismo, se pueden asignar identificadores únicos a cualquier número de elementos de la página. Esto puede resultar útil para acceder a un elemento desde un programa JavaScript y cambiar su estilo de visualización en respuesta a la entrada del usuario, lo que le permite crear varios efectos dinámicos.

Selectores de contexto

Digamos que creamos una hoja de estilo según la cual todos los títulos de primer nivel de la página se muestran en rojo sobre un fondo gris, todos los párrafos se muestran en verde sobre un fondo amarillo y todos los resaltados mediante una etiqueta. 1 palabra dentro de párrafos, en negro sobre fondo plateado. El código de la hoja de estilo, como habrás adivinado, se ve así:

H1 ( color: rojo; color de fondo: gris; ) p ( color: verde; color de fondo: amarillo; ) em ( color: negro; color de fondo: plateado; )

Supongamos que también queremos resaltar algunas palabras en el título usando la misma etiqueta. , pero no estamos contentos con la aparición de texto negro sobre un fondo plateado en el encabezado. Queremos resaltar las palabras del título. color burdeos sobre un fondo gris. Hay selectores de contexto para esto. La entrada de regla que agregaremos a la hoja de estilo para esto se verá así:

H1 em (color: #CC0000; color de fondo: gris;)

Y aquí hay un ejemplo de código de página usando este selector de contexto:

... ... ...

Este es el título de primer nivel con resaltado en una palabra

Y este es un párrafo ordinario con en palabras resaltadas

...



Eso es todo por hoy. La próxima vez hablaremos sobre las reglas para formatear elementos de páginas de bloques, el posicionamiento de elementos y otras características interesantes y útiles implementadas usando CSS.