Cascading Style Sheets (CSS) er et stilarkspråk som brukes til å beskrive hvordan HTML- og XML-dokumenter presenteres visuelt. Ved hjelp av CSS kan utviklere kontrollere og endre stilen, utseendet og layouten til elementer på nettsider.
For eksempel kan utviklere endre fonter, farger, bakgrunner, sveveeffekter og til og med gjøre nettsidene deres responsive for å tilpasse seg forskjellige skjermstørrelser og enheter. I tillegg lar CSS merkevarer og utviklere enkelt lage nettsider som har konsistente stiler som stemmer overens med merkefargene deres.
Når du oppretter et HTML-dokument som standard, vil HTML-elementene vises i den nøyaktige rekkefølgen de vises i kildekoden. Dette omtales som den normale flyten.
I en normal flyt, hvor layouten til HTML-elementer ikke er endret, kan vi gruppere HTML-elementer i to grupper basert på hvordan elementene vises på en side.
Disse gruppene er innebygde elementer og blokkelementer. La oss se på disse to gruppene for å få en bedre forståelse av hvordan HTML-elementer vises.
For å følge med, lag en ny mappe, og opprett en index.html-fil og en app.css-fil i mappen. Du kan gi filene et navn etter eget valg. Utvidelsene er imidlertid henholdsvis .html og .css.
Åpne HTML-filen i et koderedigeringsprogram og lim inn følgende kode:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Display Property</title> <link rel="stylesheet" href="https://wilku.top/which-css-display-style-is-best-for-you/app.css"> </head> <body> </body> </html>
Koden over lenkene skaper en grunnleggende HTML-kjede eller mal der vi kan begynne å lage nettsider. Den kobler også index.html til app.css-filen slik at vi kan endre og kontrollere hvordan HTML-elementer vises ved hjelp av CSS.
All HTML-koden som presenteres senere i artikkelen vil bli lagt til i
-taggene. Vår CSS-fil vil være tom i starten.Innholdsfortegnelse
Blokkelementer
Blokkelementer er elementer som tar opp hele det tilgjengelige horisontale rommet der de vises, og skaper en ny linje før og etter elementet. Den tar også opp en vertikal høyde som tilsvarer høyden på innholdet, og skaper dermed blokker.
Noen eksempler på blokknivåelementer inkluderer divs
, uordnede lister
- , ordnede lister
- og overskrifter som
,
,
, og så videre.
Et eksempel på dette er vist nedenfor:
<body> <h1>tipsbilk.net</h1> <p>tipsbilk.net is an online publication that produces high-quality articles on Technology, Business, and Fintech to help businesses and people grow. Some of the topics covered include:</p> <p>Some of the topics covered by tipsbilk.net include:</p> <ul> <li>Programming</li> <li>Cyber Security</li> <li>Digital Forensics</li> <li>Productivity</li> <li>Gaming</li> </ul> </body>Når du åpner HTML-dokumentet i en nettleser og inspiserer siden, vises resultatet nedenfor:
Legg merke til at
-elementet som inneholder overskriften tipsbilk.net tar opp hele den tilgjengelige horisontale plassen, og avsnittet som kommer etter det skyves til neste linje. Dette er hvordan blokkelementer oppfører seg.
Innebygde elementer
Inline-elementer er elementer som passer sammen med andre elementer i samme linje og bare tar opp så mye bredde som er nødvendig for at de skal vises. Innebygde elementer starter ikke på en ny linje, og de skyver heller ikke andre elementer til en ny linje.
Innebygde elementer bryter ikke flyten av innhold. De flyter i innholdet uten å skape distinkte blokker. Noen eksempler på innebygde elementer inkluderer blant annet spenn , ankertagger , innganger og tid
. Tenk på koden nedenfor, som endrer vår tidligere kode til å inkludere innebygde elementer:
<body> <h1>tipsbilk.net</h1> <p>tipsbilk.net <span>I AM A SPAN ELEMENT</span> is an online publication that produces high-quality articles on Technology, Business, and Fintech to help businesses and people grow. Some of the <a href="https://wilku.top/which-css-display-style-is-best-for-you/tipsbilk.net.com">topics</a> covered include:</p> <p>Some of the topics covered by tipsbilk.net include:</p> <ul> <li>Programming</li> <li>Cyber Security</li> <li>Digital Forensics</li> <li>Productivity</li> <li>Gaming</li> </ul> </body>Resultatet av å inspisere den nye HTML-siden vises nedenfor:
Legg merke til hvordan -elementet passer på samme linje med annet innhold uten å bryte innholdsflyten på siden. Dette er hvordan inline-elementer oppfører seg.
Vis eiendom
Som vi nettopp har sett, er HTML-elementer som standard enten blokkelementer eller inline-elementer, som bestemmer hvordan de vises og hvilken innvirkning de har på den normale flyten av innhold i et HTML-dokument.
Som nettutvikler vil du kanskje endre denne standardoppførselen i HTML-elementer. Det vil si at et element som som standard er et blokkelement skal behandles som et inline-element eller omvendt. For eksempel vil du kanskje at en h1, som som standard er et blokkelement, skal være et inline-element, eller en , som som standard er inline, skal være et blokkelement.
For å endre standardoppførselen til blokk- og innebygde elementer, bruker vi display-egenskapen. Display-egenskapen er en CSS-egenskap som lar deg endre eller angi om et element skal behandles som et inline-element eller et blokkelement.
Ved å bruke display-egenskapen kan du endre et element som som standard er et blokkelement til et innebygd element og omvendt.
For å se dette i aksjon, legg til følgende kode i CSS-filen du opprettet og oppdater HTML-siden i nettleseren.
h1 { display: inline; background-color: paleturquoise; } p { display: inline; background-color: palevioletred; } span { display: block; background-color: darkolivegreen; } ul { background-color: yellow; }Koden ovenfor bruker display-egenskapen til å endre
– og
-elementene, som er standard blokkelementer, til inline. Det endrer også -elementet, som som standard er innebygd til å blokkere, og legger til forskjellige bakgrunnsfarger til elementene for enkel forskjell. Det endelige HTML-dokumentet, etter å ha gjort endringer i CSS-filen vår, vises nedenfor:
Legg merke til at
-elementet, som okkuperte en hel blokk tidligere, nå deler samme linje med
-elementet, som også okkuperte en hel blokk. Spanelementet med en bakgrunnsfarge av olivengrønn opptar nå en hel blokk selv om standardoppførselen er å passe på samme linje med andre elementer.
Viktig skille mellom inline- og blokkelementer
Bortsett fra deres innvirkning på den normale flyten av innhold på en side. Det er et annet viktig skille mellom inline- og blokkelementer.
Med inline-elementer, hvis elementet har en bredde- og/eller en høyde-egenskap, vil egenskapene bli ignorert. Derfor kan du ikke endre bredden eller høyden på et innebygd element.
I tillegg, hvis du legger til en marg til et innebygd element, vil margen bare bli respektert horisontalt. Den vertikale margen på et innebygd element ignoreres.
Hvis du legger til polstring i et inline-element, respekteres det bare horisontalt. Så mye som polstring også vil vises vertikalt, vil det ikke bli respektert av resten av elementene. Derfor vil ikke polstringen forstyrre resten av innholdet over eller under det innebygde elementet.
For å se dette i aksjon, slett eller kommenter ut all koden i CSS-filen og legg til følgende kode:
span { height: 500px; width: 400px; margin: 20px; background-color: darkolivegreen; } a { padding: 20px; border: 1px solid black; }Den resulterende HTML-siden vises nedenfor:
Legg merke til at så mye som -elementet hadde en høyde- og en bredde-egenskap, har ikke høyden og bredden endret seg. I tillegg brukes marginen som legges til alle sider i -elementet bare horisontalt.
Med blokkelementer respekteres bredde- og høydeegenskapene. Margin og polstring brukt på blokkelementer respekteres også og trer i kraft i alle retninger.
For å se dette i aksjon, legg til følgende kode i den eksisterende CSS-filen:
h1 { height: 50px; width: 200px; border: 1px solid black; padding: 50px; margin: 35px; background-color: aquamarine; }Den resulterende HTML-en vises nedenfor:
Legg merke til at bredden, høyden, margen og polstringen som ble lagt til h1, et blokkelement, har blitt respektert i alle retninger.
Fra forskjellen i hvordan bredde, høyde, margin og polstring brukes på inline- og blokkelementer, får vi en tredje visningsverdi som kan brukes med display-egenskapen for å endre hvordan elementer vises. Dette er inline-blokk.
Inline-blokkelementer
Et inline-block-element oppfører seg som et inline-element; det vil si at den passer sammen med andre elementer i samme linje uten å skyve elementer til en annen linje. I motsetning til inline-elementer, respekteres imidlertid bredden, høyden, margen og polstringen til inline-blokkelementer.
Derfor vil du bruke visningsalternativet inline-block når du vil at et element skal oppføre seg som et inline-element, men fortsatt lar deg legge til bredde, høyde, margin og utfylling som vil bli brukt på elementet som om det var en blokk element. Det vil si at egenskapene vil bli brukt og respektert i alle retninger.
For å se dette i aksjon, slett eller kommenter ut all koden i CSS-filen og legg til følgende kode:
span { display: inline-block; background-color: darkolivegreen; height: 50px; width: 200px; margin: 10px; padding: 10px; border: 1px solid black; }CSS-koden ovenfor setter display-egenskapen til til inline-block. er et innebygd element som standard. Koden legger deretter til en bredde, høyde, margin og utfylling til -elementet. Resultatet vises nedenfor:
Legg merke til at bredden, høyden, margen og polstringen som er lagt til -elementet, alle har blitt respektert, og span-elementet vises fortsatt som et innebygd element.
Dette er hvordan inline-blokk-elementer oppfører seg. Tidligere prøvde vi å legge til de samme egenskapene til -elementet, men de ble ikke respektert fordi var et innebygd element på den tiden.
Inline vs. Inline-Block
Forskjellene mellom inline og inline-blokk er vist nedenfor:
KarakteristikkInlineInline-Block Display atferdDen påvirkes av linjehøydeegenskapen.Respekter horisontale marger og utfylling.Bredde og høydeIgnorerer bredde- og høydeegenskaper.Respekterer bredde- og høydeegenskaper.Marger og utfyllingIgnorerer horisontale marginer og utfylling.Flyter i innholdet starter ikke på en ny linje.Linjehøydepåvirkes av linjehøydeegenskapen.Den påvirkes av linjehøydeegenskapen.Horisontal layoutIgnorerer egenskaper for tekstjustering og tekstjustering.Reagerer på egenskaper for tekstjustering og tekstjustering.
Som du kan se, er inline- og inline-blokk-elementer forskjellige i hvordan visse CSS-egenskaper oppfører seg når de brukes på dem.
Når du skal bruke Inline og Inline-Block
Som utvikler kan du bruke det innebygde alternativet når du vil at HTML-innholdet ditt skal flyte innenfor samme linje uten å forårsake linjeskift. For eksempel, når du arbeider med innebygde tekstnivåelementer som , og , er det fornuftig å bruke det innebygde alternativet, som er standardoppførselen deres.
På den annen side, bruk inline-block når du vil at et element skal oppføre seg som et blokkelement, men fortsatt flyte innenfor innholdet uten å forårsake linjeskift og skyve resten av innholdet til nye linjer. Det vil si, bruk inline-block hvis du vil ha kontroll over bredden, høyden, margin og polstringsegenskapene til et element, men fortsatt at elementet skal være en del av inline flyten.
Konklusjon
CSS har inline-, blokk- og inline-visningsalternativer, som kan brukes til å endre eller kontrollere hvordan elementer vises på en nettside. Vi bruker display-egenskapen til å sette et element til å være inline, block eller inline-block.
Som webutvikler er det viktig å forstå forskjellen mellom inline-, block- og inline-block-elementer. Bruk artikkelen til å gjøre deg kjent med dem og begynn å bruke visningsegenskapen i prosjektene dine for å få mer praksis.
Deretter kan du også utforske noen CSS Grid Generatorer for å bygge komplekse oppsett visuelt.
- , listeelementer