Sopesando los selectores de CSS. y establece el estilo para la clase especificada. Los estilos creados usando una clase se pueden aplicar a otros elementos, no necesariamente de ese tipo.

Hogar CSS (Cascading Style Sheets), u hojas de estilos en cascada , se utilizan para describir apariencia documento escrito en lenguaje de marcado. Normalmente, los estilos CSS se utilizan para crear y cambiar el estilo de los elementos de la página web y interfaces de usuario escrito en lenguajes HTML

y XHTML, pero también se puede aplicar a cualquier tipo de documento XML, incluidos XML, SVG y XUL.

Las hojas de estilos en cascada describen reglas para formatear elementos usando propiedades y los valores permitidos para esas propiedades. Para cada elemento, puede utilizar un conjunto limitado de propiedades; otras propiedades no tendrán ningún efecto sobre él. Una declaración de estilo consta de dos partes: el elemento de la página web: selector y comandos de formato - bloque de anuncios

. El selector le dice al navegador qué elemento formatear, y el bloque de declaración (código entre llaves) enumera los comandos de formato: propiedades y sus valores.

Arroz. 1. Estructura de declaración de estilo CSS

Tipos de hojas de estilo en cascada y sus particularidades

1. Tipos de hojas de estilo

1.1. Hoja de estilo externa Hoja de estilo externa representa archivo de texto con la extensión .css, que contiene un conjunto de estilos CSS para elementos. El archivo se crea en un editor de código, como una página HTML. El archivo sólo puede contener estilos, sin formato HTML. Una hoja de estilo externa está conectada a una página web mediante una etiqueta. , ubicado dentro de la sección

. Estos estilos funcionan para todas las páginas del sitio. Puede adjuntar varias hojas de estilo a cada página web agregando varias etiquetas en secuencia

, indicando el propósito de esta hoja de estilo en el atributo de etiqueta de medios. rel="stylesheet" especifica el tipo de enlace (enlace a una hoja de estilo).

El estándar HTML5 no requiere el atributo type="text/css", por lo que se puede omitir. Si falta el atributo, el valor predeterminado es type="text/css" .

1.2. Estilos internos Estilos internos incrustado en una sección Documento HTML y se definen dentro de la etiqueta.

...

. Los estilos internos tienen prioridad sobre los externos, pero son inferiores a los estilos en línea (especificados mediante el atributo de estilo).

cuando escribimos estilos en línea, escribimos el código CSS en el archivo HTML, directamente dentro de la etiqueta del elemento usando el atributo de estilo:

Presta atención a este texto.

Estos estilos sólo afectan al elemento para el que están configurados.

1.4. @regla de importación

@regla de importación Le permite cargar hojas de estilo externas. Para que la directiva @import funcione, debe aparecer en la hoja de estilo (externa o interna) antes que todas las demás reglas:

La regla @import también se utiliza para incluir fuentes web:

