”,“ ”,”

”,“
”,“
• ”. Alle overskrifter er eksempler på blokkelementet. De okkuperer så mye plass som mulig, og de okkuperer plass som standard. Når vi bruker avsnitts -taggen hver gang når det er en

  Tag, det starter en ny linje for dette avsnittet. Det samme er tilfelle for alle blokkelementene.

  I denne guiden vil vi bruke alle disse blokkelementene i kodene våre og forklare dem i detalj. Vi vil også demonstrere noen eksempler i denne guiden.

  Eksempel 1

  For å bruke disse blokkelementene i HTML -koden vår, må vi opprette en HTML -fil. For dette må vi åpne Visual Studio -koden, åpne en ny fil, velge språket som HTML og begynne å kode i denne filen. I denne guiden vil vi gi en demo av disse eksemplene ved å bruke programvaren Visual Studio Code. Så vi skriver HTML -koden og lagrer den. Filutvidelsen som skal brukes her er ".html ”.

  I dette eksemplet bruker vi de to blokkelementene “

  ”Og“ ”. Vi oppretter to avsnitt og to “Div” -elementer i HTML -filen. Vi setter navnene på avsnittet som "element1" og "element2". Vi setter også navnene på "Div" -klassen til "D1" og "D2". Vi bruker disse navnene i CSS -koden. Den første "

  ”Opptar den fulle horisontale linjen mens den neste“ ”starter fra den nye linjen. Vi bruker litt styling på disse blokkelementene ved hjelp av CSS -egenskapene.

  CSS -kode:

  Følgende kode er CSS -koden vi bruker til stilen til de forrige blokkelementene. Vi bruker de forskjellige stylingegenskapene her.

  Vi bruker navnet på første avsnitt som er “Element1” og skriver det som “P.Element1 ”. Deretter bruker vi stylingegenskapene for dette avsnittet. Når vi bruker "grensen" for å bruke grensen rundt avsnittet, vil du se at denne grensen er gjengitt på hele linjen. Her definerer "3px" bredden på grensen, "solid" definerer typen av grensen, og "oransje" er å sette grensfargen på avsnittet. "Font-Family" av avsnittet er satt til "Algerie". Og stilen til denne skriften er "kursiv". Fontstørrelsen er satt til “25px”.

  Vi bruker de samme egenskapene og de samme verdiene for andre ledd. Vi bruker disse egenskapene på “Div”. Først satte vi navnet på div til “Div.d1 ”og bruk deretter egenskapene her. Vi skaper også grensen rundt Div -klassene. For Div har vi en "prikket" grense av "4px" i "rød" farge. "Font-Family" av denne "Div" er "Times New Roman". Vi justerer også teksten til "div" i "senteret". Vi setter dens "skriftstørrelse" til "30px". Alle disse egenskapene som vi brukte i “D1” brukes også i “D2”. Så stylingen av begge DIV -klassene er den samme.

  Produksjon:

  Begge avsnitt i denne utgangen ser ut til å være de samme. Du vil kanskje legge merke til at grensen opptar hele linjen mens neste avsnitt og div starter fra den nye linjen. Begge divelementene er av samme stil og vises i en egen linje. Grensen til begge div opptar også hele horisontale rom. Så begge avsnittene er blokkelementer.

  Eksempel nr. 2

  I eksempel 2 har vi to avsnitt og to divelementer igjen. Men her er navnene på avsnittet “E1” og “E2”. Og navnene på Div -elementene er “Div1” og “Div2”.

  CSS -kode:

  Bakgrunnen for avsnittet er “oransje”. "Font-Family" vi bruker her er "Cambria" med en størrelse på "30px". Fargen på teksten er "grønn". Vi bruker egenskapene og verdiene til disse egenskapene for punkt 2. Etter dette styler vi “div”. For Div bruker vi en "fantasi" font-familiens og "bakgrunnsfargen" til Div er satt til "rosa". Tekststørrelsen er satt som "Font-size: 32px". Fargen er satt til “blå”. For den andre div brukes verdiene på egenskapene vi satte for div 1.

  Produksjon:

  Her viser bakgrunnsfargene for avsnitt og divelementer at dette er blokkeringselementer. Bakgrunnsfargen brukes på hele horisontale linjen og på det vertikale rommet.

  Eksempel nr. 3

  Vi bruker blokkelementene her. Vi lager to forskjellige overskrifter som heter “

  ”Og“

  ”, Og to forskjellige avsnitt kalt“ A1 ”og“ A2 ”. Etter dette har vi en "" klasse. Inne i denne "" -klassen bruker vi "

  ”Og“
  • ”For å opprette listen. Alle disse elementene er blokkelementer.

    CSS -kode:

    Vi setter grensen til "div" til "2px" som beskriver bredden. Grensen er satt til "solid". Og grensefargen er satt til "lilla". “H1” er på linje i “senteret”. "Font-Family" vi bruker for overskriftene er "Algerie". "Fargen" beskriver fargen på skriften som er satt til "blå". For den andre overskriften bruker vi "orkideen" som fargen på teksten. Deretter har vi "Li" som representerer listen over elementer. "Font-Family" på denne listen er "Arial" og satt til "18px" i størrelse. Fargen på teksten på listen er satt til “grønn”. Etter dette bruker vi stilen på avsnittet, der vi bruker "Times New Roman" som "font-familiens". "19px" er "fontstørrelsen" og "fargen" på teksten er satt til "oransjerød". Alle de samme egenskapene brukes på andre ledd.

    Produksjon:

    Eksempel 4

    Her har vi “" av “List1”. Inne i dette "skaper vi"

    ”,“

    ”, Og“

  • ”, Og lukk deretter denne første“ ”. Etter dette lager vi en annen "", en annen "

    ", og en til "

    ”Med navnet“ P2 ”og en“

  • ”. Igjen, inne i det andre “”. Alle disse elementene som vi bruker her er blokkelementene.

    CSS -kode:

    "Bakgrunnsfargen" til Div er satt til "lysgrønn". Grensen er satt til "grønn" og "solid" med en "4px" bredde. “H3” er satt som “kursiv”. For denne overskriften satte vi "font-family" til "Times New Roman". "Fargen" på "H3" er "blå". Nå må vi bruke stilen på "Li" som brukes til listen. "Font-Family" på listen er "sans-serif", det er "20px" i størrelse, og "maroon" i farger. Vi bruker den samme "font-stilen" for begge overskriftene som er "algerian" og justerer begge overskriftene til "senteret". "Bakgrunnsfargen" til den andre "div" er "lyspink". Den ytre grensen er "magenta" og er "4px" i bredden.

    Produksjon:

    Her kan du se at bakgrunnsfargen vi brukte til Div også brukes på avsnittet, overskriften og listen siden vi skrev alle disse elementene i "div". Bakgrunnsfargen og grensen brukes på alle elementene. Du kan også legge merke til at hvert avsnitt, overskrift og liste over elementer vises i den nye linjen mens hvert element opptar det fulle horisontale og vertikale rommet. Så dette er alle blokkeringselementer.

    Konklusjon

    I denne guiden diskuterte vi blokkelementkonseptet. Vi lærte at blokkelementene alltid bruker det fulle horisontale og vertikale rommet, og det neste blokkelementet starter alltid fra den nye linjen. Vi lærte også at de okkuperer plass som standard. Vi utforsket de fire kodene i denne guiden, der vi brukte HTML og CSS -egenskapene.Vi diskuterte disse kodene i detalj i denne guiden. Vi har også vist utdataene og forklart blokkelementene i detalj. Vi nevnte blokkelementene og brukte disse blokkelementene i kodene våre.