CSS displeja izmantošana, lai kontrolētu vietņu izkārtojumus

CSS displeja izmantošana, lai kontrolētu vietņu izkārtojumus

CSS displeja rekvizīts ir spēcīgs rīks tīmekļa dizaineriem. Tas ļauj kontrolēt vietnes elementu izkārtojumus ar minimālu stilu un vienkāršām vērtībām, kuras ir viegli atcerēties.



Bet ko dara katra no šīm vērtībām un kā tās darbojas? Noskaidrosim.





DIENAS VIDEO MAKEUSEOF

Kas ir CSS displeja rekvizīts?

Parādīšanas rekvizīts norāda lodziņa renderēšanas veidu, kas tiek izmantots HTML elementiem tīmekļa lapā. Tas izraisa dažādas uzvedības izpausmes, tostarp nerādīšanos vispār. Šīs vērtības varat rediģēt savā vietnē, izmantojot stila lapu vai atbilstošās CSS pielāgošanas sadaļas CMS rīki, piemēram, WordPress .





Saglabājiet elementus saskaņā ar CSS displeju: iekļauts

  teksts ar css iekļauto vērtību

Platuma un augstuma vērtības neattiecas uz elementu ar iekļautu displeju; iekšpusē esošais saturs nosaka tā izmērus. Iekļautie HTML elementi var atrasties blakus citiem elementiem, izturoties kā a . Iekļauts displejs visbiežāk tiek izmantots tekstam.

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>

Šis HTML marķējums un iepriekš minētais CSS kalpo kā labs parādītās iekļautās vērtības piemērs. Lietojot kopā, tiks parādīta viena teksta rindiņa, kas izveidota ar diviem dažādiem HTML elementiem.



Kontrolējiet vietņu izkārtojumus ar CSS displeju: bloķējiet

  elementi ar css displeja bloku

Dažos veidos displeja bloka vērtība ir pretēja iekļautajai vērtībai. Var iestatīt augstuma un platuma izmērus, un elementi ar šo vērtību nevar būt blakus viens otram. Iepriekš minētajā piemērā ir parādīti divi elementi ar bloka vērtību. Elementi ar bloka displeja vērtību pēc noklusējuma tiek rādīti to vecāka elementa maksimālajā platumā.

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>

Atšķirībā no iekļautā stila piemēra, šis displeja bloka vērtību piemērs sadala teksta rindiņas divās dažādās rindās. Pielāgošanas satura platuma vērtība iestata elementu platumu, lai tas atbilstu teksta garumam.





Side-by-Side HTML elementi ar CSS displeju: inline-block

  html elementi ar css inline-block vērtību

CSS displeja iekļautā bloka vērtība darbojas tāpat kā parastā iekļautā vērtība, tikai ar iespēju pievienot noteiktas dimensijas. Tādējādi ir iespējams izveidot režģim līdzīgus izkārtojumus, nenovietojot vecāku elementus. Atgriežoties pie iepriekšējā piemēra, pievienojot iekļauto bloku vērtību, elementi atrodas blakus viens otram.

spēlēt google play spēles uz datora
<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>

Iekļautā bloka vērtība īpaši neatšķiras no iekļautās vērtības. Ir svarīgi ņemt vērā, ka ar šo vērtību varat iestatīt elementu izmērus, tādējādi dažos gadījumos atvieglojot darbu.





Slēpt vietnes elementus ar CSS displeju: nav

Vienkāršākā displeja vērtība ir “nav”. Šī vērtība slēpj elementu un visus pakārtotos elementus, kā arī piemales un citus atstarpju rekvizītus. Elementi ar CSS nerāda vērtību joprojām ir redzami pārlūkprogrammas inspektoros.

Izveidojiet elastīgus un atsaucīgus elementus ar CSS displeju: flex

  css displeja flexbox

