CSS (hojas de estilo en cascada) es un lenguaje de hojas de estilo que le permite adjuntar estilos (como fuentes y colores) a documentos estructurados (como documentos HTML y aplicaciones XML). Los estilos CSS se utilizan normalmente para crear y diseñar elementos de páginas web e interfaces de usuario escritas en HTML y XHTML, pero también se pueden aplicar a cualquier tipo de documento XML, incluidos XML, SVG y XUL. Al separar el estilo de presentación del documento del contenido del documento, CSS facilita la creación de páginas web y el mantenimiento de sitios.

CSS admite hojas de estilo específicas de medios para que los autores puedan adaptar la presentación de sus documentos a navegadores visuales, dispositivos auditivos, impresoras, dispositivos braille, dispositivos portátiles y más.

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: selector Y anuncios. En HTML, los nombres de los elementos no distinguen entre mayúsculas y minúsculas, por lo que "h1" funciona igual que "H1". La declaración consta de dos partes: el nombre de la propiedad (por ejemplo, color) y el valor de la propiedad (gris). 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 del anuncio

Aunque el ejemplo proporcionado sólo intenta afectar un par de propiedades necesarias para representar un documento HTML, califica como una hoja de estilo por derecho propio. Cuando se combina con otras hojas de estilo (una característica fundamental de CSS es que las hojas de estilo se combinan), la regla determinará la presentación final del documento.

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 es un 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).

...

1.3. Estilos incorporados

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 un tipo determinado 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 establecer estilos para uno o más elementos con el mismo nombre de clase, colocados en diferentes lugares de la página o en diferentes páginas del sitio. Por ejemplo, para crear un título con la clase de título, debe agregar el atributo de clase con el valor del título a 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.

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

Si un elemento tiene múltiples atributos de clase, sus valores se concatenan con espacios.

Instrucciones para usar una computadora personal.

2.4. selector de identificación

El selector de ID le permite formatear uno elemento específico. El valor de identificación debe ser único, puede aparecer solo una vez en una página y debe contener al menos un carácter. El valor no debe contener espacios.

No hay otras restricciones sobre la forma que puede tomar la identificación; en particular, los identificadores pueden ser todos números, comenzar con un número, comenzar con un guión bajo, solo tener signos de puntuación, etc.

La identificación única de un elemento se puede usar para una variedad de propósitos, incluso como una forma de hacer referencia a partes específicas de un documento usando ID de fragmento, como una forma de apuntar a un elemento al crear secuencias de comandos y como una forma de diseñar un elemento específico desde CSS. .

#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 desea formatear los descendientes de un elemento en particular, debe darle a ese elemento una clase de estilo:

p.first a (color: verde;) - este estilo se aplicará a todos los enlaces descendientes del párrafo con la primera clase;

p .first a (color: verde;) - si agrega un espacio, se diseñarán los enlaces ubicados dentro de cualquier etiqueta .first class que sea secundaria 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, pero cada elemento solo puede tener un elemento principal. 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. Los selectores hermanos le permiten 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 título 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 el 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 un valor dado, por ejemplo, si se especifican varias clases para un elemento separado 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 con el valor especificado, img - todas las imágenes en formato png;

selector[atributo*="valor"] - elementos cuyo valor de atributo contiene la palabra especificada en cualquier lugar, 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;

:focus: un elemento interactivo al que se navegó mediante el teclado o se activó mediante el mouse;

: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 la ubicación especificada, similar a :nth-child() , pero comenzando desde el último, en la 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;

:last-of-type: selecciona el ú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 cuyo texto alternativo contenga la 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 se aplican diferentes tipos de hojas de estilo a un documento y en 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 permite 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

