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 elementos de páginas web e interfaces de usuario escritas 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 estilo en cascada describen reglas para formatear elementos usando propiedades y valores aceptables estas 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.

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

...

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 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 clase le permiten diseñar uno o más elementos con el mismo nombre de clase colocado en diferentes lugares páginas o en diferentes paginas 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 establecer el estilo para clase especificada. Los estilos creados usando una clase se pueden aplicar a otros elementos, no necesariamente de ese tipo.

Instrucciones de uso ordenador personal

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.

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 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 se especifican varias clases para un elemento 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) - cada tercer elemento 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 en el documento - 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 sus elementos secundarios elemento padre.

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 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

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.

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.

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

Puedes crear varios mesas externas estilos y conectarlos a una página web. si en diferentes mesas se reunirá 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.

Incluso antes de la especificación CSS nivel 2 de 1998, los elementos de formulario ya eran ampliamente compatibles con los principales navegadores. La especificación CSS 2 todavía no responde a la pregunta de cómo se deben presentar los elementos del formulario a los usuarios. Dado que los elementos del formulario son parte interfaz de usuario en cada documento web, los autores de la especificación optaron por dejar representación visual Elementos de formulario HTML predeterminados para cada navegador.

Durante muchos años, la falta de detalles en la especificación sobre los elementos del formulario ha obligado a los desarrolladores a crear gran número pruebas y ejemplos, cuya tarea principal era llevar los componentes visuales de todos los elementos del formulario a una vista en todos los navegadores. En este artículo veremos algunos Plantillas CSS, lo que le permitirá llevar los elementos de las formas a un denominador común.

Pruebas de Roger Johansson para diseñar elementos de forma

En 2004, y nuevamente en 2007, Roger Johansson creó conjuntos de pruebas especiales para elementos de formulario y CSS. De estas pruebas hubo una conclusión que molestó a Roger:

Entonces, ¿qué mostró el experimento? Como ya señalé, las pruebas mostraron que con usando CSS No es posible controlar los estilos de formulario para mostrar los elementos del formulario de manera consistente en todos los navegadores y plataformas. Las pruebas también han demostrado que la mayoría de los navegadores ignoran muchas propiedades CSS cuando se utilizan para diseñar elementos de formulario.

A pesar de la innegable verdad de estos hallazgos, los desarrolladores web continúan experimentando con elementos CSS formas en busca del Santo Grial, o al menos un compromiso razonable entre la representación predeterminada del navegador y el estilo personalizado.

Modelo de visualización de elementos de formulario predeterminado

De forma predeterminada, la especificación CSS 2.1 para HTML4 establece elementos de formulario como área de texto, entrada y selección en el modo de visualización de bloques en línea:

Área de texto, entrada, selección (pantalla: bloque en línea;)

Y viceversa, elementos de formulario y el conjunto de campos tienen modo de visualización de bloques:

Conjunto de campos, formulario ( mostrar: bloque; )

El modelo de especificación CSS para diseñar elementos en formularios finaliza en este paso. Todos los demás aspectos de la visualización de los elementos del formulario dependen de la hoja de estilo predeterminada del navegador. Sin embargo, las reglas anteriores significan lo siguiente:

• A los elementos de bloque en línea se les puede aplicar estilo utilizando el contexto de formato en línea. Esto implica utilizar Propiedades CSS, como line-height y vertical-align para controlar la altura del elemento y la alineación vertical. Las propiedades de relleno y margen también se pueden utilizar para controlar el contenido interno y margen para elementos de formulario. Vale la pena señalar que los elementos de bloque en línea también se pueden controlar desde usando ancho y altura, su comportamiento a este respecto no se diferencia del de los elementos de bloque ordinarios.
• Los elementos del bloque se pueden diseñar de forma estándar, utilizando un contexto de formato de bloque normal. Sin embargo, existen problemas con los elementos del formulario de conjunto de campos y leyenda porque dependen completamente del estilo del navegador.

Surge la pregunta, ¿cómo pueden los desarrolladores resolver estos problemas?

Resolver problemas de tamaño de elementos de formulario

Los desarrolladores web pronto se dieron cuenta de que los navegadores trataban los elementos de bloques en línea de forma bastante extraña a la hora de determinar sus tamaños. La determinación de la altura a menudo conduce a resultados inesperados:

Entrada, seleccione (ancho: 120 px; alto: 32 px;)

Los desarrolladores intentaron resolver este problema usando inline-block:

Ingrese, seleccione (ancho: 120 px; alto: 32 px; pantalla: bloque;)

Los resultados todavía dejan mucho que desear a excepción de elemento de área de texto. Para resolver este problema, primero debe normalizar la fuente y el tamaño de fuente de los elementos del formulario:

Ingrese, seleccione (ancho: 120px; fuente: 1em Arial, sans-serif;)

