CSS Rulesett

“I CSS er regelsettet definert som regelen som vi har fulgt for å gi stilen til velgerne. Vi kan bruke velgernavnet og deretter erklære det ved å bruke forskjellige egenskaper. Vi kan bruke en eller flere utvalgere i vår CSS -kode og bruke flere egenskaper sammen med verdiene deres i erklæringsdelen. Når vi bruker en CSS -egenskap, må vi tildele noen verdier til disse egenskapene i henhold til vårt valg. Hvis det er noe nøkkelord tilgjengelig som vi bruker i stedet for verdien, vil vi også tildele disse nøkkelordene til den egenskapen. Kort sagt bruker vi velgernavnet og plasserer deretter krøllete seler, og i disse krøllete seler bruker vi forskjellige stylingegenskaper som vi ønsker å bruke på den valgte velgeren og deretter gi verdien til disse egenskapene. Vi vil forklare dette regelsettet i CSS i detalj ved å følge denne regelen i vår CSS -kode her.”

Syntaks

Velger
Eiendomsverdi;

Eksempel 1

For å følge denne regelsettet i vår CSS -kode, må vi skrive litt kode i HTML og style disse HTML -elementene i en CSS -fil ved å følge regelen i vår CSS -kode. Vi må opprette en ny fil, og etter å ha valgt HTML som språket, kan du begynne å kode i denne filen. Du kan også bruke Notisblokk eller hvilken som helst tekstredigerer for å sammenstille disse kodene.

Nå skal vi erklære overskrift 1 og 2 ved hjelp av taggene og lage ett enkelt avsnitt under disse overskriftene. Vi oppretter disse overskriftene og avsnittet i HTML -kroppen, og etter å ha lagret dette, kommer vi til å flytte til CSS -filen for å bruke eiendommer på disse overskriftene og avsnittene ved å følge regelen. Vi må koble CSS -filen til denne filen slik at alle egenskapene som vi vil bruke i CSS -filen blir brukt her på dette avsnittet og overskriftene.

Vi kommer til å følge regelen for å style disse overskriftene og avsnittene; Først bruker vi velgernavnet og plasserer deretter krøllete seler i henhold til regelen. Etter dette må vi oppgi navnet på eiendommen som vi ønsker å bruke. Her er "H1" velgeren, og inne i de krøllete seler har vi "farge" -egenskapen, som brukes til å endre fargen på skriften til den fargen som vi plasserer her som en verdi for denne egenskapen. Vi skal bruke den "hvite" fargen som skriftfarge og deretter endre "font-family" ved å sette "Times New Roman" som verdien for denne "fontfamilien.”

Som vi har valgt den "hvite" fargen for skriften, så må vi endre fargen på bakgrunnen. Så for dette bruker vi "bakgrunnsfarget" egenskapen og setter den "svarte" som verdien av denne egenskapen. Her fullfører vi stylingen av "H1", og vi lukker de krøllete seler. Nå, for å bruke stil på "H2", bruker vi igjen velgeren, som er "H2", og gir deretter eiendommen inne i de krøllete seler. Vi setter "fontfargen" "svart" og "font-family" -egenskapen vi bruker her og gir "arial" som dens verdi. Som her bruker vi svart skrift, så vi setter egenskapen "bakgrunnsfarge" til "hvit" og lukker selene på "H2" her.

Så kommer avsnittet, så vi skal bruke "P" som en velger og deretter erklære egenskaper her for avsnittet. Vi setter størrelsen på skrifttypen til avsnittet ved å bruke egenskapen "Font-size" og deretter sette "15px" -verdien for dette. Endre deretter "font-familiens" i dette avsnittet til "calibri", som setter den enkle skrifttypen til avsnittet til "calibri" -font. Vi ønsker også å endre stilen på skriften, så for dette bruker vi "Font-stil" -egenskapen og bruker "nøkkelordet" her, som er "kursiv.”Avsnittet vårt vil vises i" kursiv "" Font-stil.”Deretter har vi“ Font-Weight ”-egenskapen og bruker det" dristige "nøkkelordet for å endre skrifttypen til en fet stil. Paragraffontfargen er satt ved å bruke "farge" -egenskapen til "rød.”

Den gitte utdata viser at alle egenskapene vi har brukt i CSS -filen blir brukt på teksten som vi skriver i HTML -koden. Fontstil, farge og bakgrunnsfarge, alle egenskaper som vi bruker alle gjengitt her i utgangen. Hvis vi ikke følger regelen, blir ikke disse stylingegenskapene brukt på teksten eller dokumentet vårt.