Puede utilizar la palabra clave heredar para forzar que un elemento herede cualquier valor de propiedad de su elemento principal. 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 principal (propiedades heredadas o utilizando 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 diferentes fuentes a un elemento. Puede comprobar qué estilos se aplican en el modo de desarrollador del navegador. Para hacer esto, haga clic derecho en el elemento 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 el número ordinal de la línea de código.

Arroz. 2. Modo desarrollador en el navegador Google Chrome

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 un mecanismo que controla el resultado final en una situación en la que se aplican diferentes reglas CSS al mismo 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. Tal anuncio tendrá prioridad sobre todas las demás reglas. 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 se encuentran diferentes valores de propiedad para un elemento en diferentes tablas, como resultado, se aplicará al elemento la regla que se encuentra en la hoja de estilo que se enumera a continuación.

Bueno, para empezar, diré que el selector se usa para identificar de forma única el elemento en el documento html al que queremos aplicar un estilo CSS particular.

Selector de elementos

Hasta este punto hemos estado trabajando con este selector. Se utilizó como selector el nombre del elemento html al que queríamos aplicar este estilo. Aquellos. Habiendo escrito una clase, por ejemplo, para el párrafo (P), todos los párrafos de la página adquirieron el estilo de esta clase.

PAG{
tamaño de fuente: 12px
}

Ahora imagina una situación en la que necesitas hacer el primer párrafo con un estilo, el segundo con otro, el tercero con un tercero, etc. Aquí vendrá en nuestra ayuda. selector por clase.

Selector por clase

Veamos cómo crear una clase genérica en CSS. Y es muy sencillo hacer esto: primero ponemos un punto, luego inmediatamente, sin espacio, escribimos el nombre de la clase, y luego el estilo entre llaves. Bueno, por ejemplo:

.verde {
familia de fuentes: arial, verdana, sans-serif;
tamaño de fuente: 12px; color verde;
}

¿Cómo aplicar este estilo?

Digamos que queremos aplicar este estilo a un párrafo específico del documento. Así es como se verá en html:

clase = "verde" > ... texto de párrafo...

Como puede ver, el atributo se utiliza. clase con el significado del nombre del estilo. ¿Está vacío? Aquí tienes otro ejemplo:

Este es un párrafo normal, utiliza un selector de elementos.

Class ="green "> Este párrafo es verde porque se le ha aplicado una clase

Clase="grande_rojo" > Y este párrafo está en letra más grande y en rojo.

Este párrafo vuelve a ser normal, por clase de selector de elementos.

pag {
familia de fuentes:arial,verdana,sans-serif;
tamaño de fuente: 18px;
}
.verde(color verde;)
.gran rojo{
tamaño de fuente: 28px;
color rojo;
}

Primero especificamos el estilo base para todos los párrafos (selector por elemento) y luego, si queremos cambiar algo en cualquier párrafo, creamos un estilo especial para él (selector por clase) y lo asignamos a este párrafo. Cuando creamos esta clase tan especial, debemos escribir allí solo aquellas propiedades que queremos agregar o cambiar en relación al estilo base de este elemento.

Las clases del ejemplo anterior se pueden aplicar no sólo a un párrafo, sino también, por ejemplo, a los títulos, o por ejemplo a una celda de la tabla, o a toda la tabla; en resumen, se pueden aplicar dondequiera que puedan afectar algo. (en este caso, dondequiera que haya opción de color y texto).

Puedes hacer que la clase actúe sólo sobre un elemento específico (por ejemplo, un párrafo) especificando el nombre del elemento antes del punto:

P.verde(color verde;)

Ahora la clase verde no actuará sobre nada más que el elemento P.

Arriba

Selector por identificación

Este selector se utiliza si necesita seleccionar un único elemento que sea único y diferente de todos los demás en el documento. Por ejemplo, resaltemos el primer encabezado de la página de cierta manera:

parte html:

<Н1 id="primer encabezado" > Primer título de la página

css - parte:

H1#primerencabezado { color rojo; peso de fuente: negrita; alineación de texto: centro }

Como puedes ver, en la parte html, en lugar del atributo class, se usa el atributo id, y en el css, en lugar de un punto, se usa el signo #.

En principio, se puede hacer lo mismo usando un selector de clases, según te guste :)

