CSS først av typen

Et kaskaderende stilark har en egenskap til å fremheve det første innholdet av HTML blant flere av en spesifikk type og deretter bruke effekten. HTML og CSS vil begge spille en viktig rolle i implementeringen av dette fenomenet.

Hvordan fungerer først av typen eiendommer i CSS?

Denne egenskapen fungerer på en slik måte at innholdet vi ønsker å anvende en hvilken som helst spesifisert effekt, er skrevet med nøkkelordene 'First-of-Type'. Det får automatisk tilgang til innholdet som er deklarert første gang inne i koden. Den grunnleggende syntaks for denne egenskapen er:

HTML Content Tag: First-of-Type
// Effekter du vil bruke.

Hvorfor bruker vi først av typen i CSS?

I CSS kan vi bruke forskjellige effekter på HTML -innholdet. En av de viktigste og viktige tilnærmingene til å anvende effekter på HTML -taggene er gjennom interne, inline eller ekstern CSS. Inline CSS er skrevet inne i taggene, noe som betyr at den bare brukes når en effekt blir brukt på den taggen spesifikt. Mens interne og eksterne CSS brukes når klassene og ID -ene vi bruker i stilarket, får tilgang til bare de taggene der vi har inkludert navn på klasser og ID -er.

Men når det gjelder 'First-of-Type', trenger vi ikke bruke klasser eller ID-er. Denne egenskapen brukes når du vil bruke en HTML -kode i et repeterende antall ganger, men du vil bare bruke effekten på taggen som vises først. Denne egenskapen har gjort prosessen med å anvende effekter på taggen enklere sammenlignet med inline CSS. Her inne skriver vi bare et enkelt stykke kode i starten i stilkoden i stedet for å finne hver HTML -innholdskode og nevne stilkoden med effekter inni den.

Eksempel 1: Først av typen i avsnittet og overskriften

Denne egenskapen til den første av typen brukes ganske enkelt på avsnittet av HTML -innholdet.

For det første vil bakgrunnsfargen på websiden bli satt. Det er en ekstra eiendom som nettopp brukes til å gjøre produksjonen mer tiltalende. En overskrift erklæres sammen med en

overskriftskode. Igjen brukes en ny overskrift her. Denne gangen er det på vei 2

. Deretter er en enkel avsnittsmerke i bruk. Inne. En ny overskrift

blir lagt til som igjen blir fulgt av et nytt avsnittsmerke. Dette er hierarkiet eller sekvensen til alt HTML -innholdet vi har brukt:

..

..

..

..

..

HTML kroppskode

Denne CSS først av typen brukes på noen få av disse HTML -kodene bare på dem som dukket opp først. Så dette vil sikkert hjelpe brukeren til å identifisere de første til møllene.

HTML CSS -kode

Etter HTML -kroppen, må du legge til CSS i hodeseksjonen i HTML -koden. I hodeposisjonen har vi gitt en tittel på siden vår. Deretter, inne i stilmerket, legges et avsnitt lagt til den første eiendommen. Vi har lagt til farge og kursivert skriftstilen til avsnittet.

P: First-of-type
Fargen rød;
Font-stil: kursiv;

Videre, overskrift 3

brukes med en gul farge og skriftstilen er valgt.

Lukk alle taggene og lagre koden med en HTML -utvidelse for å opprette en HTML -webside på nettleseren. Ellers, '.TXT 'Extension vil bare danne tekst for å vises på nettstedet når du åpner filen i nettleseren.

Produksjon

Ved utførelse av filen vil du se at den første type egenskapen brukes på overskriften og avsnittet.

Eksempel 2: CSS First Of Type In Description List

I HTML brukes en beskrivelsesliste til å inneholde HTML -innholdet akkurat som en enkel uordnet liste gjør. For det første er dette noen grunnleggende terminologier i beskrivelseslisten som vil bli brukt i eksempelkoden:

• er for beskrivelseslisten.

• Denne taggen er for definisjonen av det beskrivende begrepet eller navnet.
• det brukes til å beskrive hvert begrep som er nevnt.

Nå får vi se hvordan det fungerer i HTML kroppskode. Inne i kroppen legges en overskrift. Etter det starter vi beskrivelseslisten ved å bruke

Tag og deretter to

er brukt. Inne i begge begrepene

, Vi har brukt 3 beskrivelser av vilkårene

.Dette eksemplet viser grønnsaker og frukt som DT og navnene som

. Et lite stykke kode er skrevet nedenfor.

Grønnsaker:

1. Tomater

Etter det, lukk alle taggene og bevege deg mot CSS -delen.

HTML kroppskode

Når du er ferdig med HTML -delen i stilkoden, må du bruke en effekt på

tagg med skriftvekten eller stilen som fet.

Dt
Fontvekt: fet;

Som

Tagger er to, vi har ikke nevnt den første type egenskapen, denne effekten vil bli brukt på begge

verdier.

Alle vilkårene som er skrevet som

får en polstringsavstand mellom hverandre. Så vi har ganske enkelt skrevet 'DD' -navnet for å bruke denne effekten på alle DDS.

Dd
Margin: 3px;

HTML CSS -kode

Men vi ønsker å bruke en grenseeffekt på bare den DD som først vises blant alle de 6 <

Tagger. Så vi vil bruke denne CSS -egenskapen. Dessuten legges bakgrunnseffekten til

Tag med grensen.

DD: First-of-type
Grense: 2px solid lilla;
Bakgrunnsfarge: Lysgrønn;

Produksjon

På utførelsen vil du se at den første

blir fremhevet med en bakgrunnsfarge og en grense.

Merk
I HTML -kroppen er det ingen kriterier å nevne inne i taggen eller fremheve spesifikt for å vise at en bestemt tag er den første eller at vi ønsker å bruke en effekt på en spesifikk tag. Du trenger bare å sørge for at alle taggene blir erklært riktig sammen med åpnings- og lukkekodene. Og rekkefølgen på HTML -innhold bør bemerkes mens du skriver koden fordi denne første av type eiendommer bare vil bli brukt på innholdet som er erklært først.

Konklusjon

I denne artikkelen prøvde vi å hjelpe brukeren med et viktig aspekt av CSS-design med den første av type eiendommer. Denne egenskapen er nyttig når du trenger å bruke effektene på det aller første deklarerte HTML -innholdet blant antall av samme type innhold. Først startet vi med grunnleggende arbeid med den første av typen og behovet for denne eiendommen i websiden design. Vi har forklart to eksempler inkludert overskriften og avsnittvalget i det første eksemplet. Mens det andre eksemplet inneholder beskrivelseslisten som skal påvirkes gjennom denne CSS -egenskapen.