Gruppo CSS
Sintassi del selettore di gruppo:
Element1, Element2, Element3 ..// Elenco delle dichiarazioni
Esempio 1:
Per dimostrare questi esempi dati, viene utilizzato il codice Visual Studio. Apriremo il nuovo file e sceglieremo la lingua "HTML", che creerà un file HTML. Quindi, iniziamo a farlo nel file appena creato. Quando salviamo il codice finito, il ".L'estensione del file HTML ”viene automaticamente aggiunta al nome del file. Una volta che i tag HTML di base sono apparsi in questo file appena formato aggiungendo "!"Segna e facendo clic su" Invio ", stiamo iniziando aggiungendo le intestazioni" H1 "e anche" H2 ". Dopo questi titoli, stiamo inserendo due diversi paragrafi nel codice HTML. Ora stiamo producendo il file CSS dopo questo e collegando anche entrambi i file per applicare le proprietà CSS agli elementi HTML.
Dato che vogliamo applicare lo stesso stile sia alla voce che al paragrafo, non abbiamo bisogno di mettere tutti questi elementi separatamente. Seguiamo solo il selettore di raggruppamento e ci menzioniamo tutti gli elementi e li separamo mettendo una virgola "," tra loro come mostrato nello screenshot seguente. Citiamo tutti gli elementi come "H1, H2, P". Ora, metti le parentesi graffe e poi utilizza le proprietà in queste parentesi graffe. Quando aggiungiamo proprietà, queste proprietà si applicheranno a tutti gli elementi che abbiamo menzionato. Usiamo la proprietà "allineate al testo" di tutti loro e li impostiamo su "Centro" utilizzando questa proprietà.
Quindi, decoramo tutti questi mettendo "sottolineatura" come valore della proprietà "decorazione del testo". La "famiglia del carattere" che stiamo utilizzando per tutti questi elementi è "algerino". Regoviamo la "dimensione del carattere" su "22px". Quindi, abbiamo utilizzato la proprietà "Color" che abbiamo impostato su "Marone" a tutte le intestazioni e ai paragrafi.
Ecco il risultato del codice CSS sopra. Puoi vedere che il colore, il carattere, il carattere familiare e tutte le altre proprietà che abbiamo utilizzato sopra sono applicate a tutte le intestazioni e i paragrafi perché utilizziamo il selettore di raggruppamento per tutti loro. Tutto lo stile per questi elementi è lo stesso qui che abbiamo impostato nel codice CSS.
Esempio n. 2:
In questo esempio, creeremo più paragrafi con nomi univoci e anche più div con nomi diversi. Abbiamo una voce qui prima di tutti questi paragrafi e div. Applicheremo il selettore di raggruppamento a tutti questi nel codice CSS.
Stiamo mettendo i nomi di tutte le classi di paragrafo e le classi di div e anche la voce. Applicheremo le stesse proprietà a tutti loro. Tutte le proprietà che definiremo qui tra le parentesi graffe si applicheranno a tutti questi elementi che abbiamo menzionato. Stiamo allineando tutti gli elementi nel "centro" con l'aiuto della proprietà "allineamento del testo" e usiamo il "Times New Roman" come valore della proprietà "Font-Family". Quindi, imposta la "dimensione del carattere" su "23px" e il "colore" per tutti è "rosso". Ora stiamo applicando un po 'di "colore di sfondo" come "light-sky-blu" e "in stile font" in "corsivo". Tutte queste proprietà saranno applicate a tutti i paragrafi, Div e anche all'intestazione.
Qui, in questo risultato del codice sopra, tutti i div, i paragrafi e anche l'intestazione appare nello stesso stile. Tutte le proprietà di stile che vengono applicate su tutte sono le stesse. Come abbiamo usato il selettore di raggruppamento per farlo.
Esempio # 3:
Qui, applicheremo le stesse proprietà ai paragrafi. Tutti i paragrafi appariranno lo stesso. Per i Div, utilizziamo le stesse proprietà, quindi tutti i div renderranno nello stesso stile.
Utilizziamo "Times New Roman" come "Font-Family" di "H1" e "Orange" è selezionato qui come il suo "colore". Il "colore di sfondo" di questo "H1" è impostato su "giallo chiaro". Ora posizioniamo tutti i nomi dei paragrafi e utilizziamo alcune proprietà qui. "Calibri" è specificato come valore per la proprietà "Font-Family" e "Font-Size" sarà "23px". Quindi, "marrone" per il "colore". Qui, stiamo mettendo un "colore di sfondo" di "verde chiaro" e il valore per la proprietà "font-peso" è impostato su "grassetto". Quindi, abbiamo la proprietà "Color" e la impostiamo su "Green" e il "colore di sfondo" per tutti i Div è "Light-Salmon". Li "corsivo" anche impostando questo valore nella proprietà "in stile testo".
Qui, vedi che tutti i paragrafi appaiono nello stesso stile e tutti i div appaiono nello stesso stile in cui abbiamo impostato questi valori nel codice CSS.
Esempio # 4:
Abbiamo tre titoli diversi, un paragrafo, un div e anche una classe di span. Applicheremo le stesse proprietà di stile a tutti questi in CSS.
Mettiamo i nomi di tutti gli elementi su cui vogliamo applicare le proprietà. Puoi vedere qui come mettere questi nomi. Dobbiamo mettere la virgola tra tutti i nomi di tutti gli elementi e quindi posizionare le proprietà all'interno delle parentesi cure. Utilizziamo la proprietà "allineate al testo" per allineare "a sinistra" tutti i componenti. La famiglia dei caratteri "Times New Roman" è impostata come valore per la proprietà "Font-Family". Quindi, scegli "24px" per la "dimensione del carattere" che verrà applicata a tutti e "viola" è selezionato per il "colore". Qui, stiamo applicando un "colore di sfondo" di "rosa luminosa" e la parola chiave "audace" è selezionata come valore della proprietà "font-weight". Inoltre, abbiamo usato la proprietà "sottolineatura" per la proprietà "decorazione del testo" per renderli tutti più attraenti.
Il risultato del suddetto codice CSS è mostrato qui. Come puoi vedere, tutti i titoli e i paragrafi e anche la campata hanno lo stesso colore, il carattere, la famiglia del carattere e tutti gli altri stili sono gli stessi perché abbiamo usato il selettore di raggruppamento per tutti loro. La formattazione per questi elementi è la stessa qui.
Conclusione
In questo tutorial, abbiamo spiegato che il selettore di raggruppamento è definito in quanto possiamo scegliere più componenti e stili collettivamente, separandoli con una virgola. Nei nostri codici, abbiamo utilizzato questo concetto. In questo tutorial, abbiamo anche discusso di come utilizzare questo selettore di raggruppamento e come impostare le proprietà all'interno di questo. Abbiamo anche dato i risultati di tutti questi codici. A tuo vantaggio, abbiamo sviluppato un tutorial completo che include il codice, una spiegazione approfondita e i risultati.