Cascading Style Sheets (CSS) er et typografiark-sprog, der bruges til at beskrive, hvordan HTML- og XML-dokumenter præsenteres visuelt. Ved hjælp af CSS kan udviklere kontrollere og ændre stilen, udseendet og layoutet af elementer på websider.
For eksempel kan udviklere ændre skrifttyper, farver, baggrunde, svæveeffekter og endda gøre deres websider responsive til at tilpasse sig forskellige skærmstørrelser og enheder. Derudover giver CSS brands og udviklere mulighed for nemt at oprette websider, der har ensartede stilarter, der stemmer overens med deres brandfarver.
Når du opretter et HTML-dokument som standard, vil HTML-elementerne blive vist i den nøjagtige rækkefølge, som de vises i kildekoden. Dette kaldes det normale flow.
I et normalt flow, hvor layoutet af HTML-elementer ikke er blevet ændret, kan vi gruppere HTML-elementer i to grupper baseret på, hvordan elementerne vises på en side.
Disse grupper er inline-elementer og blokelementer. Lad os se på disse to grupper for at få en bedre forståelse af, hvordan HTML-elementer vises.
For at følge med skal du oprette en ny mappe og i mappen oprette en index.html-fil og en app.css-fil. Du kan give filerne et navn efter eget valg. Dog er udvidelserne henholdsvis .html og .css.
Åbn HTML-filen i en kodeeditor og indsæt 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 ovenfor links opretter en grundlæggende HTML-kedelplade eller skabelon, hvor vi kan begynde at oprette websider. Den linker også index.html til app.css-filen, så vi kan ændre og kontrollere, hvordan HTML-elementer vises ved hjælp af CSS.
Al HTML-koden præsenteret senere i artiklen vil blive tilføjet i
tags. Vores CSS-fil vil være tom i starten.Indholdsfortegnelse
Blokelementer
Blokelementer er elementer, der optager hele det tilgængelige vandrette rum, hvor de optræder, og skaber en ny linje før og efter elementet. Den optager også en lodret højde svarende til højden af dens indhold og skaber dermed blokke.
Nogle eksempler på elementer på blokniveau omfatter divs
, uordnede lister
- , ordnede lister
- og overskrifter såsom
,
,
og så videre.
Et eksempel på dette er vist nedenfor:
<body> <h1>toadmin.dk</h1> <p>toadmin.dk 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 toadmin.dk 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 åbner HTML-dokumentet i en browser og inspicerer siden, vises resultatet nedenfor:
Bemærk, at
-elementet, der indeholder overskriften toadmin.dk, optager hele den tilgængelige vandrette plads, og afsnittet, der kommer efter det, skubbes til næste linje. Sådan opfører blokelementer sig.
Inline elementer
Inline-elementer er elementer, der passer sammen med andre elementer i samme linje og kun fylder så meget bredde, som det er nødvendigt for, at de kan vises. Inline-elementer starter ikke på en ny linje, og de skubber heller ikke andre elementer til en ny linje.
Inline-elementer bryder ikke indholdsstrømmen. De flyder i indholdet uden at skabe særskilte blokke. Nogle eksempler på inline-elementer omfatter blandt andet spænd , ankertags , input og tid
. Overvej koden nedenfor, som ændrer vores tidligere kode til at inkludere inline-elementer:
<body> <h1>toadmin.dk</h1> <p>toadmin.dk <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/toadmin.dk.com">topics</a> covered include:</p> <p>Some of the topics covered by toadmin.dk include:</p> <ul> <li>Programming</li> <li>Cyber Security</li> <li>Digital Forensics</li> <li>Productivity</li> <li>Gaming</li> </ul> </body>Resultatet af inspektion af den nye HTML-side er vist nedenfor:
Læg mærke til, hvordan -elementet passer på samme linje med andet indhold uden at bryde indholdsstrømmen på siden. Sådan opfører inline-elementer sig.
Vis ejendom
Som vi lige har set, er HTML-elementer som standard enten blokelementer eller inline-elementer, hvilket bestemmer, hvordan de vises, og hvilken indflydelse de har på det normale flow af indhold på et HTML-dokument.
Som webudvikler vil du måske ændre denne standardadfærd i HTML-elementer. Det vil sige, at et element, der som standard er et blokelement, skal behandles som et inline-element eller omvendt. For eksempel vil du måske have en h1, som som standard er et blokelement, skal være et inline-element, eller en , som som standard er inline, skal være et blokelement.
For at ændre standardadfærden for blok- og inline-elementer bruger vi egenskaben display. Visningsegenskaben er en CSS-egenskab, der giver dig mulighed for at ændre eller indstille, om et element skal behandles som et inline-element eller et blokelement.
Ved at bruge egenskaben display kan du ændre et element, der som standard er et blokelement, til et inline-element og omvendt.
For at se dette i aktion skal du tilføje følgende kode til den CSS-fil, du oprettede, og opdatere HTML-siden i browseren.
h1 { display: inline; background-color: paleturquoise; } p { display: inline; background-color: palevioletred; } span { display: block; background-color: darkolivegreen; } ul { background-color: yellow; }Koden ovenfor bruger egenskaben display til at ændre
– og
-elementerne, som som standard er blokelementer, til inline. Det ændrer også -elementet, som som standard er inlinet til at blokere, og tilføjer forskellige baggrundsfarver til elementerne for nem skelnen. Det endelige HTML-dokument, efter at have foretaget ændringer i vores CSS-fil, er vist nedenfor:
Bemærk at
-elementet, som tidligere optog en hel blok, nu deler den samme linje med
-elementet, som også optog en hel blok. Spændelementet med en baggrundsfarve af olivengrøn optager nu en hel blok, selvom dets standardopførsel er at passe på samme linje med andre elementer.
Vigtig skelnen mellem inline- og blokelementer
Bortset fra deres indflydelse på det normale flow af indhold på en side. Der er en anden vigtig skelnen mellem inline- og blokelementer.
Med Inline elementer, hvis elementet har en bredde og/eller en højde egenskab, vil egenskaberne blive ignoreret. Derfor kan du ikke ændre bredden eller højden af et inline-element.
Derudover, hvis du tilføjer en margen til et inline-element, vil margenen kun blive respekteret vandret. Den lodrette margen på et inline-element ignoreres.
Hvis du tilføjer polstring til et inline-element, respekteres det kun vandret. Så meget som polstring også vil dukke op lodret, vil det ikke blive respekteret af resten af elementerne. Derfor vil polstringen ikke forstyrre resten af indholdet over eller under inline-elementet.
For at se dette i aktion skal du slette eller kommentere al koden i CSS-filen og tilføje følgende kode:
span { height: 500px; width: 400px; margin: 20px; background-color: darkolivegreen; } a { padding: 20px; border: 1px solid black; }Den resulterende HTML-side er vist nedenfor:
Bemærk, at lige så meget som -elementet havde en højde- og en breddeegenskab, har dets højde og bredde ikke ændret sig. Derudover anvendes marginen, der tilføjes til alle sider i -elementet, kun vandret.
Med blokelementer respekteres bredde- og højdeegenskaberne. Margin og polstring påført blokelementer respekteres også og træder i kraft i alle retninger.
For at se dette i aktion skal du tilføje følgende kode til den eksisterende CSS-fil:
h1 { height: 50px; width: 200px; border: 1px solid black; padding: 50px; margin: 35px; background-color: aquamarine; }Den resulterende HTML er vist nedenfor:
Bemærk, at bredden, højden, margenen og polstringen, der blev tilføjet til h1, et blokelement, er blevet respekteret i alle retninger.
Fra forskellen i, hvordan bredde, højde, margin og polstring anvendes på inline- og blokelementer, får vi en tredje visningsværdi, som kan bruges med visningsegenskaben til at ændre, hvordan elementer vises. Dette er inline-blok.
Inline-blokelementer
Et inline-blok-element opfører sig som et inline-element; det vil sige, at den passer sammen med andre elementer i samme linje uden at skubbe elementer til en anden linje. Men i modsætning til inline-elementer respekteres bredden, højden, margenen og polstringen af inline-blokelementer.
Derfor vil du bruge visningsmuligheden inline-blok, når du vil have et element til at opføre sig som et inline-element, men stadig tillade dig at tilføje bredde, højde, margen og polstring, der vil blive anvendt på elementet, som om det var en blok element. Det vil sige, at egenskaberne vil blive anvendt og respekteret i alle retninger.
For at se dette i aktion skal du slette eller kommentere al koden i CSS-filen og tilføje 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 indstiller display-egenskaben for til inline-blok. er som standard et integreret element. Koden tilføjer derefter en bredde, højde, margen og polstring til -elementet. Resultatet er vist nedenfor:
Bemærk, at bredden, højden, margenen og polstringen, der er blevet tilføjet til -elementet, alle er blevet respekteret, og span-elementet vises stadig som et inline-element.
Dette er, hvordan inline-blok-elementer opfører sig. Tidligere forsøgte vi at tilføje de samme egenskaber til -elementet, men de blev ikke respekteret, fordi var et inline-element på det tidspunkt.
Inline vs. Inline-Block
Forskellene mellem inline og inline-blok er vist nedenfor:
Karakteristisk InlineInline-Block Display-adfærdDen påvirkes af linjehøjdeegenskaber.Respekter vandrette marginer og polstring.Bredde og højdeIgnorerer bredde- og højdeegenskaber.Respekterer bredde- og højdeegenskaber.Margener og polstringIgnorerer vandrette marginer og polstring.Flow i indholdet starter ikke på en ny linje.LinjehøjdePåvirkes af linjehøjdeegenskaben.Den er påvirket af linjehøjdeegenskab.Horizontal layoutIgnorerer egenskaber for tekstjustering og tekstjustering.Reagerer på egenskaber for tekstjustering og tekstjustering.
Som du kan se, er inline- og inline-blokelementer forskellige i, hvordan visse CSS-egenskaber opfører sig, når de anvendes på dem.
Hvornår skal man bruge Inline og Inline-Block
Som udvikler skal du bruge inline-indstillingen, når du ønsker, at dit HTML-indhold skal flyde inden for den samme linje uden at forårsage linjeskift. For eksempel, når du arbejder med inline-tekstniveauelementer såsom , og , giver det mening at bruge den inline-indstilling, som er deres standardadfærd.
På den anden side skal du bruge inline-blok, når du vil have et element til at opføre sig som et blokelement, men stadig flyde i indholdet uden at forårsage linjeskift og skubbe resten af indholdet til nye linjer. Det vil sige, brug inline-blok, hvis du vil have kontrol over et elements bredde, højde, margin og padding egenskaber, men stadig have elementet til at være en del af inline flowet.
Konklusion
CSS har inline-, blok- og inline-visningsmuligheder, som kan bruges til at ændre eller kontrollere, hvordan elementer vises på en webside. Vi bruger egenskaben display til at indstille et element til at være inline, blok eller inline-blok.
Som webudvikler er det vigtigt at forstå forskellen mellem inline-, blok- og inline-blokelementer. Brug artiklen til at gøre dig bekendt med dem, og begynd at bruge visningsegenskaben i dine projekter for at få mere øvelse.
Dernæst kan du også udforske nogle CSS Grid Generatorer for at bygge komplekse layouts visuelt.
- , listeelementer