Arriba

Selector de contexto

Esto es algo muy útil. Digamos que tenemos una página con tablas y párrafos de texto, y tanto en la tabla como en los párrafos hay palabras en negrita (fuerte). Y entonces, de repente necesitábamos hacer que las palabras del párrafo resaltadas en negrita se volvieran verdes. Asi que aqui esta.

Un selector es parte de una regla CSS que le dice al navegador a qué elemento (o elementos) de una página web se le aplicará estilo.

El término selector puede referirse a un selector simple, un selector compuesto, un selector complejo o una lista de selectores.

A selectores simples relatar:

• selector de tipo
• selector universal
• selectores de atributos
• selector de identificador
• selector de clase
• pseudoclases

Selector CSS	Ejemplo	Descripción	CSS
.clase	.mi clase	Selecciona todos los elementos con clase myClass (class="myClass").	1
#identificación	#principal	Selecciona el elemento con id principal (id="main").	1
	*	Seleccionando todos los elementos.	2
elemento	durar	Seleccionando todos los elementos .	1
elemento, elemento	div, intervalo	Seleccionando todos los elementos y todos los elementos .	1
[atributo]		Selecciona todos los elementos con un atributo de título.	2
[atributo="valor"]		Selecciona todos los elementos con un atributo de título cuyo valor coincida exactamente con el valor especificado en el selector (title="cost"). !}	2
[atributo~="valor"]		Selecciona todos los elementos con un atributo de título cuyo valor (en cualquier lugar) contenga la subcadena (como una sola palabra) "uno" (título="uno y dos"). !}	2
[atributo|="valor"]		Selecciona todos los elementos con un atributo lang cuyo valor comienza con "ru".	2
[atributo^="valor"]	a	Seleccionar cada elemento con un atributo href cuyo valor comienza con "https".	3
[atributo$="valor"]		Selecciona todos los elementos con un atributo src cuyo valor termina en ".png" (src="some_img.png").	3
[atributo*="valor"]		Selecciona todos los elementos con un atributo de título cuyo valor (en cualquier lugar) contenga la subcadena (como una sola palabra o parte de ella) "uno" (título="uno y dos"). !}	3

Selector compuesto es una secuencia de selectores simples que no están separados por combinadores, es decir, un selector es seguido inmediatamente por el siguiente. Selecciona un elemento que coincide con todos los selectores simples que contiene. El selector de tipo o selector universal incluido en un selector compuesto debe aparecer primero en esta secuencia. En un selector compuesto sólo se permite un selector de tipo o selector universal.

Span.className p.className1.className2#someId:hover

Selector complejo es una secuencia de selectores que están separados por combinadores.

Lista de selectores son selectores separados por comas.

Combinadores

Para combinar selectores CSS simples, se utilizan combinadores para indicar la relación entre selectores simples. Hay varios combinadores diferentes en CSS2 y uno adicional en CSS3, cuando los usas cambian la naturaleza del selector en sí.

Pseudoclases

Una pseudoclase es un selector simple que se usa para seleccionar algo que no se puede seleccionar usando otros selectores o que se puede seleccionar de una manera bastante difícil.

