CSS Only-Child
Eksempel 01:
Vi starter HTML -kodefilen i Visual Studio -koden med HTML -hovedåpningen etterfulgt av åpningen av en hodemerke ved siden av tittelkoden åpningen. Denne tittelkoden inneholder tittelen for denne siden, og tittelen er stengt her. Deretter har vi en hovedkode for CSS -stil og kroppskoden for å legge til elementer på HTML -siden sammen med litt styling. Vi må forstå kroppen til HTML først. For dette bruker vi en enkel overskrift av den største størrelsen øverst på HTML -siden, i.e. H1, som viser at dette er et eksempel på en kun for barn. Deretter bruker vi det enkle “div” -elementet for å lage en ny divisjon på HTML -websiden etterfulgt av dens Child -taggen, i.e. merkelapp. Denne etikett -taggen bruker en enkel setning i den.
Nå er "etikett" -elementet den eneste taggen i "div" -merket. Det vil bli tatt som et bare barn-forskyvning i dette tilfellet. Vi har et annet divelement som brukes etter dette på HTML -siden. Dette DIV -elementet inneholder ytterligere to tagger eller elementer i det. Den første taggen er Span -taggen, og den andre er etikett -taggen; Begge inneholder noen tekstdata i den. Siden denne div-taggen har to barn, ville ikke et eneste barn av den bli tatt som et "bare barn" -forskyvning for styling. Til slutt har vi en ny avsnittsmerke med bare "etiketten" i den. Nå vil denne etikett-taggen til avsnittselementet også bli tatt som det eneste barnet til foreldrene og stylet deretter. Kroppselementet er fullført her.
La oss ta en form for utformingen av denne HTML -siden. Innenfor stilen CSS-taggen bruker vi “etiketten” -elementet med klassen forskyvning “Only-Child” for å bruke noen stylinger på alle barnelementene i bestemte tagger/elementer som ikke inneholder noe annet barn i dem. Med andre ord, stylingen brukes på barnelementene som ikke har noen søsken. Vi bruker eiendomsbakgrunnen for å legge til den grønne fargebakgrunnen for akkurat dette barnet. Font-Family-egenskapen inneholder mer enn 1 verdi for teksten som er inneholdt av det aktuelle barnet, og skriftstørrelsen er ekstra stor. Fargen for teksten til "etikett" barnemerker er lysrosa i henhold til eiendomsfargen. Stilmerket ved siden av hodemerkelementet er fullført. La oss lukke HTML -taggen etter kroppskoden og lagre denne koden. Prøv å kjøre den med Chrome-nettleseren for å se utdataene for Only-Child Class Offset.
Følgende utdata som vises viser en enkel overskrift øverst etterfulgt av de to klare “Div” -seksjonene og ett avsnitt. Seksjonene som vises i den grønnfargede bakgrunnen viser det eneste barnet til "Div" -delen, og dermed stylet deretter via det eneste barnets forskyvning for etikettelementet. Linjen etter det første barneelementet representerer den andre "div" -delen med to barn, spenn og etikett, på samme linje. Mens det andre barnet som er stylet i den grønne bakgrunnen, er en del av et avsnittselement.
Eksempel 02:
Vi starter dette HTML -skriptet med samme HTML -format på koder - Start med HTML -taggen etterfulgt av hodemerket, kroppskoden, åpningen og lukkingen. HTML -kroppen inneholder en overskrift av størrelse 1, HTMLs største overskrift. Vi starter en bestilt liste i HTML -kroppskoden vår. Dette listeelementet er lagt til med "OL" -liste -taggen. Denne bestilte listen inneholder totalt 4 nummererte listeelementer i den via bruk av "Li" -liste -tagger. Den første nummererte listen inneholder en enkelt uordnet liste i den med en enkelt listeelement som er tatt som det eneste barnet. Den andre listeelementet på den viktigste bestilte listen inneholder en annen uordnet liste i den. Denne indre uordnede listen inneholder tre listeelementer i den med bruk av "Li" -merker. Den tredje listeelementet på hovedbestilt liste inneholder et enkelt listeelement i den med den indre uordnede listekoden etterfulgt av “li” -taggen.
Det siste listeelementet på den viktigste bestilte listen inneholder et annet uordnet listeelement, “UL”. Dette uordnede listeelementet inneholder totalt tre listeelementer i det ved hjelp av "Li" -merker. Den viktigste bestilte er lukket etter bruken av alle de 4 hovedlisteelementene i den. Liket på vår HTML -side er fullført her.
La oss se på utformingen av hele HTML -siden. Vi bruker de to "li" nøkkelordmerker i stilkoden for å style alle de indre listeelementene til de viktigste 4 -listeelementene. Egenskapen List-stil-type for de indre listeelementene er spesifisert som en "sirkel" -stil. På den annen side bruker vi den eneste barnets offset-klassen for listeelementene for å legge til noen stylinger til de eneste listeartiklene som er det eneste barnet til deres respektive foreldre og ikke har noe annet barn eller søsken. Vi spesifiserer tekstfargen for disse barnelisteelementene som rød med forskjellige font-familiens bruksområder. Vi bruker også Square List Style-typen via bruk av "List-Style-typen". Stylingen for denne koden er ferdigstilt. La oss lagre og kjøre koden vår for å se utdataene.
Utgangen for denne koden viser en enkelt overskrift etterfulgt av den bestilte listen over 4 nummererte listeelementer. De eneste uordnede listeelementene til disse bestilte listeelementene er uthevet i den røde tekstfargen med kulen i firkantet stil. Resten av de uordnede listeartiklene vises i sirkelens kule -stil.
Konklusjon
Denne artikkelen har satt merket for å demonstrere bruken av Only-Child Offset-klassen i CSS-styling for å style de eneste elementene i en HTML-side som er et enkelt barn av deres overordnede element. For dette formålet benyttet vi totalt to korte eksempler i vår HTML -skripting for å demonstrere anvendelsen av denne forskyvningsklassen til slike barneelementer. Det første eksemplet inneholder bruken av denne forskyvningen til noen "div" -seksjoner, mens det andre eksemplet bruker det til å style de uordnede listeelementene for en nummerert liste.