CSS -gruppe
Syntaks for gruppelektor:
Element1, Element2, Element3 ..// Deklarasjonsliste
Eksempel nr. 1:
For å demonstrere disse gitte eksemplene brukes Visual Studio Code. Vi åpner den nye filen og velger “HTML” -språket, som vil opprette en HTML -fil. Deretter begynner vi å gjøre det i den nyopprettede filen. Når vi lagrer den ferdige koden, ".HTML ”File Extension legges automatisk til filnavnet. Når de grunnleggende HTML -kodene har dukket opp i denne nyopprettede filen ved å legge til “!”Merker og klikker“ Enter ”, vi begynner med å legge til overskriftene“ H1 ”og også“ H2 ”. Etter disse overskriftene legger vi to forskjellige avsnitt i HTML -koden. Nå produserer vi CSS -filen etter dette og kobler også begge filene for å bruke CSS -egenskapene på HTML -elementene.
Som vi ønsker å bruke samme stil på både overskriften og også på avsnittet, trenger vi ikke å sette alle disse elementene separat. Vi følger nettopp grupperingsvelgeren og nevner alle elementene og skiller dem ved å sette et komma "", mellom dem som vist på skjermdumpen nedenfor. Vi nevner alle elementer som “H1, H2, P”. Sett nå krøllete seler og bruk deretter egenskaper i disse krøllete seler. Når vi legger til egenskaper, vil disse egenskapene gjelde for alle elementer som vi har nevnt. Vi bruker den "tekst-align" egenskapen til dem alle og setter dem til "sentrum" ved å bruke denne ene egenskapen.
Deretter dekorerer vi alle disse ved å sette "understrek" som verdien av egenskapen "tekstdekorasjon". "Font-Family" vi bruker for alle disse elementene er "Algerie". Vi justerer "fontstørrelsen" til "22px". Deretter har vi brukt "farge" -egenskapen som vi satte til "maroon" til alle overskrifter så vel som avsnitt.
Her er resultatet av ovennevnte CSS -kode. Du kan se at fargen, fontstørrelse, font-family og alle andre egenskaper som vi har brukt ovenfor, blir brukt på alle overskrifter og avsnitt fordi vi bruker grupperingsvelgeren for dem alle. All styling for disse elementene er det samme her som vi har satt i CSS -koden.
Eksempel 2:
I dette eksemplet skal vi lage flere avsnitt med unike navn og også flere div med forskjellige navn. Vi har en overskrift her før alle disse avsnittene og DIV -ene. Vi vil bruke grupperingsvelgeren på alle disse i CSS -kode.
Vi legger navnene på alle avsnittsklasser og DIV -klasser og også overskriften. Vi kommer til å bruke de samme egenskapene på dem alle. Alle egenskapene som vi skal definere her i de krøllete seler, vil gjelde for alle disse elementene som vi har nevnt. Vi justerer alle elementer i "sentrum" ved hjelp av egenskapen "tekst-align" og bruker "Times New Roman" som verdien av egenskapen "Font-Family". Sett deretter "fontstørrelse" til "23px" og "fargen" for alle er "rød". Nå bruker vi litt "bakgrunnsfarge" som "lys-himmel-blå" og "fontstil" til "kursiv". Alle disse egenskapene vil bli brukt på alle avsnitt, div og også på overskriften.
Her, i dette resultatet av koden ovenfor, vises alle divene, avsnitt og også overskriften i samme stil. Alle stylingegenskapene som brukes på dem alle er de samme. Som vi har brukt grupperingsvelgeren for å gjøre dette.
Eksempel nr. 3:
Her skal vi bruke de samme egenskapene på avsnitt. Alle avsnittene vil vises de samme. For divene bruker vi de samme egenskapene, så alle divs vil gjengi i samme stil.
Vi bruker "Times New Roman" som "Font-Family" av "H1" og "Orange" er valgt her som "Color". "Bakgrunnsfargen" for denne "H1" er satt til "lysegul". Nå plasserer vi alle avsnittnavnene og bruker noen egenskaper her. "Calibri" er spesifisert som verdien for "font-family" -egenskapen og "fontstørrelse" vil være "23px". Da, "maroon" for "fargen". Her legger vi en "bakgrunnsfarge" med "lysgrønn" og verdien for egenskapen "Font-Weight" er satt til "Fet". Deretter har vi "Color" -egenskapen og vi setter den til "grønn" og "bakgrunnsfargen" for alle DIV-er er "Light-Salmon". Vi "kursiv" dem ved å sette denne verdien i egenskapen "tekststil".
Her ser du at alle avsnittene vises i samme stil, og at alle divene vises i samme stil som vi har angitt disse verdiene i CSS -koden.
Eksempel 4:
Vi har tre forskjellige overskrifter, et avsnitt, en div, og også en spennklasse. Vi vil bruke de samme stylingegenskapene på alle disse i CSS.
Vi legger navn på alle elementer som vi ønsker å bruke egenskapene. Du kan se her hvordan du legger disse navnene. Vi må legge komma mellom alle elementers navn og deretter plassere egenskapene inne i de krøllete seler. Vi bruker egenskapen "tekst-align" for å justere "venstre" alle komponenter. Den "Times New Roman" fontfamilien er satt som verdien for egenskapen "Font-Family". Velg deretter "24px" for "fontstørrelse" som vil bli brukt på alle, og "lilla" er valgt for "fargen". Her bruker vi et "bakgrunnsfarge" med "lyspink" og "dristig" nøkkelord er valgt som verdien av egenskapen "Font-Weight". Vi har også brukt "understrek" for egenskapen "tekstdyr" for å gjøre dem alle mer tiltalende.
Resultatet av den nevnte CSS -koden vises her. Som du kan se, har alle overskrifter og avsnitt, og også spennet i samme farge, fontstørrelse, font-family og alle andre stiler de samme fordi vi brukte grupperingsvelgeren for dem alle. Formateringen for disse varene er den samme her.
Konklusjon
I denne opplæringen har vi forklart at grupperingsvelgeren er definert som vi kan velge flere komponenter og stiler samlet, og skille dem med komma. I kodene våre har vi benyttet oss av dette konseptet. I denne opplæringen diskuterte vi også hvordan du bruker denne grupperingsvelgeren og hvordan du angir egenskaper i dette. Vi ga også resultatene av alle disse kodene. For din fordel har vi utviklet en full opplæring som inkluderer koden, en grundig forklaring og resultatene.