Pseudoclase	Ejemplo	Descripción	CSS
:enlace	un enlace	Selecciona todos los enlaces no visitados.	1
:visitado	a:visitado	Seleccione todos los enlaces visitados.	1
:activo	a: activo	Seleccionar un enlace activo.	1
:flotar	a: flotar	Seleccionar un enlace al pasar el cursor del mouse.	1
:enfocar	entrada: foco	Selección de elementos , que está en foco.	2
:primer hijo	p:primer hijo	Seleccionar cada elemento Cuál es el primer hijo de su padre.	2
:idioma(idioma)	p: idioma (ru)	Seleccionar cada elemento Con un atributo lang cuyo valor comienza con "ru".	2
:primero de tipo	p: primero de tipo	Seleccionar cada elemento ¿Cuál es el primero de los elementos?	3
:último tipo	p:último tipo	Seleccionar cada elemento ¿Cuál es el último de los elementos? Su elemento padre.	3
:solo de tipo	p: único de tipo	Seleccionar cada elemento ¿Cuál es el único elemento Su elemento padre.	3
:hijo único	p: hijo único	Seleccionar cada elemento Cuál es el único elemento hijo de su elemento padre.	3
:n-ésimo hijo(n)	p: n-ésimo hijo (2)	Seleccionar cada elemento Su elemento padre.	3
:n-ésimo-último-hijo(n)	p: enésimo-último-hijo(2)	Seleccionar cada elemento Que es el segundo hijo de su elemento padre, contando desde el último hijo.	3
: enésimo de tipo (n)	p: enésimo tipo (2)	Seleccionar cada elemento cual es el segundo hijo Su elemento padre.	3
:n-ésimo-último-de-tipo(n)	p:nésimo-último-de-tipo(2)	Seleccionar cada elemento cual es el segundo hijo Su elemento padre, contando desde el último elemento hijo.	3
	3
:no(selector)	:no(p)	Seleccionar todos los elementos excepto el elemento .	3

Pseudoelementos

Un pseudoelemento es un elemento virtual que no existe explícitamente en el árbol de elementos del documento. Los pseudoelementos se utilizan para seleccionar partes de un elemento que no se pueden seleccionar utilizando otros selectores, y también para diseñar partes de un elemento en lugar de todo el elemento.

Los selectores CSS son una estructura CSS específica que le permite seleccionar un elemento específico en el código HTML y aplicarle estilo. Cada uno de ellos tiene su propia especificidad, es decir, puede superponerse a las propiedades de otros "más débiles".

Selector CSS por etiqueta y clase

Los selectores más simples son por etiqueta y por clase. El selector de etiquetas es el más general y selecciona todos los elementos con una etiqueta específica. Por ejemplo, puede escribir código CSS como este en las propiedades: "p (color: azul)", donde "p" es la etiqueta del párrafo y la propiedad "color: azul" indica el color del texto. Como resultado, el texto de todos los párrafos se volverá azul. Los selectores por etiqueta se pueden enumerar separados por comas, entonces no será necesario escribir la propiedad dos veces.

Si a algunos párrafos se les asigna una clase, como "azul", entonces la activación del selector CSS se puede ajustar aún más. Pero su entrada en las propiedades será diferente: aparecerá un punto antes del nombre de la clase. Es decir, para seleccionar todos los párrafos a los que se les asigna la clase "azul" y colorearlos de azul, es necesario escribir el siguiente código en las propiedades CSS: ".blue: (color: azul)". Este selector es más específico y potente que el selector de etiquetas CSS, pero es uno de los más simples. También hay reglas más complejas que le permiten seleccionar pequeños grupos de elementos.

Características de los selectores por ID.

Los selectores por id o por identificador son más específicos que por clase y atributo. Es decir, cuando se utilizan en cascada, "superarán" a otros selectores similares. Los identificadores también ayudan a seleccionar con precisión un elemento específico en el código, pero su uso en el diseño de páginas se considera una mala práctica entre los diseñadores de diseño. Sólo en casos muy raros, por ejemplo al crear un control deslizante usando CSS, esta práctica es aceptable. El hecho es que dentro de una página solo puede haber un elemento con una identificación específica. Por lo tanto, debido a la singularidad del selector de identificación de CSS, solo se puede utilizar en un único elemento. En este caso, tiene mucho más sentido utilizar clases en lugar de identificadores.

Diferentes opiniones sobre el selector de id.

Pero también existe la opinión contraria de que el identificador ayuda a determinar qué fragmento de código en la página debe estar en una sola copia. Dicho esto, si bien los selectores de clases pueden reemplazarlo, deben usarse para grupos grandes de elementos y, en lugares donde se requiere precisión, es mejor usar id. Cada diseñador de diseño tiene derecho a desarrollar su propia opinión personal sobre este tema y escribir código en su propio estilo. Al escribir un selector por identificación, se usa el símbolo "#" antes. Es decir, la línea de código quedará así: “#blue: (color: azul)”. Con esta entrada, el elemento con el identificador “#blue” pasará a ser de color azul.