@importar URL(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Tipos de selectores

Selectores Representar la estructura de una página web. Ayudan a crear reglas para dar formato a los elementos de la página web. Los selectores pueden ser elementos, sus clases e identificadores, así como pseudoclases y pseudoelementos.

2.1. Selector universal

Coincide con cualquier elemento HTML. Por ejemplo, * (margen: 0;) restablecerá los márgenes de todos los elementos del sitio. El selector también se puede utilizar en combinación con una pseudoclase o pseudoelemento: *:after (estilos CSS), *:checked (estilos CSS).

2.2. Selector de elementos

Los selectores de elementos le permiten formatear todos los elementos. de este tipo en todas las páginas del sitio. Por ejemplo, h1 (familia de fuentes: Lobster, cursiva;) establecerá el estilo de formato general para todos los títulos h1.

2.3. selector de clase

Los selectores de clases le permiten diseñar uno o más elementos con el mismo nombre de clase colocado en diferentes lugares ah páginas o en diferentes páginas del sitio. Por ejemplo, para crear un título con la clase de título, debe agregar atributo de clase con el título de valor en la etiqueta de apertura

y establece el estilo para la clase especificada. Los estilos creados usando una clase se pueden aplicar a otros elementos, no necesariamente de ese tipo.

Instrucciones de uso ordenador personal

.headline (transformación de texto: mayúsculas; color: azul claro;)

2.4. selector de identificación

El selector de ID le permite formatear uno elemento específico. La identificación debe ser única y solo puede aparecer una vez en una página.

#barra lateral (ancho: 300 px; flotante: izquierda;)

2.5. Selector de descendientes

Los selectores descendientes aplican estilos a elementos dentro de un elemento contenedor. Por ejemplo, ul li (transformación de texto: mayúsculas;): seleccionará todos los elementos li que sean hijos de todos los elementos ul.

Si necesita formatear descendientes elemento específico, a este elemento se le debe dar una clase de estilo:

p.first a (color: verde;) — este estilo se aplicará a todos los enlaces que sean descendientes de un párrafo con clase primero;

p .first a (color: verde;) - si agrega un espacio, se diseñarán los enlaces ubicados dentro de cualquier etiqueta .first class que sea descendiente del elemento

Primero a (color: verde;): este estilo se aplicará a cualquier enlace ubicado dentro de otro elemento, designado por la clase.first.

2.6. Selector de niños

Un elemento hijo es hijo directo de su elemento contenedor. Un elemento puede tener varios elementos secundarios, y cada elemento solo puede tener un padre. El selector secundario le permite aplicar estilos solo si el elemento secundario viene inmediatamente después del elemento principal y no hay otros elementos entre ellos, es decir, el elemento secundario no está anidado dentro de nada más.
Por ejemplo, p > strong seleccionará todos los elementos fuertes que sean hijos del elemento p.

2.7. Selector de hermanas

La hermandad ocurre entre elementos que comparten un padre común. Selectores elementos hermanos Le permite seleccionar elementos de un grupo de elementos del mismo nivel.

h1 + p: seleccionará todos los primeros párrafos inmediatamente después de cualquier etiqueta

sin afectar los restantes párrafos;

h1 ~ p: seleccionará todos los párrafos que sean hermanos de cualquier encabezado h1 e inmediatamente después de él.

2.8. selector de atributos

Los selectores de atributos seleccionan elementos según el nombre del atributo o el valor del atributo:

[atributo] - todos los elementos que contienen atributo especificado, — todos los elementos para los que se especifica el atributo alt;

selector[atributo] - elementos de este tipo que contienen el atributo especificado, img - sólo imágenes para las que se especifica el atributo alt;

selector[atributo="valor"] - elementos de este tipo que contienen el atributo especificado con un valor específico, img - todas las imágenes cuyo título contiene la palabra flor;

selector[atributo~="valor"] - elementos que contienen parcialmente valor dado, por ejemplo, si a un elemento se le dan varias clases separadas por un espacio, p - párrafos cuyo nombre de clase contiene característica;

selector[atributo|="valor"] - elementos cuya lista de valores de atributos comienza con la palabra especificada, p - párrafos cuyo nombre de clase es característica o comienza con característica;

selector[atributo^="valor"] - elementos cuyo valor de atributo comienza con el valor especificado, a - todos los enlaces que comienzan con http://;

selector[atributo$="valor"] - elementos cuyo valor de atributo termina valor especificado, img: todas las imágenes en formato png;

selector[atributo*="valor"] - elementos cuyo valor de atributo contiene cualquier lugar palabra especificada, a: todos los enlaces cuyo nombre contiene libro.

2.9. Selector de pseudoclase

Las pseudoclases son clases que en realidad no están adjuntas a etiquetas HTML. Le permiten aplicar reglas CSS a elementos cuando ocurre un evento u obedece a una regla específica. Las pseudoclases caracterizan elementos con las siguientes propiedades:

:hover: cualquier elemento sobre el cual se coloca el cursor del mouse;

:enfocar - elemento interactivo, al que se accedía mediante el teclado o se activaba mediante el ratón;

:active - elemento que fue activado por el usuario;

:válido: campos de formulario cuyo contenido se ha comprobado en el navegador para comprobar que cumple con el tipo de datos especificado;

:invalid — campos de formulario cuyo contenido no coincide con el tipo de datos especificado;

:habilitado: todos los campos del formulario activos;

:disabled: campos de formulario bloqueados, es decir, en estado inactivo;

:in-range: campos de formulario cuyos valores están en el rango especificado;

:fuera de rango: campos de formulario cuyos valores no están dentro del rango especificado;

:lang() - elementos con texto en el idioma especificado;

:not(selector) - elementos que no contienen el selector especificado - clase, identificador, nombre o tipo de campo de formulario - :not() ;

:objetivo es un elemento con el símbolo # al que se hace referencia en el documento;

:marcado: elementos de formulario seleccionados (seleccionados por el usuario).

2.10. Selector de pseudoclase estructural

Las pseudoclases estructurales seleccionan elementos secundarios según el parámetro especificado entre paréntesis:

:nth-child(impar) - elementos secundarios impares;

:nth-child(even) - elementos hijos pares;

:nth-child(3n) - uno de cada tres elementos entre los niños;

:nth-child(3n+2) - selecciona cada tercer elemento, comenzando con el segundo hijo (+2);

:nth-child(n+2) - selecciona todos los elementos a partir del segundo;

:nth-child(3) - selecciona el tercer elemento secundario;

:nth-last-child() - en la lista de elementos secundarios, selecciona el elemento con ubicación especificada, similar a:nth-child() , pero empezando por el último, en dirección opuesta;

:first-child: le permite aplicar estilo solo al primer elemento secundario de la etiqueta;

:last-child: le permite formatear el último elemento secundario de la etiqueta;

:only-child: selecciona un elemento que es el único elemento secundario;

:empty: selecciona elementos que no tienen hijos;

:root: selecciona el elemento que es la raíz del documento: el elemento html.

2.11. Selector de pseudoclase de tipo estructural

Indica un tipo específico de etiqueta secundaria:

:nth-of-type() - selecciona elementos similares a :nth-child() , pero solo tiene en cuenta el tipo de elemento;

:primero de tipo: selecciona el primer hijo de un tipo determinado;

:último de tipo - selecciona último elemento de este tipo;

:nth-last-of-type() - selecciona un elemento del tipo dado en una lista de elementos según la ubicación especificada, comenzando desde el final;

:only-of-type: selecciona el único elemento del tipo especificado entre los elementos secundarios del elemento principal.

2.12. Selector de pseudoelementos

Los pseudoelementos se utilizan para agregar contenido, que se genera utilizando la propiedad de contenido:

:primera letra: selecciona la primera letra de cada párrafo, se aplica solo a elementos de bloque;

:primera línea: selecciona la primera línea del texto del elemento, se aplica solo a elementos de bloque;

:antes: inserta el contenido generado antes del elemento;

:after: agrega contenido generado después del elemento.

3. Combinación de selectores

Para seleccionar elementos para formatear con mayor precisión, puede utilizar combinaciones de selectores:

img:nth-of-type(even) - seleccionará todas las imágenes pares, texto alternativo que contiene palabra css.

4. Selectores de agrupación

Se puede aplicar el mismo estilo a varios elementos al mismo tiempo. Para hacer esto, debe enumerar los selectores requeridos en el lado izquierdo de la declaración, separados por comas:

H1, h2, p, span ( color: tomate; fondo: blanco; )

5. Herencia y cascada

Herencia y cascada son dos conceptos fundamentales en CSS que están estrechamente relacionados. La herencia es donde los elementos heredan propiedades de su padre (el elemento que las contiene). La cascada se manifiesta en cómo diferentes tipos se aplican hojas de estilo a un documento y cómo las reglas en conflicto se anulan entre sí.

5.1. Herencia

Herencia Es el mecanismo por el cual ciertas propiedades se transmiten de un antepasado a sus descendientes. La especificación CSS proporciona la herencia de propiedades relacionadas con el contenido de texto de la página, como color, fuente, espacio entre letras, altura de línea, estilo de lista, alineación de texto, sangría de texto, transformación de texto, visibilidad, blanco. -espacio y espaciado entre palabras. En muchos casos, esto es conveniente porque no es necesario configurar el tamaño y la familia de fuentes para cada elemento de la página web.

Las propiedades relacionadas con el formato de bloque no se heredan. Estos son fondo, borde, visualización, flotante y claro, alto y ancho, margen, mínimo-máximo-alto y ancho, contorno, desbordamiento, relleno, posición, decoración de texto, alineación vertical e índice z.

herencia forzada

Al usar palabra clave heredar puede forzar a un elemento a heredar cualquier valor de propiedad de su elemento padre. Esto funciona incluso para propiedades que no se heredan de forma predeterminada.

Cómo se configuran y funcionan los estilos CSS

1) Los estilos se pueden heredar del elemento padre (propiedades heredadas o usando el valor heredado);

