CSS Asterisk
Syntaks
*Eiendomsverdi
ELLER
*foreldre
Eiendomsverdi
Eksempel 1
Opprett HTML -filen og skriv avsnitt og overskrifter i HTML -filen slik at vi kan style disse ved å bruke CSS “*” -velgeren. I denne opplæringen er programvaren vi bruker for å utføre eksempler Visual Code Studio. Så vi åpner HTML -filen i denne visuelle studiokoden og skriver HTML -koden her. Vi gir også koden. Denne filen lagres ved å bruke “.HTML ”Fil Extension.
Du kan se at vi har en overskrift1 i kroppen til HTML og deretter en "" klasse der vi har to forskjellige avsnitt ved å bruke "
”Tag og lukk deretter denne“ div ”. Etter dette “har vi et annet avsnitt“
”Som er utenfor“ ”. Her lukker vi kroppen og redder den. Deretter går vi videre til CSS -filen vår der vi bruker "*" -sterisken for å bruke forskjellige stiler på denne HTML -siden.
CSS -kode
Her oppretter vi CSS -filen vår og bruker “.CSS ”filtypen med denne filen. Vi må koble denne filen til HTML -filen. Så all styling som vi nevner her vil gjelde for HTML -filen som vi har laget før dette.
Først bruker vi "*" "-velgeren og bruker deretter forskjellige stilegenskaper inne i de krøllete seler i denne"*"-velgeren. Vi bruker egenskapen "bakgrunnsfarge" og har valgt den "gule" fargen til bakgrunnen på denne siden. Deretter har vi "farge" -egenskapen, og denne "farge" -egenskapen endrer fargen på teksten til "lilla". Det vil endre alle tekstfargene som er skrevet i HTML -filen til “Purple”. Bruk også egenskapen "Font-Family" som brukes til å endre skriftstil, og sett den til "Times New Roman". All teksten blir skrevet i denne skriftstilen. Alle stilegenskapene som vi bruker vil gjelde på hele HTML -siden fordi vi bruker “*” og vi nevner ikke noe navn med dette “*”.
Produksjon
Vi får denne utdataene ved å høyreklikke på HTML-filen og velge "Åpne i standard nettleser". Utgangen viser hvordan denne "*" "-velgeren fungerer i CSS.
Du kan observere at all teksten vises i "lilla" farge og all tekst er skrevet i "Times New Roman" skriftstil og hele bakgrunnsfargen er "gul". Så når vi bruker "*" "-velgeren, trenger vi ikke bruke det separat på hvert element. "**" -Velgeren tar alle elementene i HTML -filen og bruker stilen for dem alle.
Eksempel 2
Vi har eksempel 2 og endrer HTML -koden. Vi oppretter tre avsnitt i "Div" og ett avsnitt utenfor Div i denne gitte HTML -koden.
CSS -kode
I denne CSS -filen skal vi nevne “div” med “*” -erisken. Bruk deretter stylingegenskapene for denne "div". Disse stylingene vil gjelde for alle elementene i "div".
Vi bruker “Div *” og plasserer krøllete seler der vi bruker stilegenskapene. Her bruker vi "lyseblå" som en "bakgrunnsfarge" bare for divelementene. Deretter er "Blue-Violet" satt for fargen på teksten eller font. Endre også skriftstilen til divelementer til "Algerie" ved å bruke egenskapen "Font-Family". Vi justerer teksten til "Div" -elementene i "sentrum" ved hjelp av "tekst-align".
Produksjon
I denne utgangen er overskriften enkel. Det er ingen stil brukt på denne overskriften, da denne overskriften er skrevet utenfor “Div”. Vi bruker stylingen bare på "Div" -elementene. Nå ble de tre neste linjene skrevet inne i “Div”. Fontstilen endres, skriftfargen endres, og også teksten er plassert i midten og bakgrunnen for disse linjene er blå. Alle de stylingene som vi bruker i CSS -filen vår, brukes på alle “div” -elementene. Det siste avsnittet er også enkelt, ettersom det også er skrevet utenfor “Div”.
Eksempel 3
Vi utfører også et annet eksempel, slik at du enkelt kan få forskjellen mellom hvordan "*" -velgeren fungerer alene og hvordan det fungerer når vi bruker noe navn med denne "*" -velgeren.
I denne HTML -filen oppretter vi overskrift 1 ved å bruke "
" stikkord; en DIV -klasse som bruker “” -merket; avsnitt ved hjelp av “
" stikkord; og også en spennklasse som bruker "" -taggen. Vi vil bruke forskjellige stiler på “H1”, “Div”, “P” og “Span” ved hjelp av CSS.
CSS -kode
Først bruker vi bare “*” -velgeren for å endre hele bakgrunnsfargen på HTML -siden. Den "rosa" fargen er valgt som en "bakgrunnsfarge" for HTML-siden. Deretter bruker vi “P” med “*” slik at all styling vil bli brukt på avsnittene skrevet i HTML -filen. "Bakgrunnsfargen" for alle avsnitt er satt som "lysegrønt" farge. Størrelsen på teksten som er skrevet i avsnitts -taggen vil bli gjengitt i "Monospace" når vi setter størrelsen på avsnittsteksten til "Monospace". Alle disse stilegenskapene brukes på avsnittet.
Deretter kommer vi til å style "spenn" klasseelementene ved å bruke "spennet" med "*". Spanelementene 'bakgrunnsfarge er "lyseblå" og skriftstilen er "kursiv" og "fet". Deretter har vi en "div" -klasse, og vi kommer til å style dette. Vi endrer bakgrunnsfargen til "gul". "Font-size" er "130%" for Div-elementene. All teksten til Div-elementet er gjengitt i sentrum, mens vi bruker "tekst-align". "Font-Family" for dette er "Algerie". "H1" forblir. Så vi må bruke litt stil på denne H1. "Bakgrunnsfargen" for overskrift 1 er "oransje" og teksten til denne overskriften 1 er satt som "grønn" i fargen. Størrelsen på skrifttypen på overskriften 1 er “25px”, og den er “Center” justert.
Produksjon
Utgangen viser at overskriften er forskjellig i farger, og at stilen til denne overskriften er annerledes. Vi bruker to "div" -klasser, og disse to div -klassenes data er de samme i styling. Du kan se at det er fire avsnitt og bakgrunnsfargen på disse fire avsnittene er grønne. Spennklassene er de samme i stil, og bakgrunnsfargen på spennklassen er lyseblå. Hele bakgrunnen er den samme som vi bruker denne "bakgrunnsfargede" egenskapen med "*".
Konklusjon
I denne opplæringen har vi lært bruken av "*" -terisken i CSS. Vi har studert hvordan det fungerer alene og hvordan det fungerer når vi skriver noe navn med denne "*" -velgeren. Vi har lært at denne stjernevelgeren tar alle elementene på HTML -siden og har brukt stilen på alle disse elementene. Vi har undersøkt forskjellige eksempler der vi har brukt denne "*" -velgeren i CSS og har gjort resultatet fra alle disse eksemplene. Vi har gitt HTML- og CSS -koden i denne opplæringen sammen med utgangene til disse kodene.