Cinco, hoja de estilo CSS

5.1 Conceptos básicos de las hojas de estilo CSS

La estructura básica de la página web se puede construir a través de las etiquetas HTML, y la modificación de la página web utilizando los atributos anteriores no será perfecta;

Las etiquetas HTML se utilizan para construir la estructura de las páginas web y CSS se utiliza para embellecer varios elementos en las páginas web.

CSS se llama hoja de estilo en cascada

5.2 reglas de escritura CSS

CSS debe estar escrito en la etiqueta de estilo;
Hay una serie de reglas de estilo en cada hoja de estilo, a través de estas reglas para modificar los elementos especificados;
Una regla de estilo se compone de un nombre de estilo y un valor de regla de estilo, y el nombre y el valor están separados por ":";
Utilice ";" para separar varias reglas de estilo;

5.3 Clasificación del selector

El selector se utiliza principalmente para hacer coincidir los elementos HTML que se van a modificar.

5.3.1 Selector de etiquetas

El nombre de etiqueta existente en HTML se utiliza como nombre del selector, y todos los elementos de la misma etiqueta en la página actual se muestran de acuerdo con la regla de estilo;

5.3.2 Selector de clase

Defina un selector de clases y defina reglas de estilo en él, use el atributo de clase en la etiqueta para llamar al selector de clases cuando sea necesario (la definición de selector de clases: nombre de clase);

5.3.3 Selector de ID

Utilice el atributo ID en una etiqueta HTML como selector. El selector de ID solo puede funcionar para etiquetas con el mismo ID y no necesita ser llamado (definición del selector de ID: #id {});

5.3.4 Selector de pseudoclase estructural (selector de posición)

(1): primer hijo: seleccione el primer elemento hijo perteneciente a su elemento padre;
(2): último hijo: seleccione el último elemento perteneciente a su elemento padre;
(3): nth-hijo (n): seleccione el El n-ésimo elemento hijo del elemento padre, (n puede ser una fórmula, como (2n | 2n + 1);
(4): n-ésimo hijo (impar | par): selecciona todos los elementos impares (impares) que pertenecen a su padre elemento o (par) elemento par;
(5): nth-last-child (n): seleccione el nth elemento secundario en su elemento principal y cuente desde el último elemento.

5.3.5 Selector de objetivos

: objetivo, el elemento visitado actualmente;

5.3.6 Selector de combinación

(1) Nombre de etiqueta. Nombre de clase {}: pa {} establece el estilo de todas las etiquetas p usando la clase a;
(2) Nombre de etiqueta 1, nombre de etiqueta 2, nombre de etiqueta 3 {}: a, div {} establecer múltiples en al mismo tiempo Estilo de
etiqueta Nombre de etiqueta 1, nombre de etiqueta 2, nombre de clase {}: a, div, .xxx {} Configure varios estilos de etiqueta al mismo tiempo.

5.3.7 Incluir selectores (selectores descendientes)

(1) Nombre de la etiqueta Nombre de la etiqueta {}: div p {} para configurar todas las etiquetas p en div;
(2) Nombre de la etiqueta .class {}: .xxx p {} para configurar todas las etiquetas p en la clase xxx, contiene varios niveles .

5.3.8 Selector de elementos secundarios

Nombre de etiqueta> nombre de etiqueta de subelemento {}: div> p {} establece el subelemento directo p debajo de div;

5.3.9 Selector de atributos

(1) Nombre de etiqueta [attr]: seleccione el elemento con el atributo attr en la
etiqueta ; (2) Nombre de etiqueta [attr = val]: seleccione el elemento con el atributo attr y el valor igual a val;
(3) Nombre de etiqueta [attr ^ = val]: seleccione el elemento que tiene el atributo attr en la etiqueta y el valor comienza con val;
(4) nombre de etiqueta [attr $ = val]: seleccione el elemento que tiene el atributo attr en la etiqueta y el el valor termina con val;
(5) el nombre de la etiqueta [attr * = val): seleccione el elemento que tiene el atributo attr en la etiqueta y el valor contiene val.

5.3.10 Selector de pseudoelementos

(1) Nombre de etiqueta :: primera letra (): seleccione la primera palabra o palabra de texto;
(2) Nombre de etiqueta :: primera línea (): seleccione la primera línea de texto;
(3) Nombre de etiqueta :: selección {}: Elige establecer el estilo del texto seleccionado actualmente;
(4) Nombre de etiqueta :: antes {contenido: "contenido nuevo"}: inserta contenido nuevo antes del contenido original dentro del elemento;
(5) Nombre de etiqueta :: después {content: "New content"}: inserta contenido nuevo después del contenido original dentro del elemento.