Una vez instalada la fuente, puedes agregar relleno:

Introduzca, seleccione (ancho: 120 px; fuente: 1 em Arial, sans-serif; relleno: 3 px 6 px;)

A los elementos de entrada y de área de texto también se les puede dar un borde, lo que afectará sus dimensiones de acuerdo con el modelo de caja:

Entrada, entrada, área de texto (borde: 1px sólido #ccc;)

elementos de entrada El botón Me gusta y Enviar pueden tener relleno adicional agregado por el navegador. Una práctica común es normalizarlos:

Entrada, entrada (relleno: 2px;)

El problema con este enfoque es que los navegadores suelen aplicar prefijos de proveedores a las propiedades de los elementos, por lo que no siempre es posible normalizar el relleno. Por ejemplo, para web-kit puedes normalizarlo así:

Entrada, entrada, entrada, entrada::-botón-de-carga-de-archivo-webkit, botón ( -webkit-box-align: centro; alineación de texto: centro; cursor: predeterminado; color: texto del botón; relleno: 2px 6px 3px; borde : 2px inicio del botón; imagen del borde: inicial; color de fondo: botón; tamaño del cuadro: cuadro del borde; entrada, apariencia del kit web: botón; espacio en blanco: pre;)

El relleno también afecta a los elementos del conjunto de campos y de la leyenda, pero con resultados diferentes:

• Configurar el relleno para el conjunto de campos en 0 restablece el relleno predeterminado solo en algunos navegadores (no en IE)
• Establecer el relleno de la leyenda en 0 hace que el elemento se reduzca

Los elementos de radio seleccionados, casillas de verificación se pueden normalizar con buenos resultados solo para algunas propiedades:

• Familia de fuentes
• Tamaño de fuente
• Ancho (para seleccionar)
• Relleno

La aplicación de otras propiedades a estos elementos del formulario produce resultados inconsistentes.

Alinear elementos en formularios

Los elementos del formulario se pueden alinear vertical y horizontalmente. Pueden estar ubicados en la misma línea o en grupo. Para alinearlos a lo largo de una línea, puede usar flotante o el contexto de bloque en línea estándar.

Cuando se utilizan elementos flotantes, los elementos se convierten automáticamente en elementos de bloque. Esto significa que el control de estos elementos ahora lo proporcionan nueve reglas más del modelo de caja.

Con elementos flotantes, tarea principal es lograr una buena alineación vertical en línea actual. En este caso, la práctica habitual es utilizar margen vertical o relleno:

Ingrese, seleccione (ancho: 120 px; flotante: izquierda; margen superior: 0,4 em;)

Este enfoque funciona cuando no es necesario alinear bloques de texto, por ejemplo elemento de etiqueta. En este caso, puedes usar posicionamiento relativo, relleno o margen en un elemento que solo contiene texto:

Otro problema surge con los botones. En este caso, cuando tienes un botón cuyo tamaño es mayor que otros elementos, puedes configurar alineación vertical usando posicionamiento relativo:

Entrada (flotante: izquierda; ancho: 90px; posición: relativa; arriba: 0,4em;)

Este enfoque de posicionamiento relativo también funciona para casillas de verificación y botones de opción. Posicionamiento relativo Incluso se puede utilizar para normalizar el relleno izquierdo de un elemento de leyenda en un conjunto de campos.

Si está utilizando elementos en el contexto del formato en línea, puede utilizar propiedad de alineación vertical para alineación vertical:

Etiqueta, entrada (alineación vertical: medio; margen derecho: 1em;)

Buenos resultados se puede lograr combinando esta propiedad con propiedad de altura de línea. Sin embargo, esta propiedad debe establecerse en el elemento principal. Si lo configura directamente en el elemento del formulario, la altura del elemento se verá afectada:

Formulario-fila (alto de línea: 1,4;)

También es una buena práctica utilizar una declaración de altura para el elemento principal emparejado con el mismo valor de altura de línea:

Form-row (altura de línea: 1,8; altura: 1,8em;)

En el contexto del formato en línea, puede utilizar propiedad de alineación de texto para que un elemento principal alinee el contenido del elemento de formulario a la izquierda, al centro o a la derecha.

Comportamiento extraño de las entradas de archivos

Elemento tipo de entrada el archivo es ocasión especial. Un elemento de este tipo siempre debe estar visible y reconocible en la interfaz del navegador por razones de seguridad. Esto significa que los navegadores ignoran deliberadamente algunas reglas de estilo (como las relacionadas con la visibilidad) y, como regla general, aplican sus propios algoritmos definidos por su hoja de estilo predeterminada.

Además, algunos navegadores solo muestran un botón, mientras que otros también agregan un campo para la ruta del archivo.

Sin embargo, los desarrolladores web han encontrado formas de solucionar esta limitación. Primero, envolvieron el elemento en un contenedor.