Eksempel nr. 2

Her, i denne HTML -koden, oppretter vi en "div" i starten, inne i kroppen. Deretter skal vi lage to forskjellige overskrifter. Etter disse overskriftene har vi også et avsnitt i denne koden. Alle disse overskriftene og avsnittene er skrevet i “DIV.”Vi lukker“ div ”på slutten av koden før vi lukker“ Body ”-koden.

Nå, her kan du se hvordan vi endrer stilen til alle disse overskriftene, div og avsnitt. Vi følger igjen regelen for å bruke stilen. Først endrer vi "fargen" på skriften og setter verdien som "oransje.”Og bruk en annen eiendom til å endre fontfamilien ved å bruke egenskapen“ Font-Family ”og sette navnet" Algerie "som verdien.

Deretter endrer vi bare fargen på den andre overskriften ved å bruke "farge" -egenskapen og sette fargen på den andre overskriften til "Blue.”Vi har også et avsnitt, så vi setter" bakgrunnsfargen "til" Pink.”Deretter endrer egenskapen“ farge ”skrifttypen til“ svart ”og“ 15px ”-verdien for å stille inn“ skriftstørrelse."Vi ønsker også å gjengi alle disse i midten av siden, så for dette bruker vi" tekst-align "-egenskapen og angir nøkkelordet" senter ", som setter alle disse velgerne til" senteret "og som vi bruker For å bruke denne "tekst-align" på alle velgerne, så bruker vi "kropp" og inne i denne "kroppen" bruker vi denne egenskapen.

I utdataene kan du se at alle overskriftene og avsnittene er på linje i sentrum, og alle egenskapene som vi definerer ovenfor, blir brukt her. I utgangen kan du enkelt merke forskjellen i teksten når vi bruker forskjellige egenskaper for alle utvalgere.

Eksempel nr. 3

I vårt tredje og siste eksempel skal vi lage tre overskrifter, ett avsnitt, og også en liste som er en uordnet liste, og vi vil gjøre litt styling på alle disse.

Først skal vi bruke stylingen til “H1”. Vi legger navnet på velgeren “H1” og bruker forskjellige egenskaper her. Vi setter tekstfargen ved å bruke “Color: Green” og bruker deretter “Font-Family”, som er en eiendom, og bruker “Algerie” for dette. Så kommer "bakgrunnsfarge", som vi satte som "gul.”Juster også denne overskriften til" senteret "ved hjelp av" tekst-align "egenskapen og gi en" kursiv "stil til denne" H1 ".

Nå skal vi endre stilen til "H2" på samme måte som "H1". "Fargen" er satt her som "oransje", og "font-familiens" er "arial" for dette. "Bakgrunnsfargen" for dette er "rosa", og det er "sentrum" justert. Vi har også et avsnitt, så nå skal vi bruke denne "P" som en velger; Eiendommen vi bruker for dette er egenskapen "Font-size", og vi setter den som "15px", og "font-family" er "calibri" og "font-weight" vi bruker er "fet skrift.”

Siden vi har en liste i dette eksemplet, bruker vi denne "UL" -velgeren og bruker stiler. Vi setter sin "farge", som definerer fargen på teksten til "lilla", og "fontstørrelsen" på denne listen er "20px" og "kursiv" i "fontstil.”

I utgangen er den første overskriften bakgrunnsfarge forskjellig fra den andre overskriften, og fontfamilien er endret. Da er fontfamilien, fargen og stilen for avsnitt og lister også forskjellige. Vi bruker forskjellige egenskaper for alle velgere, så her er utgangen, alle disse egenskapene blir brukt.

Konklusjon

Vi har diskutert regelsettet i CSS i denne opplæringen. Vi har skrevet denne opplæringen for å forklare hva regelsettet er og hvordan vi følger denne regelsettet i CSS for å anvende forskjellige egenskaper. Vi har forklart at vi først må bruke valgnavnet og deretter åpne en krøllete brakett; Etter å ha åpnet denne krøllete braketten, plasserer vi navnet på eiendommen som vi ønsker å bruke og deretter angi verdien, eller vi bruker også nøkkelordet hvis det er tilgjengelig for denne eiendommen. Vi har diskutert at vi må følge denne regelen i CSS. Etter å ha lært dette konseptet fra denne opplæringen, vil du bruke eiendom i CSS -koden.