Usando una cascada

Cuando utilice selectores de identificación de CSS en HTML, también puede utilizar la propiedad en cascada. Por ejemplo, si dentro de una etiqueta con un identificador necesita seleccionar alguna etiqueta secundaria y cambiar sus propiedades, primero debe escribir el nombre del identificador con una almohadilla, luego la etiqueta secundaria y sus propiedades. Estos selectores se denominan anidados. Es decir, la línea de código se verá así: "#id p (color: azul)". Luego, dentro del elemento principal con este identificador, el color del texto del párrafo secundario cambiará a azul.

Usar selectores de elementos secundarios

Otra opción para usar una cascada para cambiar las propiedades de los elementos secundarios es si solo necesita seleccionar una parte específica del código. También se le llama selector de descendientes. Por ejemplo, para seleccionar un párrafo dentro de una fila de la tabla, se utiliza la siguiente entrada del selector CSS: “ul li > p: (color: azul)”. Vale la pena prestar atención al hecho de que cuanto más largo sea el registro, mayor será la probabilidad de que sea posible cambiar alguna propiedad específica del elemento, ya que se convierte en una mayor prioridad para la cascada. Por ejemplo, los elementos con alguna otra propiedad del selector CSS en una clase que es la principal no cambiarán sus propiedades por completo. Sólo se cambiará el color de una determinada parte del texto dentro de la lista.

Selector de elementos hermanos

Otra forma interesante de utilizar la cascada es con selectores adyacentes de CSS. Se escriben como suma de selectores: “span + a (color azul)”. En este caso se considera vecino aquel bajo el cual hay otro que se ajusta a los parámetros requeridos. Por lo tanto, si hay tres elementos en el código, entonces la propiedad no se aplicará al primero de ellos, porque no tiene vecino, pero a todos los siguientes, sí. Esto sucede debido al ícono de suma cuando se agregan selectores posteriores en lugar de los anteriores. Esta notación ayuda a acortar el código y evitar escribir varios selectores CSS para diferentes etiquetas, aplicándoles las mismas propiedades. Si al segundo elemento de la lista se le asigna además una clase y la entrada se cambia a “.class + a(color azul)”, entonces la cuenta regresiva comenzará a partir de ahí y las propiedades cambiarán para los elementos posteriores que coincidan con la regla. pero los dos primeros seguirán siendo los mismos.

Ahora supongamos que en nuestro código hay tres etiquetas idénticas con diferentes clases y necesitamos seleccionar todos los elementos después de uno específico. En este caso, el uso exclusivo de selectores de etiquetas CSS no ayudará. Para hacer esto, use el siguiente selector: “.class ~ div”. Esto selecciona elementos con la etiqueta div que vienen después de la clase dada. Si queremos seleccionar no solo los elementos con la etiqueta div, sino también todos los siguientes, en lugar de la etiqueta después del signo de tilde, debemos poner un símbolo de asterisco - "*". Dicha entrada significará que deberá seleccionar todo lo que sigue a la clase dada. Puede seleccionar todos los elementos de la página si deja solo el asterisco como selector.

Selectores por atributo CSS

Digamos que en nuestro código hay elementos con algunos atributos, pero todos son diferentes entre sí y están escritos con un guión, y necesitamos seleccionar todos aquellos cuyo nombre de clase comience con una determinada palabra, por ejemplo "selector", y las clases están separadas por el signo "-". ¿Qué debes hacer en este caso? La entrada del selector comienza con corchetes, donde primero se escribe el nombre del atributo, luego una barra vertical, el signo “=" y "selector": "datos- |= selector". A continuación, escriba la propiedad deseada que desea cambiar. Como resultado, se seleccionará un elemento con los parámetros especificados. Al cambiar de clase, puede cambiar las propiedades de ciertas partes del código. Si los nombres de las clases no están escritos con un guión, sino como una palabra, también se pueden seleccionar, pero usando una notación ligeramente diferente. En este caso, la barra vertical se reemplaza por el símbolo “^”: “datos^ = selector”. Este selector selecciona una subcadena con el comienzo del nombre de la clase.