Display flex ir viens no jaunākajiem CSS izkārtojuma režīmiem. Ja displeja flex atrodas uz vecākelementa, visi elementi tajā kļūst par elastīgiem CSS elementiem. Šīs konfigurācijas vecākais elements ir flexbox.

Flexboxes rada atsaucīgus dizainus ar iepriekš definētiem mainīgajiem, piemēram, platumu un augstumu. Tas ir vērts apgūstot HTML/CSS flexboxes pirms sākat darbu.

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>

Novietojiet Flexboxes blakus ar displeju: inline-flex

  css displeja flexbox ar iekļautu vērtību

Inline-flex darbojas tāpat kā parasts flexbox, ar papildu priekšrocību, ka elements var sēdēt blakus citiem elementiem.

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>

Izveidojiet sarežģītas tabulas ar CSS displeju: tabula

  pamata html tabula, kas izveidota ar css

Displeja tabulas vērtība atgādina senākos vietņu dizaina laikus. Lai gan lielākā daļa vietņu mūsdienās neizmanto tabulas saviem izkārtojumiem, tās joprojām ir derīgas datu un satura rādīšanai lasāmā formātā.

Pievienojot tabulas vērtību HTML elementam, tas darbosies kā tabulas elements, taču jums ir nepieciešamas papildu vērtības, lai tabula darbotos pareizi.

CSS displejs: tabula-šūna

Elementi ar tabulas šūnu vērtību darbojas kā atsevišķas šūnas galvenajā tabulā. Un tabulas kolonnas un tabulas rindas vērtības grupē šīs atsevišķās šūnas kopā.

CSS displejs: tabula-rinda

Tabulas rindas vērtība darbojas tāpat kā HTML elements. Tā kā elementu ar tabulas šūnas vērtību vecāks sadalīs tabulu horizontālās rindās.

CSS displejs: tabula-kolonna

Tabulas kolonnas vērtība darbojas līdzīgi tabulas rindas vērtībai, tikai tā nesadala tabulu. Tā vietā varat izmantot šo vērtību, lai dažādām jau esošajām kolonnām pievienotu konkrētus CSS noteikumus.

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>

Izveidojiet blakus tabulas ar CSS displeju: iekļauta tabula

Tāpat kā citi iekļautie varianti, kurus mēs jau apskatījām, iekļautā tabula ļauj novietot tabulas elementus blakus citiem elementiem.

Izveidojiet adaptīvus vietņu izkārtojumus ar CSS displeju: režģi

  css elementi ar režģa vērtību

CSS displeja režģa vērtība ir līdzīga tabulas vērtībai, tikai režģa kolonnu un rindu izmēri var būt elastīgi. Tādējādi režģi ir ideāli piemēroti tīmekļa lapu galvenā izkārtojuma izveidei. Tie atstāj vietu pilna platuma galvenēm un kājenēm, vienlaikus ļaujot izmantot dažāda lieluma satura apgabalus.

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>

Režģi ir līdzīgi elastīgajām kastēm, tikai tie var novietot elementus zem un blakus viens otram. Režģa-veidnes apgabalu rekvizīts tam ir ļoti svarīgs. Kā redzat no koda, mūsu galvene un kājene aizņem četras vietas masīvā, jo tās ir pilna platuma. Sānjoslas katra aizņem vienu slotu, savukārt saturs aizņem divus, efektīvi sadalot režģa vidējo rindu trīs kolonnās.

CSS displejs: iekļauts režģis

Iekļautās režģa vērtības izmantošana ļaus jūsu režģim atrasties blakus citiem elementiem, tāpat kā citas iekļautās vērtības šajā rokasgrāmatā.

CSS displeja izmantošana tīmekļa dizainam

CSS displeja rekvizīts piedāvā ērtu veidu, kā pielāgot vietnes elementu struktūras, nemainot HTML marķējumu. Tas ir ideāli piemērots tiem, kas izmanto satura piegādes platformas, piemēram, Shopify vai WordPress, taču tas var būt noderīgs arī vispārīgam tīmekļa dizainam.