CSS -ordre

Ordensbegrepet er også kjent blant dataprogrammerere, utviklere og vanlige mennesker. Som tittelen viser, bruker CSS -stylingen av Hyper Text Markup Language (HTML) også ordreegenskapen til å organisere en HTML -filens elementer i henhold til ens valg. Denne ordreegenskapen kan brukes på mer enn ett element av samme type ved å bruke sine respektive HTML -koder i HTML -skriptet. Hvis du ikke har noen forkunnskaper om "orden" -egenskapen til CSS -styling, vil denne artikkelen demonstrere bruken av CSS "Order" -egenskapen.

Eksempel

La oss starte med denne artikkelens første illustrasjon for å demonstrere bruken av "orden" -egenskapen til CSS -styling i HTML. Du trenger en "HTML" -typefil for å legge til og kjøre HTML -kode. Så vi har opprettet en ny fil, “Test.HTML ”, i vår" artikler "-mappe og åpnet den med Visual Studio -koden. HTML -koden må startes med "

Vi vil begynne å forklare dette eksemplet fra den grunnleggende "hodet" -koden. Innenfor denne taggen har vi brukt de forskjellige CSS -egenskapene for bestemte HTML -elementer definert i denne HTML -filen via "Style" -koden. Først har vi stylet den viktigste "div" -merket som ble brukt i "kroppen" på HTML -siden vår via dens spesifiserte ID, i.e., "hoved". "Div" -merker brukes alltid til å dele siden i seksjoner eller stykker for å skille noen av elementene og innholdet på en HTML -side fra andre. Vi har brukt eiendomsbredde og høyde for å definere bredden og lengden på dette “div” -elementet på HTML -siden i piksler, i.e., 400px bredde og 70px høyde.

Dette "DIB" -området vil inneholde den solide grensen til en svart kant kant på fem piksel rundt. Denne grensen ville definere grensen til det viktigste "div" -området. Deretter brukte vi Main Div Tags hoved -ID for å bruke CSS på barnet "Div" -merker. Vi har satt bredden til 100 piksler og høyde til 70 piksler for alle de fem indre “div” -elementmerker, som vil ligge innenfor denne HTML -tagens viktigste “div” -seksjon. Disse høydene og breddene for indre og ytre Div -elementer er spesifisert for å passe likt de fem div -taggene i den ytre taggen. Etter det brukte vi de fem div -tag -IDene separat på fem linjer for å style alle de fem “div” -seksjonene deretter og annerledes. Her kommer "orden" -egenskapen til CSS -styling for å bestille de fem DIV -kodene i henhold til tall. Den brune "div" vises på 3^Rd, blå på 5^th, grønn på 2^nd, lilla på 1^st, og oransje på 4^th. Stilen og hodemerket ble stengt her.

La oss begynne å forklare den grunnleggende "kropp" -merket som brukes til å definere og representere de grunnleggende elementene på nettsiden i nettleseren vår. Innenfor denne taggen har vi brukt den viktigste overskriften på størrelse en, den viktigste "div" -merket og de fem barna "div" -merker oppført etter hverandre. Den viktigste "div" -merket er spesifisert med ID, "Main", for å style den innenfor hodemerket og kan enkelt differensieres. De indre fem "div" -merker er spesifisert med noe styling og deres separate ID -er, i.e., brun, blå, grønn, lilla og oransje.

Disse ID -ene vil bli brukt til å style disse “div” -kodene separat i stilkoden. Vi har stylet alle fem taggene ved å bruke "stilen" -elementet i åpningen av alle fem div -tagger ved hjelp av CSS Inline Styling -metoden. Bakgrunnsfargegenskapen har blitt brukt til å spesifisere fargene for alle fem div-tagger hver for seg, i.e., brun, blå, grønn, lilla og oransje. Disse fem fargene ville bli fylt ut i boksene som er opprettet av "Div" -elementene på nettsiden og så bra ut på skjermen. Den viktigste "div" -merket og den viktigste "kropp" -merket er stengt her. I tillegg vil vår "HTML" hovedtaggening bli brukt her for å avslutte HTML -koden og få den til å kjøre jevnt.

La oss først lagre denne koden med Ctrl+s. Trykk deretter på "Kjør" -menyen fra oppgavelinjen til Visual Studio Code -verktøyet. Trykk på det viste "Kjør uten feilsøking" -alternativet og velg nettleseren for å fortsette. Vi bruker Google Chrome -nettleseren for å utføre den.

Output -fanen i Chrome -nettleseren viser følgende bilde av fem div -deler innenfor en hoved "div" av den solide svarte grensen. Sekvensen til barnets "div" -bokser er den samme som vi har beskrevet i forklaringen av en kode, i.e., lilla 1^st, Grønn 2^nd, brun 3^Rd, Oransje 4^th, og blå 5^th. Selv om vi har definert den tilfeldige sekvensen av "Div" -elementer i CSS -stylingen, påvirker den ikke utgangen og vises som definert i stylingen.

Den forrige kodeillustrasjonen og dens websideutgang viser oss bruken av tilfeldige tall i "orden" -egenskapen for å stille inn "div" -merker til tilfeldige posisjoner. Disse verdiene for egenskapen "orden" var enkle positive heltall. Derfor har vi ingen problemer med å bruke dem. Hva om en bruker prøver å angi ordreegenskapen med de negative verdiene i stilkoden? La oss prøve dette for å se resultatene. Så vi har oppdatert koden vår for å gjøre det. Innen stilkoden har vi oppdatert verdien av "orden" -egenskapen for hver indre "div" -kode. For Brown er det 3. For blått er det -1. For grønt er det 2. For lilla er det -2. Til slutt, for oransje, er det 0. Disse verdiene definerer indeksen for et hoved "div" -element. La oss lagre denne koden for å se.

Kjører denne oppdaterte koden i Chrome -nettleseren, vi har det oppdaterte resultatresultatet som vises nedenfor. Som vi har definert 0 for ordreegenskapen til "oransje" div, har den blitt vist midt i hoveddiven. De grønne og brune “div” -merker vises på høyre side etter den oransje “div”. Bruken av -2 for lilla DIV og -1 for blå tag har vist de indre “div” -merker i henhold til sekvensen av negative heltall.

Konklusjon

Denne artikkelen inneholder en enkel og kort forklaring på å bruke "orden" CSS -egenskapen i HTML -koden. For dette har vi forklart et kort HTML -kodeeksempel. Dette eksemplet inneholdt bruk av "Div" -elementer for å utdype konseptet "orden" CSS -eiendom riktig. Vi har diskutert den detaljerte analysen av å bruke de positive heltallverdiene for ordreegenskapen og sammenlignet den med bruk av negative heltallverdier for samme egenskap.