Cómo seleccionar un elemento con una terminación específica en el nombre de la clase

Ahora hagámoslo de manera diferente y seleccionemos partes del código no por el comienzo de la descripción de la clase, sino por las últimas letras de su nombre. Para ello necesitamos un signo de dólar. Lo colocamos en lugar de la casilla de verificación, y después del signo igual escribimos el final del nombre de la clase: “data$ = ctor”. Ahora se seleccionarán los elementos con esta combinación de letras y se les aplicarán ciertas propiedades. Puede seleccionar cualquier atributo. Averigüemos qué hacer si necesitamos encontrar un elemento con alguna combinación de letras en medio de una palabra. En este caso cambiamos el signo de dólar por un asterisco, y después del signo igual escribimos las letras necesarias: “data* = ct”.

Pseudoclases: selectores especiales

Para los enlaces, generalmente se utilizan selectores de estilo CSS especiales que muestran sus diferentes estados: silencioso, enfocado, activo, completado; estos se denominan pseudoclases. La pseudoclase de un enlace activo sobre el que se coloca el cursor se escribe así: “a:active”. Luego vienen algunas propiedades, la mayoría de las veces se cambia el fondo o se agrega una sombra. Si agrega esta propiedad a un enlace y hace clic en él, cambiará su color al especificado. Otra pseudoclase: pasar el cursor muestra que el enlace ya ha sido visitado. Se escribe así: “a:hover”.

Características de los estados activo y de enfoque.

Activo a menudo se confunde con otro estado: el enfoque. Se escribe así: “a:focus” e indica el estado activo del botón cuando se trabaja desde el teclado. Es decir, si utiliza la tecla TAB, el enlace activo se resaltará con un color especial. Esta propiedad debe usarse, ya que no todos los usuarios pueden usar el mouse para navegar por el sitio. Algunos pueden tener problemas de visión u otras limitaciones de salud, por lo que se mueven por la página utilizando teclas o dispositivos especiales. Ignorar el estado de un botón enfocado es una gran desventaja para un parámetro del diseño de un sitio como la accesibilidad y tiene un impacto significativo en su tráfico para una categoría especial de usuarios. Durante la navegación normal con el mouse, el enlace se activa y se enfoca. Por lo tanto, es importante prestar atención a esto al diseñar elementos.

Pseudoelementos

Los pseudoelementos le permiten especificar estilos específicos sin definirlos en la propia estructura HTML. Se escriben así: nombre del selector, signo “::”, nombre del pseudoelemento. Los elementos más comunes son "antes" y "después". Tienen una propiedad de "contenido" y no se pueden aplicar a estilos internos. "Después" es necesario para agregar algún contenido después del contenido de un determinado elemento. Lo que se debe insertar exactamente se registra en la propiedad "contenido". Del mismo modo, el pseudoelemento "antes" agrega contenido antes del contenido del elemento. El uso de estos selectores especiales le permite acortar el código y no escribir una nueva estructura para alguna parte cada vez si necesita agregar un pequeño detalle en un lugar determinado del contenedor. Se utilizan muy a menudo para diseñar páginas y agregar algunos elementos decorativos. Las combinaciones de todas estas opciones ayudan a crear efectos inusuales en la página y ayudan enormemente al diseñador de diseño.

El selector se utiliza para identificar de forma única el elemento del documento HTML al que queremos aplicar un estilo CSS particular.

• Selector por elemento;
• Selector por clase;
• Selector por identificación;
• Selector de contexto;

Selector de elementos