2) Los estilos ubicados en la hoja de estilos a continuación anulan los estilos ubicados en la tabla anterior;

3) Se pueden aplicar estilos de un elemento. diferentes fuentes. Puede comprobar qué estilos se aplican en el modo de desarrollador del navegador. Para hacer esto, haga clic en el elemento. clic derecho mouse y seleccione “Ver código” (o algo similar). La columna de la derecha enumerará todas las propiedades establecidas en este elemento o heredadas de un elemento principal, junto con los archivos de estilo en los que se especifican, y número de serie líneas de código.

Arroz. 2. Modo desarrollador en navegador de google Cromo

4) Al definir un estilo, puede utilizar cualquier combinación de selectores: un selector de elemento, una pseudoclase de elemento, una clase o un identificador de elemento.

div (borde: 1px sólido #eee;) #wrap (ancho: 500px;).box (flotante: izquierda;).clear (claro: ambos;)

5.2. Cascada

en cascada es el mecanismo que controla resultado final en una situación en la que se aplican diferentes reglas CSS a un elemento. Hay tres criterios que determinan el orden en que se aplican las propiedades: la regla importante, la especificidad y el orden en que se incluyen las hojas de estilo.

¡Regla!importante

El peso de una regla se puede especificar usando la palabra clave!important, que se agrega inmediatamente después del valor de la propiedad, por ejemplo, span (font-weight: negrita!important;) . La regla debe colocarse al final de la declaración antes del paréntesis de cierre, sin espacio. Dicho anuncio tendrá prioridad sobre todas las demás normas. Esta regla le permite cancelar un valor de propiedad y establecer uno nuevo para un elemento de un grupo de elementos en el caso de que no haya acceso directo al archivo de estilo.

Especificidad

Para cada regla, el navegador calcula especificidad del selector, y si un elemento tiene declaraciones de propiedad contradictorias, se tiene en cuenta la regla que tenga mayor especificidad. El valor de especificidad tiene cuatro partes: 0, 0, 0, 0. La especificidad del selector se define de la siguiente manera:

para id, se agrega 0, 1, 0, 0;
para la clase 0, se añade 0, 1, 0;
para cada elemento y pseudoelemento se suma 0, 0, 0, 1;
para un estilo en línea agregado directamente a un elemento: 1, 0, 0, 0;
Un selector universal no tiene especificidad.

H1 (color: azul claro;) /*especificidad 0, 0, 0, 1*/ em (color: plata;) /*especificidad 0, 0, 0, 1*/ h1 em (color: dorado;) /*especificidad: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (color: azul;) /*especificidad: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (color: gris;) /*especificidad 0, 0, 1, 0 */ #sidebar (color: naranja;) /*especificidad 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*especificidad: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Como resultado, se aplicarán al elemento aquellas reglas que sean más específicas. Por ejemplo, si un elemento tiene dos especificidades con valores 0, 0, 0, 2 y 0, 1, 0, 1, entonces ganará la segunda regla.

Orden de tablas conectadas

Puede crear varias hojas de estilo externas y conectarlas a una página web. Si aparecen en tablas diferentes diferentes significados propiedades de un elemento, entonces, como resultado, se aplicará al elemento la regla de la hoja de estilos que se enumera a continuación.

Este capítulo explica en detalle por qué las hojas de estilos en cascada (CSS) se denominan hojas de estilos en cascada. Primero, recordemos cómo puedes agregar estilo a una página web:

• conectar una hoja de estilo externa;
• agregar mesa interna estilos en un documento HTML a través de una etiqueta . Como resultado, el color de las etiquetas.

  Será rojo.

  Ésta es una forma de controlar la importancia de los estilos. Otra forma de aumentar la prioridad es aumentar específicamente el peso del selector, por ejemplo, agregándole un ID o una clase.

  ¡Anuncio!importante

  si te encuentras emergencia y necesitas aumentar la importancia de una propiedad, puedes agregarle una declaración!importante:

  P (color: rojo !importante;) p (color: verde;)

  ¡Además! importante anula los estilos en línea. Muchos desarrolladores desaconsejan el uso de!important con demasiada frecuencia. Principalmente, este anuncio Se acostumbra utilizarlo sólo cuando el conflicto de estilos no se puede superar por otros medios.

  Restablecer estilos usando reset.css

  En el capítulo anterior, ya mencionamos que cada navegador tiene sus propios estilos de documentos HTML integrados diseñados para mejorar la legibilidad. Probablemente ya hayas visto cómo se ve una página web desnuda en un navegador: enlaces subrayados en azul, fuente negra, títulos en negrita, etc.

  Cada navegador tiene sus propias diferencias en los estilos integrados: por ejemplo, IE no tiene sangría en el borde superior de la ventana, pero Firefox sí. Hay muchas diferencias de este tipo. Para que no interfieran con la compatibilidad entre navegadores al escribir propio estilo CSS, puede utilizar el método de restablecer estilos en línea.

  La herramienta de restablecimiento de estilo es esencialmente la misma. tabla CSS, que describe reglas que restablecen los estilos integrados de los navegadores a los valores de propiedad predeterminados. Esta tabla se llama reset.css y se utiliza para que puedas empezar a crear un estilo desde cero. Aquí hay un ejemplo mesa estándar reiniciar:

  Html, cuerpo, div, span, subprograma, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acrónimo, dirección, grande, cita, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centrar, dl, dt, dd, ol, ul, li, fieldset, formar, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, a un lado, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menú, navegación, salida, ruby, sección, resumen, tiempo, marca, audio, video (margen: 0; relleno: 0; borde: 0; tamaño de fuente: 100%; fuente: heredar; alineación vertical: línea de base;) /* Restablecimiento de función de visualización HTML5 para navegadores más antiguos */ artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, navegación, sección ( display: block; ) cuerpo ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( comillas: ninguna; ) blockquote:antes, blockquote:después, q:antes, q:después ( contenido: ""; contenido: ninguno; ) tabla ( colapso de bordes: colapso; espaciado de bordes: 0; )

  Hola, queridos lectores del blog. Hoy propongo continuar la conversación que iniciamos en el artículo anterior. Incluso antes, nos familiarizamos con lo que son las tablas. estilos en cascada, aprendí lo que significan y mucho más.

  Todos los materiales sobre hojas de estilo en cascada que ya se han publicado en este blog se pueden encontrar en. Hoy primero hablaremos sobre cómo combinar y agrupar selectores, y luego veremos en detalle las reglas que se aplican al mismo elemento en código HTML(Importante, contar selectores y escribir reglas en atributo de estilo).

  Combinaciones y agrupaciones de selectores en CSS

  Entonces, en artículos anteriores logramos considerar 7 tipos:

  De estos siete tipos posibles V lenguaje CSS Se pueden hacer combinaciones. Todas las combinaciones que haremos están directamente relacionadas con (antepasados ​​– descendientes, padres – hijos, hermanos – hermanas).

  El primer tipo de combinación se llama selector de contexto. Tiene en cuenta la relación de los elementos del código HTML según el principio "Ancestro - Descendiente":

  

  Separado los selectores en combinaciones se escriben separados por un espacio, y debes leerlo de derecha a izquierda. Eso. Las reglas CSS solo se aplicarán al último de esta combinación (el más a la derecha), y todo lo que viene antes solo nos permite especificar una aplicación más precisa (orientación) para nuestras reglas (énfasis).

  El primer ejemplo dice que todos los elementos de B (en negrita) que tienen ancestros elementos div, será de color verde.

  

  En el código anterior, sólo el fragmento subrayado será de color verde, porque entre sus ancestros hay un Div, y el segundo fragmento de código, resaltado con las etiquetas B, seguirá siendo el color seleccionado por defecto, porque el contenedor Div ya no está entre sus ancestros (solo P y Body):

  

  Estas combinaciones funcionan en cualquier navegador.

  El siguiente tipo de combinación sería selector de niños, que se basa en los principios de relación entre elementos de código del tipo "Padre - Hijo":

  

  Se escriben con separación más familiar (>):

  

  Esta entrada será interpretado por el navegador de la siguiente manera: for , cuyo "padre" (ancestro más cercano) es el contenedor Div, se resaltará en rojo.

  

  En el ejemplo anterior, solo los párrafos delineados se colorearán de rojo porque están incluidos directamente en el contenedor Div que es su padre (ancestro más cercano). Si modifica el ejemplo anterior de un selector secundario para que se vea así:

  Cuerpo > p (color:rojo)

  Entonces sólo el último párrafo estará resaltado en rojo, porque... su padre es Etiqueta del cuerpo, y los dos primeros párrafos seguirán teniendo el color que se les proporcionó de forma predeterminada (Body es su antecesor, pero no el padre, que es Div). Selectores infantiles no funciona en el navegador IE 6.

  Cómo y por qué se agrupan los selectores en el código CSS

  La última combinación se llama selectores adyacentes y cumple con los principios de relación entre elementos de código HTML del tipo “Hermanas - Hermanos”. Pueden utilizar “+” o “~” como separador:

  

  Esta entrada significa que el contenido del elemento I (en cursiva) se coloreará de rojo sólo si su vecino más cercano a la izquierda (arriba en el código) es el elemento B (en negrita). Por ejemplo, esta condición Se seguirá en este ejemplo:

  

  Si escribe el selector adyacente en codigo css en esta forma:

  H1 ~ p (color: rojo)

  Esto significará que todos los párrafos (P) que tengan un elemento H1 adyacente (encabezado) ubicado más arriba en el código se colorearán de rojo. Se refiere específicamente a elementos vecinos (relaciones del tipo “Hermanas – Hermanos”). En el siguiente ejemplo selector dado Los párrafos encerrados en un círculo satisfarán:

  

  Desafortunadamente, tampoco se admiten combinaciones de selectores adyacentes en el navegador Ie 6. En Ie 6 solo se admite el primer tipo de combinación, pero en Ie 7 y superiores se admiten todos los demás. En otros navegadores no debería haber problemas.

  Selectores en CSS también puedes agrupar. Por ejemplo, si algunos de ellos usan uno o más las mismas reglas, luego se pueden combinar en un grupo para reducir la cantidad de código CSS.

  

  En el ejemplo que se muestra en la captura de pantalla, se repite para cada selector de encabezado (h1-3), lo que puede causar complejidad (trabajo múltiple) si desea cambiar el valor de esta propiedad. Por tanto, la segunda opción, la entrada agrupada, parece un poco preferible.

  Tenga en cuenta que al agrupar los selectores se escriben separados por comas. Si hay más reglas idénticas, el ahorro de código será más notorio. Y aquellas reglas que eran únicas aún debían escribirse individualmente.

  Prioridades de las propiedades CSS (con y sin importantes)

  Ahora pensemos en qué estilo usará el navegador si no hay estilos para de este elemento¿No se proporciona ningún código HTML? Y para ello existe una especificación correspondiente, donde se describe todo esto.

  

  Como puede ver, ahora se ha producido la separación final de Html y Css. Aquellos. Incluso para código HTML puro, el navegador seguirá utilizando las propiedades predeterminadas de las hojas de estilo. Así que aquí están las propiedades predeterminadas: tener la prioridad más baja.

  Las propiedades que el usuario asigna en la configuración de su navegador tienen mayor prioridad. Estos estilos se aplicarán a cualquier documento que vea en este navegador.

  Es cierto que no todos los navegadores tienen esta función, pero al menos es decir, Opera y Opera la tienen. Aquellos. Si lo desea, el usuario podrá incluir su propio archivo CSS como fuente de marcado de estilo.

  Por ejemplo, en Es decir, para hacer esto, debe seleccionar "Herramientas" - "Opciones de Internet" en el menú superior derecho y luego, en la primera pestaña "General", hacer clic en el botón inferior "Apariencia". En la ventana que se abre, debe marcar la casilla "Diseñar usando un estilo personalizado" y usar el botón "Examinar" para encontrar el archivo de marcado de estilo CSS que necesita en su computadora:

  

  Aquellos. el usuario tiene la capacidad de hacer que cualquier sitio abierto en el navegador se vea de acuerdo con sus requisitos descritos en el archivo CSS. se llama "estilos personalizados" y tienen prioridad sobre los estilos definidos en la especificación predeterminada. Pero aún así mayor prioridad tendrá los llamados estilos de autor.

  Es decir, si yo (el desarrollador del sitio) quisiera usar estilos distintos a los predeterminados en el diseño de cualquier elemento de código HTML (recuerde, están descritos en la especificación), entonces el usuario, con su propio archivo css No podrá interrumpir mi diseño.

  ¿Se verá obligado el usuario a aceptarlo? No. el tiene la oportunidad Aumente la prioridad de sus propiedades CSS agregando Importante al final de cada uno de ellos. Esta palabra está escrita a través carácter espacial y va precedido de un signo de exclamación:

  P (color: rojo! Importante;)

  Si el usuario tiene la misma propiedad con Importante en su propio archivo de estilo, que conectó al navegador, verá todos los párrafos en rojo. Pero el autor (desarrollador) del sitio también podría utilizar Importante para esta propiedad. ¿Quién ganará entonces y quién tendrá mayor prioridad?

  Decidimos que estilos personalizados con Importante tendrá en todo caso mayor prioridad que los estilos del autor, ya sean con o sin Importante.

  Resumamos en forma de lista toda la información presentada sobre prioridades. propiedades de estilo. La prioridad disminuirá de arriba a abajo:

  1. Personalizado con Importante
  2. Copyright con importante
  3. Derechos de autor
  4. Costumbre
  5. Estilos aceptados para elementos HTML en la especificación por defecto (cuando ni el autor ni el usuario han especificado nada más)

  Aquellos. Sin Importante, los estilos del autor son más importantes y, con ellos, los estilos del usuario son los más importantes y prioritarios. Bueno, ahora nos ocuparemos de las tablas del autor, porque lo que hace el usuario nos es desconocido y está envuelto en oscuridad.

  Cómo aumentar las prioridades de las propiedades CSS en estilos de autor

  Es ahora cuando pasamos a la pregunta. mesas en cascada estilos CSS . Veamos esto con un ejemplo para que quede más claro. Digamos que tenemos un fragmento de código con los siguientes elementos HTML (un párrafo dentro de un contenedor Div):

  Contenido del contenedor

  Primero anotemos las siguientes propiedades:

  P (color:rojo) .sbox (fondo:#f0f0f0)

  Como resultado, tanto el primero de ellos se aplicará al párrafo (ya que está formado por la etiqueta P), como la propiedad que especifica fondo gris para un elemento con la clase “sbox”, que nuevamente este párrafo tiene:

  Ahora agreguemos una propiedad más al segundo selector (de la clase), que entrará en conflicto con la primera línea (ambos establecen, pero usan valores diferentes):

  P (color:rojo) .sbox (fondo:#f0f0f0;color:azul)

  Esto hará que el color del texto del párrafo cambie a azul en lugar de rojo.

  ¿Por qué? Porque así es exactamente como se resuelve el conflicto cuando el mismo elemento HTML El código recibe varias reglas idénticas a la vez, pero con diferentes valores y de diferentes lugares en el código CSS. Para determinar qué regla tiene mayor prioridad, debe contar sus selectores.

  Además de esto tú mismo Los selectores tienen gradación según prioridades.. La identificación tiene la máxima prioridad. En este ejemplo, el color del texto será azul precisamente porque la prioridad del Id (#out) será mayor que la del selector de etiquetas (p):

  P (color:rojo) #out (color:azul)

  Más abajo en la escala de prioridades se encuentran los selectores de clases, pseudoclases y atributos. En el siguiente ejemplo, la etiqueta (p) se reproducirá nuevamente y el color del texto del párrafo será azul, porque compite con el selector de mayor prioridad (clase):

  P (color:rojo) .sbox (color:azul)

  Bueno, la prioridad más baja (sin contar el universal *, que tiene el peso más bajo y no realiza ningún cambio en dichos empalmes) son los selectores de etiquetas y pseudoelementos.

  Div p (color:rojo) p (color:azul)

  ¿De qué color será el texto del párrafo resultante? Así es, es rojo, porque... Esta propiedad tiene más selectores de etiquetas (dos frente a uno). Ah como. Aquellos. Las identificaciones se consideran primero. Si no se identifica al ganador, se consideran clases, pseudoclases y atributos. Bueno, si no se resolvió nada allí o no se encontraron, entonces se consideran selectores de etiquetas y pseudoelementos.

  Pero es muy posible que no surja un ganador y los seleccionadores de las clases competidoras tengan la misma prioridad en total. Por ejemplo, para nuestro sufrido párrafo encerrado en un contenedor Div:

  Contenido del contenedor

  Sería muy posible escribir un fragmento de código CSS como este:

  Div.box #out(color:rojo) #in p.sbox(color:azul)

  ¿Y de qué color debería ser el texto del párrafo? Ambas combinaciones describen exactamente nuestro párrafo. La primera, como de costumbre, debe leerse de derecha a izquierda: aplique estas propiedades (color: rojo) a un elemento con Id #out, que se encuentra en algún lugar dentro (tenlo entre los “antepasados”) del contenedor Div con el clase.box (div.box). Coincide completamente con nuestro párrafo.

  La segunda combinación: aplicar estas propiedades (color:azul) a un elemento de párrafo con la clase sbox (p.sbox), que está dentro de cualquier elemento con Id #in. Nuevamente, describe completamente nuestro párrafo. Contemos los selectores.

  Las identificaciones aparecen una vez en ambas combinaciones y lo mismo puede decirse de las clases. Sólo queda contar los selectores de etiquetas, pero además se usan el mismo número de veces en ambas combinaciones (una). Emboscada.

  lo tenemos prioridades iguales la misma propiedad tiene diferentes valores (color de texto rojo o azul). ¿Cómo solucionará el navegador este dilema?

  La regla se aplicará aquí: quien es el ultimo, tiene razón. Por lo tanto, en mi ejemplo, el color del texto del párrafo será azul, porque esta propiedad (color:azul) se encuentra más abajo en el código. Si estas reglas se invierten:

  #in p.sbox(color:azul) div.box #out(color:rojo)

  Como resultado, el color del texto del párrafo cambiará a rojo. Q.E.D. Puedes añadir, por ejemplo, otro selector de etiquetas a cualquier combinación e inclinaremos la balanza a su favor, aunque no esté más abajo en el código:

  Cuerpo #en p.sbox(color:azul) div.box #out(color:rojo)

  En este caso, el color del párrafo cambiará a azul. El selector universal “*” no tiene ningún efecto en el cálculo de prioridades. Por cierto, justo arriba vimos una forma de aumentar la prioridad de las reglas CSS agregando Importante. En nuestro ejemplo podría verse así:

  P (color:verde! Importante) #in p.sbox(color:azul) div.box #out(color:rojo)

  ¿De qué color será el texto del párrafo en este caso? Verde, por supuesto. Y ni siquiera necesitas contar nada, porque agregando importante a la propiedad de estilo esto resuelve tema controvertido sin ambigüedades, sin importar dónde se encuentre en el código y cuántos selectores tenga.

  Pero Importante no es la única manera de aumentar incondicionalmente la prioridad de una propiedad. La segunda forma de aumentar puede ser usar estilo. propiedades en el atributo Estilo el elemento HTML que necesita.

  Aquellos. dentro de la misma etiqueta P sufrida, agregue un atributo de Estilo que especifique cualquier color:

  Contenido del contenedor

  Eso es todo. Ahora, independientemente de qué propiedades se especifiquen para este elemento en archivo externo hojas de estilo o etiquetas interiores Estilo HTML código, el color del texto del párrafo será amarillo.

  Pero no podrá superar las propiedades con Importante. Aquellos. En el último ejemplo, donde agregamos la regla "p (color:verde! Importante)", el color del texto seguirá siendo verde, aunque style="color:amarillo".

  De hecho, la prioridad de las dos reglas (con Importante en el archivo de hoja de estilo externo y en el atributo de estilo) es igual, lo que significa que debemos proceder a contar los selectores. ¿Pueden realmente estar dentro del atributo de estilo?

  Sí, no puede haber ninguno, lo que significa que la regla escrita en el atributo de estilo siempre perderá frente a la regla con Importante solo debido al menor número de selectores (cero será menor que cualquier número).

  Bueno, ¿entonces qué? dará la máxima prioridad propiedad CSS ? Así es, se escribirá en el atributo de estilo e incluso con Importante:

  Contenido del contenedor

  
  
  

  En este caso, el color del texto del párrafo será amarillo y será imposible interrumpirlo con nada del estilo del autor. Hemos encontrado una forma absoluta de establecer estilos. Sólo un usuario con los suyos puede interrumpirlo propio archivo estilos y la propiedad Importante especificada para esta propiedad.

  Así que intentemos componer lista de factores que influyen en la prioridad propiedades en estilos de autor en orden descendente:

  1. Especificación de una propiedad en el atributo de estilo la etiqueta deseada junto con importante
  2. Agregar Importante a una propiedad en un archivo de hoja de estilo externo o en la etiqueta de estilo directamente en el código HTML
  3. Simplemente es necesario establecer esta propiedad en el atributo de estilo en el elemento.
  4. Usar una mayor cantidad de ID para una propiedad determinada
  5. Uso más selectores de clase, pseudoclase o atributo
  6. Usar más selectores de etiquetas y pseudoelementos
  7. Menor ubicación de propiedad en el código CSS, en igualdad de condiciones

  De hecho, las reglas en el atributo de estilo se usan muy raramente (imagínese lo difícil que sería en este caso realizar cambios en todo el código del sitio y no en archivo separado CSS).

  Este atributo se utiliza principalmente cuando sólo necesitas probar algo rápidamente. Bueno, también es conveniente si insertas tu código en el de otra persona. páginas HTML, que tienen su propio estilo y que () puede heredar para los elementos insertados.

  ¿Por qué y cómo insertar su código en las páginas de otras personas? Puede que no lo necesitemos, pero Yandex y Google lo hacen en los sitios de otras personas (nuestros sitios).

  Al agregar el atributo de estilo a todos los elementos del código del bloque de anuncios, con las propiedades especificadas en él y el Importante agregado, ya no tendrá que preocuparse de que el código del anuncio se cambie de ninguna manera (aunque los anuncios de Yandex aún se pueden cambiar usando CSS e Importante, al parecer no utilizaron este método).

  ¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

  Puedes ver más vídeos entrando a

  ");">
  

  Quizás te interese

  Selectores de etiqueta, clase, Id y universales, así como selectores de atributos en CSS moderno
  Selectores de pseudoclases y pseudoelementos en CSS (hover, first-child, first-line y otros), relaciones entre etiquetas de código HTML
  Estilo de lista(tipo, imagen, posición) - reglas CSS para personalizar la apariencia de las listas en código HTML
  ¿Para qué sirve CSS y cómo conectar hojas de estilo en cascada? documento HTML y los conceptos básicos de la sintaxis de este lenguaje.

  Más cerca de las dos de la mañana, me vienen a la mente preguntas no menos eternas con pensamientos sobre lo eterno: "¿cuál es el significado de la vida?", "¿Por qué una persona duerme?" o "¿Por qué diablos no funciona este #%^$?" y cuanto más se acerca la mañana, más empieza a preocuparnos esta última cuestión.

  A continuación hablaré sobre por qué diablos los selectores CSS a veces no se comportan de la manera que creemos que es correcta y sobre cómo deberían comportarse realmente.

  Capítulo uno: ¡vamos bien!

  Los selectores se ponderan para determinar qué estilo se aplicará cuando varios selectores de alguna manera apunten al mismo elemento e intenten cambiar el mismo estilo. Quien pesa más tiene estilos, y las leyes del pesaje son mil veces más sencillas que las que parecen puramente empíricas.

  Entonces, sopesémoslo: primero imaginemos un par de filas de 8 números:

  0,1,0,0,0,0,0,0
  1,0,0,0,0,0,0,0

  Familiarícese: así es como se ven dos selectores en números, para que nadie adivine nada, los llamaré convencionalmente "superior" e "inferior".

  Para saber cuál es más pesado, debes hacer próximos pasos y no confundas nada:

  1. Nos fijamos en los números más a la izquierda.
  2. Elijamos la mayoría de ellos. - este selector será el más pesado
  3. Si los números son iguales, mueva un número hacia la derecha y repita las instrucciones del paso 2.
  4. Si todos los números son iguales, entonces se aplican los estilos del selector que se declaró en último lugar.

  el peor secreto

  Si lees esto, tu tranquilidad desaparecerá para siempre, pero al menos podrás dormir por la noche.

  Revelando el peor secreto, le diré cómo convertir un selector ordinario en algo tan comprensible y hermosos números? Todo es como siempre muy sencillo:

  1. Etiquetas Para cada etiqueta en el selector, puede agregar un uno al número más a la derecha:

     A es 0,0,0,0,0,0,0,1 div a es 0,0,0,0,0,0,0,2

  2. Clases, para cada clase o pseudoclase en el selector puedes agregar uno al segundo número desde la derecha

     Head .logo es 0,0,0,0,0,0,2,0 .logo.big es 0,0,0,0,0,0,2,0 div:el primer hijo es 0,0, 0 ,0,0,0,1,1 .logog > .big – y esto también es 0,0,0,0,0,0,2,0
     Sí, lo hiciste bien. Al selector de CSS no le importaban todas las cosas sofisticadas como espacios o ">".

  3. para cada IDENTIFICACIÓN en el selector, agregue uno al tercer número desde la derecha.

     #cabeza es 0,0,0,0,0,1,0,0 #cabeza #logo también es 0,0,0,0,0,2,0,0

  Creo que entiendes el punto, ahora puedes realizar un pequeño cuestionario para comprobarlo:

  Prueba

  
  
  
  Pregunta:¿De qué color será el fondo del párrafo?
  Respuesta: Así es, rojo, porque al selector no le importa lo que creas que hay allí y no le importa la distancia entre las etiquetas. Y como el peso de las etiquetas es igual, se aplicará la última.
  ?
  
  
  
  Pregunta:¿De qué color será el fondo de nuestro div?
  Respuesta: Así es, rojo, porque al medir el peso en profundidad, todavía se pone un espacio entre las clases, un signo de mayor que, o se escriben de cerca. El peso de todos estos selectores es el mismo, lo que significa que se utilizará el último.
  ?
  
  
  
  Pregunta: Sigue igual.
  Respuesta: Y la respuesta, para variar, es otra: nuestra diva será gris. Porque, como mencioné anteriormente, el selector es absolutamente indiferente a lo que quisiste decir allí. El primer selector tiene más peso y a nadie le importa que probablemente este no sea el comportamiento esperado.

  Seguimos desvelando secretos

  Todavía nos quedan muchos números y probablemente realmente queramos saber qué significan todos: seguimos revelando los secretos.
  1. Selector * absolutamente ingrávido, es decir, completamente.
  2. selector de atributos Esta es la pseudoclase más común y pesa lo mismo que las clases regulares.
  3. Cualquier estilo en línea escrito en el atributo style=”” de un elemento automáticamente tiene prioridad 0,0,0,0,1,0,0,0 , lo que inmediatamente lo hace muy genial.
  4. Y los siguientes cuatro dígitos son todos nuestros viejos amigos solo con el atributo !importante

     Div (color de fondo: gris! Importante;) Tiene peso al definir la propiedad de color de fondo: 0,0,0,1,0,0,0,0 .header (color de fondo: gris! Importante;) 0, 0,1,0,0,0,0,0

  A todos nos encantan los cuestionarios

  ?