Formattazione condizionale CSS
Esempio 01: formattazione condizionale in base alla regola condizionale di supporto di CSS
In questo esempio, utilizzeremo la proprietà della regola condizionale di supporto di CSS per determinare come verrà applicata la modifica dello stile quando il browser o le sue impostazioni saranno modificate. In questo esempio opteremo per l'approccio CSS di tag di stile interno.
In questo script, inizieremo con l'intestazione del file in cui saranno incluse le proprietà di styling per la formattazione condizionale di supporto. Nel tag di stile, chiameremo la regola della condizione "supporti". Quindi, applica la formattazione correlata al display sul tag di intestazione H1 in cui la griglia cambierà quando la dimensione del display cambia. Quindi apriremo il tag del corpo e inseriremo una sezione per il tag di intestazione H1. Il tag della sezione chiamerà le proprietà di styling che abbiamo aggiunto nel tag di stile dell'intestazione del file. Chiuderemo la sezione e il tag del corpo per terminare il file.
In questo output, possiamo vedere che il browser è aperto in dimensioni massime e la sezione è larga. Ma quando minimizziamo le dimensioni dello schermo, la sezione si adatta alla variazione di dimensioni e si riduce di conseguenza alla nuova dimensione della pagina come mostrato di seguito:
Esempio 02: formattazione condizionale in base alla regola condizionale dei media di CSS
In questo esempio utilizzeremo la tecnica CSS tag di stile. In questo esempio, utilizzeremo la proprietà della regola condizionale dei media di CSS per controllare il modo in cui lo stile cambia quando la dimensione del browser cambia.
In questo script, inizieremo con l'intestazione del file in cui saranno incluse le proprietà di styling per la formattazione condizionale dei media. Invocheremo la regola della condizione "media" nel tag di stile e applicheremo la formattazione relativa al display al tag di intestazione H1 in modo che la griglia cambi quando la dimensione del display varia a 700px o più piccola. Quindi, apriremo il tag del corpo dove aggiungeremo una sezione per il tag di intestazione H1. Il tag della sezione chiamerà le proprietà di styling che abbiamo aggiunto nel tag di stile dell'intestazione del file. Chiuderemo la sezione e il tag del corpo per terminare il file.
In entrambi questi frammenti, possiamo vedere che quando la dimensione cambia, la formattazione è diversa e quando si allarga si adatta alle proprietà di styling definite nell'intestazione del file.
Esempio 03: formattazione condizionale in base alla regola condizionale del documento di CSS
Useremo la capacità di regola condizionale del documento di CSS Gestire come lo stile cambia in questo esempio quando la dimensione del browser cambia.
Inizieremo con l'intestazione del file, che contiene il tag di stile, in cui useremo la regola della condizione "documento". Quindi, aggiungeremo la formattazione relativa al display al tag di intestazione H1 in modo che la griglia cambi a seconda della visita dell'URL. Modificheremo anche il colore di sfondo, il colore dei caratteri e l'imbottitura. Il tag della sezione invocherà gli attributi stilistici aggiunti nel tag di stile dell'intestazione del file. Per finire il file, chiuderemo la sezione e i tag del corpo.
L'output di cui sopra è la visione di come la pagina apparirà alla visita dell'URL del documento dato.
Esempio 04: formattazione condizionale su un elemento della tabella trasformando il colore del carattere
In questo esempio, formatteremo una tabella e i suoi elementi usando la formattazione condizionale. Questo è un tipo di formattazione condizionale che non segue nessuna delle tre regole delle condizioni CSS.
In questo script, aggiungeremo le proprietà di stile CSS in un tag tipo di testo in stile. In questo tag, ci concentreremo sul carattere dei dati della tabella. Innanzitutto, aggiungeremo due proprietà che avranno determinate condizioni. La prima proprietà sarà per il normale input di dati che verrà mostrato come input dalla funzione selettore "ATTR". Quindi, la seconda proprietà sarà per l'importo che avrà il segno "-" con loro in cui la funzione After trasforma il colore del carattere in un colore rosso che metterà in evidenza il valore o la perdita negativa nel nostro caso.
Successivamente, chiuderemo lo stile e le tag di testa e apriremo il corpo del file HTML. Includeremo una tabella con un bordo nel corpo del file. Usando il tag TR, aggiungeremo due righe a questa tabella. La prima riga avrà due colonne, una per l'intestazione e una per i dati della tabella. Nella tabella Dati, includeremo l'importo monetario che corrisponde alla proprietà indicata nel tag di stile. La seconda riga avrà anche una struttura simile, ma i dati della tabella avranno un valore negativo. Dopo questo, finiremo il file chiudendo tutti i tag rimanenti.
Come mostrato nell'output sopra, il valore positivo è in un carattere nero, mentre il valore negativo nella seconda riga è nel carattere rosso, come indicato nel tag di stile.
Esempio 05: formattazione condizionale su una tabella utilizzando la trasformazione dei dati della tabella
In questo esempio, useremo la formattazione condizionale sull'elemento TD (dati della tabella) di una tabella. Questo è un tipo di formattazione condizionale che non segue nessuna delle tre regole delle condizioni CSS.
Gli attributi di stile CSS verranno aggiunti in un tag tipo di testo in questo script. Il valore dei dati della tabella sarà l'enfasi di questo tag. Innanzitutto, daremo al tavolo e al suo contenuto un confine. La prima proprietà sarà per l'input di dati standard, che verrà mostrato come input dalla funzione di selezione "ATTR". La seconda proprietà sarà per l'importo, con il valore "0". La funzione After renderà questo valore la vista predefinita. Successivamente, chiuderemo lo stile e le tag di testa e apriremo il corpo del file HTML.
Presenteremo una tabella con due righe nel corpo del file usando il tag TR. La prima riga includerà due colonne: una per il titolo della tabella e una per i dati della tabella. Nella tabella Dati, includeremo l'importo monetario che corrisponde alla proprietà indicata nel tag di stile. La seconda riga sarà strutturata in modo simile, ma i dati della tabella saranno impostati su “0."
Come possiamo vedere nel seguente risultato, la prima riga ha un valore normale, mentre la seconda riga ha un segnaposto come previsto nel tag di stile.
Conclusione:
In questo articolo, abbiamo discusso della formattazione condizionale fornita da CSS. La formattazione condizionale è generalmente impostata su tre regole relative al supporto, ai media e al documento. Tutti e tre hanno limiti diversi per applicare modifiche alla pagina web che sono state tutte discusse e implementate in questo articolo. Quindi l'altro tipo di formattazione non segue queste regole e viene fatto esclusivamente sulla percezione visiva di un individuo interessato. In questo articolo abbiamo implementato questo tipo di formattazione condizionale su un elemento tabella nell'IDE Notepad ++.