Hasta este punto hemos estado trabajando con este selector. Se utilizó como selector el nombre del elemento html al que queríamos aplicar este estilo. Aquellos. Habiendo escrito una clase, por ejemplo, para el párrafo (P), todos los párrafos de la página adquirieron el estilo de esta clase.

PAG(
tamaño de fuente: 12px
}

Ahora imagina una situación en la que necesitas hacer el primer párrafo con un estilo, el segundo con otro, el tercero con un tercero, etc. Aquí vendrá en nuestra ayuda. selector por clase.

Selector por clase

Veamos cómo crear una clase genérica en CSS. Y es muy sencillo hacer esto: primero ponemos un punto, luego inmediatamente, sin espacio, escribimos el nombre de la clase, y luego el estilo entre llaves. Por ejemplo:

.verde(
familia de fuentes: arial, verdana, sans-serif;
tamaño de fuente: 12px; color verde;
}

¿Cómo aplicar este estilo?

Digamos que queremos aplicar este estilo a un párrafo específico del documento. Así es como se verá en html:

Texto de párrafo...

Como puede ver, el atributo se utiliza. clase con el significado del nombre del estilo.

EJEMPLO:

Este es un párrafo normal, utiliza un selector de elementos.

Este párrafo es verde porque se le ha aplicado una clase.

Y este párrafo está en letra más grande y en rojo.

Este párrafo vuelve a ser normal, por clase de selector de elementos.

pag(
familia de fuentes:arial,verdana,sans-serif;
tamaño de fuente: 18px;
}
.verde (color:verde;)
.gran rojo(
tamaño de fuente: 28px;
color rojo;
}

Primero especificamos el estilo base para todos los párrafos (selector por elemento) y luego, si queremos cambiar algo en cualquier párrafo, creamos un estilo especial para él (selector por clase) y lo asignamos a este párrafo. Cuando creamos esta clase tan especial, debemos escribir allí solo aquellas propiedades que queremos agregar o cambiar en relación al estilo base de este elemento.

Las clases del ejemplo anterior se pueden aplicar no sólo a un párrafo, sino también, por ejemplo, a los títulos, o, por ejemplo, a una celda de la tabla, o a toda la tabla; en resumen, se pueden aplicar donde sea posible. afectar algo (en este caso, siempre que haya un parámetro de color y texto).

Puedes hacer que la clase actúe sólo sobre un elemento específico (por ejemplo, un párrafo) especificando el nombre del elemento antes del punto:

P.verde (color:verde;)

Ahora la clase verde no actuará sobre nada más que el elemento P.

Selector por identificación

Este selector se utiliza si necesita seleccionar un solo elemento, único, diferente de todos los demás en el documento. Por ejemplo, resaltemos el primer encabezado de la página de cierta manera:

parte html:

<Н1 id="firstheader">Primer título de la página

css - parte:

H1#firstheader (color: rojo; peso de fuente: negrita; alineación de texto: centro)

Como puedes ver, en la parte html, en lugar del atributo class, se usa el atributo id, y en el css, en lugar de un punto, se usa el signo #.

En principio, se puede hacer lo mismo usando un selector de clase J.

Selector de contexto

Esto es algo muy útil. Digamos que tenemos una página con tablas y párrafos de texto, y tanto en la tabla como en los párrafos hay palabras en negrita. Es necesario asegurarse de que las palabras del párrafo que están resaltadas en negrita se vuelvan verdes. Asi que aqui esta:

p fuerte (color:verde)

Aquellos. en primer lugar PAG luego un espacio, luego FUERTE, y sólo entonces el estilo. Esta línea dice algo como esto: Si dentro del elemento PAG hay un elemento FUERTE luego asigne un estilo verde al elemento fuerte.

El anidamiento puede ser de cualquier nivel. Aquí hay otro ejemplo: "Si de repente dentro de una celda de la tabla ( td), párrafo ( PAG) , dentro del cual habrá una palabra resaltada en negrita ( FUERTE), ¡entonces deja que esta palabra se ponga roja! "

td p fuerte (color:rojo;)