CSS Asterisk
Sintassi
*Costo dell'immobile
O
*genitore
Costo dell'immobile
Esempio 1
Crea il file HTML e scrivi paragrafi e intestazioni nel file HTML in modo da poterli modellare usando il selettore CSS "*". In questo tutorial, il software che stiamo utilizzando per eseguire esempi è Visual Code Studio. Quindi, apriamo il file HTML in questo codice Visual Studio e scriviamo il codice HTML qui. Forniamo anche il codice. Questo file viene salvato usando il ".estensione del file html ".
Puoi vedere che abbiamo un'intestazione1 nel corpo dell'HTML e quindi una classe "" in cui abbiamo due diversi paragrafi che usano il "
"Tag e poi chiudi questo" div ". Dopo questo "abbiamo un altro paragrafo"
"Che è al di fuori del" ". Qui, chiudiamo il corpo e lo salviamo. Quindi, stiamo passando al nostro file CSS in cui utilizziamo l'asterisco "*" per applicare diversi stili su questa pagina HTML.
Codice CSS
Qui, creiamo il nostro file CSS e utilizziamo ".Estensione del file CSS "con questo file. Dobbiamo collegare questo file al file HTML. Quindi, tutto lo styling che menzioniamo qui si applicherà al file HTML che abbiamo creato prima di questo.
Innanzitutto, utilizziamo il selettore "*" e quindi utilizziamo proprietà di stile diverse all'interno delle parentesi graffe di questo selettore "*". Usiamo la proprietà "color sfondo" e abbiamo selezionato il colore "giallo" per lo sfondo di questa pagina. Quindi, abbiamo la proprietà "colore" e questa proprietà "colore" cambia il colore del testo in "viola". Modificherà tutti i colori di testo che sono scritti nel file HTML in "viola". Inoltre, usa la proprietà "Font-Family" che viene utilizzata per cambiare lo stile del carattere e impostarla su "Times New Roman". Tutto il testo sarà scritto in questo stile di carattere. Tutte le proprietà di stile che stiamo usando si applicheranno sulla pagina HTML completa perché usiamo "*" e non menzioniamo alcun nome con questo "*".
Produzione
Ottiamo questo output facendo clic con il pulsante destro del mouse sul file HTML e selezionando "Apri nel browser predefinito". L'output mostra come questo selettore "*" funziona in CSS.
Puoi osservare che tutto il testo viene visualizzato in colore "viola" e tutto il testo è scritto in stile di carattere "Times New Roman" e l'intero colore di sfondo è "giallo". Quindi, quando utilizziamo il selettore "*", non è necessario applicarlo separatamente a ciascun elemento. Il selettore "*" prende tutti gli elementi del file HTML e applica lo stile a tutti loro.
Esempio 2
Abbiamo l'esempio 2 e cambiamo il codice HTML. Stiamo creando tre paragrafi nel "div" e un paragrafo al di fuori del div in questo codice HTML.
Codice CSS
In questo file CSS, menzioneremo il "div" con l'asterisco "*". Quindi, usa le proprietà di stile per questo "div". Questi stili si applicheranno a tutti gli elementi del "div".
Usiamo "div *" e posizioniamo le parentesi graffe in cui usiamo le proprietà di stile. Qui, stiamo usando "azzurro" come "colore di sfondo" solo per gli elementi Div. Quindi, la "viola blu" è impostata per il colore del testo o del carattere. Inoltre, cambia lo stile del carattere degli elementi Div in "algerino" usando la proprietà "Font-Family". Stiamo allineando il testo degli elementi "Div" nel "centro" con l'aiuto di "allineamento del testo".
Produzione
In questo output, l'intestazione è semplice. Non esiste uno stile applicato a questa intestazione in quanto questa intestazione è scritta fuori dal "div". Applichiamo lo stile solo agli elementi "div". Ora, le tre righe successive sono state scritte all'interno del "div". Il suo stile di carattere è cambiato, il colore del carattere è cambiato e anche il testo è posto al centro e lo sfondo di queste linee è blu. Tutti quegli stili che utilizziamo nel nostro file CSS sono applicati a tutti gli elementi "div". L'ultimo paragrafo è anche semplice in quanto è anche scritto al di fuori del "div".
Esempio 3
Eseguiamo anche un altro esempio, quindi puoi facilmente ottenere la differenza tra il modo in cui il selettore "*" funziona da solo e come funziona quando usiamo qualsiasi nome con questo selettore "*".
In questo file HTML, stiamo creando l'intestazione 1 usando il “
"Tag; una classe Div usando il tag ""; paragrafi usando il “
"Tag; e anche una classe di span che utilizza il tag "". Applicheremo diversi stili su "H1", "Div", "P" e "Span" usando CSS.
Codice CSS
Innanzitutto, utilizziamo solo il selettore "*" per modificare l'intero colore di sfondo della pagina HTML. Il colore "rosa" è selezionato come "colore di sfondo" per la pagina HTML. Quindi, usiamo "P" con "*" in modo che tutto lo styling verrà applicato ai paragrafi scritti nel file HTML. Il "colore di sfondo" di tutti i paragrafi è impostato come colore "verde chiaro". La dimensione del testo scritto nel tag paragrafo sarà resa in "Monospace" mentre impostiamo le dimensioni del testo del paragrafo su "Monospace". Tutte queste proprietà di stile sono applicate ai paragrafi.
Quindi, modelleremo gli elementi di classe "span" usando la "span" con il "*". Il colore di sfondo degli elementi Span è "azzurro" e lo stile del carattere è "corsivo" e "audace". Quindi, abbiamo una classe "div" e lo modelleremo. Cambiamo il suo colore di sfondo in "giallo". La "dimensione del carattere" è "130%" per gli elementi Div. Tutto il testo dell'elemento Div è reso al centro, poiché usiamo "allineamento del testo". La "famiglia di carattere" per questo è "Algerian". L '"H1" rimane. Quindi, dobbiamo applicare un po 'di stile su questo H1. Il "colore di sfondo" dell'intestazione 1 è "arancione" e il testo di questa intestazione 1 è impostato come "verde" di colore. La dimensione del carattere di intestazione 1 è "25px" ed è allineato "centrale".
Produzione
L'uscita mostra che l'intestazione è di colore diverso e anche lo stile di questa intestazione è diverso. Usiamo due classi "Div" e queste due classi di DAV sono gli stessi nello stile. Puoi vedere che ci sono quattro paragrafi e il colore di sfondo di questi quattro paragrafi è verde. Le classi di span sono le stesse in stile e il colore di sfondo della classe span è azzurro. L'intero sfondo è lo stesso di questa proprietà "color background" con "*".
Conclusione
In questo tutorial, abbiamo imparato l'uso dell'asterisco "*" in CSS. Abbiamo studiato come funziona da solo e come funziona quando scriviamo qualsiasi nome con questo selettore "*". Abbiamo imparato che questo selettore di asterisk prende tutti gli elementi della pagina HTML e ha applicato lo stile a tutti quegli elementi. Abbiamo esplorato diversi esempi in cui abbiamo usato questo selettore "*" in CSS e abbiamo reso l'output di tutti questi esempi. Abbiamo fornito il codice HTML e CSS in questo tutorial insieme agli output di tali codici.