Formato condicional CSS
Ejemplo 01: Formato condicional basado en la regla condicional de soporte de CSS
En este ejemplo, utilizaremos la propiedad de regla condicional de soporte de CSS para determinar cómo se aplicará el cambio de estilo cuando se modifiquen el navegador o su configuración. Optaremos por el enfoque CSS de etiqueta de estilo interno en este ejemplo.
En este script, comenzaremos con el encabezado del archivo donde se incluirán las propiedades de estilo para el formato condicional de soporte. En la etiqueta de estilo, llamaremos a la regla de condición de "soporte". Luego, aplique el formato relacionado con la pantalla a la etiqueta de encabezado H1 en la que cambiará la cuadrícula cuando cambia el tamaño de la pantalla. Luego, abriremos la etiqueta del cuerpo e insertaremos una sección para la etiqueta de encabezado H1. La etiqueta de sección llamará a las propiedades de estilo que agregamos en la etiqueta de estilo del encabezado del archivo. Cerraremos la sección y la etiqueta del cuerpo para finalizar el archivo.
En esta salida, podemos ver que el navegador se abre en tamaño maximizado y la sección se extiende de ancho. Pero cuando minimizamos el tamaño de la pantalla, la sección se adapta al cambio de tamaño y se encoge en consecuencia al tamaño de la nueva página como se ve a continuación:
Ejemplo 02: Formato condicional basado en la regla condicional de los medios de CSS
Utilizaremos la técnica CSS de etiqueta de estilo en este ejemplo. En este ejemplo, utilizaremos la propiedad de la regla condicional de los medios de CSS para controlar cómo cambia el estilo cuando cambia el tamaño del navegador.
En este script, comenzaremos con el encabezado del archivo donde se incluirán las propiedades de estilo para el formato condicional de los medios. Invocaremos la regla de condición de "medios" en la etiqueta de estilo y aplicaremos el formato relacionado con la pantalla a la etiqueta de encabezado H1 para que la cuadrícula cambie cuando el tamaño de la pantalla cambia a 700px o más pequeño. Luego, abriremos la etiqueta del cuerpo donde agregaremos una sección para la etiqueta de encabezado H1. La etiqueta de sección llamará a las propiedades de estilo que agregamos en la etiqueta de estilo del encabezado del archivo. Cerraremos la sección y la etiqueta del cuerpo para finalizar el archivo.
En ambos fragmentos, podemos ver que cuando cambia el tamaño, el formato es diferente, y cuando se amplía, se adapta a las propiedades de estilo definidas en el encabezado del archivo.
Ejemplo 03: Formato condicional basado en la regla condicional del documento de CSS
Utilizaremos la capacidad de regla condicional del documento de CSS Administrar cómo cambia el estilo en este ejemplo cuando cambia el tamaño del navegador.
Comenzaremos con el encabezado del archivo, que contiene la etiqueta de estilo, en la que usaremos la regla de condición de "documento". Luego, agregaremos formateo relacionado con la pantalla a la etiqueta de encabezado H1 para que la cuadrícula cambie dependiendo de la visita de la URL. También cambiaremos el color de fondo, el color de fuente y el relleno. La etiqueta de sección invocará los atributos estilísticos agregados en la etiqueta de estilo del encabezado del archivo. Para terminar el archivo, cerraremos la sección y las etiquetas del cuerpo.
La salida anterior es la visión de cómo se verá la página en la visita de la URL del documento dada.
Ejemplo 04: Formato condicional en un elemento de tabla transformando el color de la fuente
En este ejemplo, formatearemos una tabla y sus elementos utilizando formateo condicional. Este es un tipo de formato condicional que no sigue ninguna de las tres reglas de condiciones CSS.
En este script, agregaremos las propiedades de estilo CSS en una etiqueta de tipo de texto de estilo. En esta etiqueta, nos centraremos en la fuente de los datos de la tabla. Primero, agregaremos dos propiedades que tendrán ciertas condiciones. La primera propiedad será para la entrada de datos normal que se mostrará como la entrada por la función selectora de "ATTR". Luego, la segunda propiedad será por la cantidad que tendrá el signo "-" con ellos en el que la función posterior transforma el color de la fuente a un color rojo que resaltará el valor negativo o la pérdida en nuestro caso.
Después de eso, cerraremos el estilo y las etiquetas de la cabeza y abriremos el cuerpo del archivo HTML. Incluiremos una tabla con un borde en el cuerpo del archivo. Usando la etiqueta TR, agregaremos dos filas a esta tabla. La primera fila tendrá dos columnas, una para el encabezado y otra para los datos de la tabla. En los datos de la tabla, incluiremos la cantidad monetaria que corresponde a la propiedad indicada en la etiqueta de estilo. La segunda fila también tendrá una estructura similar, pero los datos de la tabla tendrán un valor negativo. Después de esto, finalizaremos el archivo cerrando todas las etiquetas restantes.
Como se muestra en la salida anterior, el valor positivo está en una fuente negra, mientras que el valor negativo en la segunda fila está en la fuente roja, como se indica en la etiqueta de estilo.
Ejemplo 05: Formato condicional en una tabla utilizando la transformación de datos de la tabla
En este ejemplo, utilizaremos el formato condicional en el elemento TD (datos de la tabla) de una tabla. Este es un tipo de formato condicional que no sigue ninguna de las tres reglas de condiciones CSS.
Los atributos de estilo CSS se agregarán en una etiqueta de tipo de texto de estilo en este script. El valor de los datos de la tabla será el énfasis de esta etiqueta. Primero, le daremos la mesa y su contenido un borde. La primera propiedad será para la entrada de datos estándar, que se mostrará como la entrada de la función de selección de "ATTTR". La segunda propiedad será por el monto, con el valor "0",. La función posterior hará que este valor sea la vista predeterminada. Después de eso, cerraremos el estilo y las etiquetas de la cabeza y abriremos el cuerpo del archivo HTML.
Introduciremos una tabla con dos filas en el cuerpo del archivo usando la etiqueta TR. La primera fila incluirá dos columnas: una para el título de la tabla y otra para los datos de la tabla. En los datos de la tabla, incluiremos la cantidad monetaria que corresponde a la propiedad indicada en la etiqueta de estilo. La segunda fila se estructurará de manera similar, pero los datos de la tabla se establecerán en "0."
Como podemos ver en el siguiente resultado, la primera fila tiene un valor normal, mientras que la segunda fila tiene un marcador de posición como se proporciona en la etiqueta de estilo.
Conclusión:
En este artículo, discutimos el formato condicional que CSS proporciona. El formato condicional generalmente se establece en tres reglas relacionadas con el soporte, los medios y el documento. Todos estos tres tienen diferentes límites para aplicar cambios a la página web que se discutieron e implementaron en este artículo. Entonces el otro tipo de formato no sigue estas reglas y se realiza exclusivamente en la percepción visual de un individuo en cuestión. Implementamos este tipo de formato condicional en un elemento de tabla en el IDE de bloc de notas ++ en este artículo.