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.
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
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="lv">
<galvu>
<meta rakstzīmju kopa ="utf-8">
<virsraksts>CSS displeja vērtības</title>
<stils
>
.rindā {
displejs: iekļauts;
fonta izmērs: 3rem;
}
#inline-1 {
fona krāsa: dzeltena;
polsterējums: 10px 0px 10px 10px;
}
#inline-2 {
fona krāsa: gaiši zaļa;
polsterējums: 10px 10px 10px 0px;
}
</style>
</head>
<ķermenis>
<h1>Iekļauts CSS displejs</h1>
<div klase="rindā" id="inline-1">Šis ir teksts</div>
<div klase="rindā" id="inline-2">ar iekļauto īpašuma vērtību.</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
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="lv">
<galvu>
<meta rakstzīmju kopa ="utf-8">
<virsraksts>CSS displeja vērtības</title>
<stils>
.bloķēt {
displejs: bloks;
fonta izmērs: 3rem;
platums: fit-saturs;
}
#bloks-1 {
fona krāsa: dzeltena;
polsterējums: 10px 10px 10px 10px;
}
#bloks-2 {
fona krāsa: gaiši zaļa;
polsterējums: 10px 10px 10px 10px;
}
</style>
</head>
<ķermenis>
<h1>CSS displeja bloks</h1>
<div klase="bloķēt" id="bloks-1">Šis ir teksts</div>
<div klase="bloķēt" id="bloks-2">ar bloka īpašuma vērtību.</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
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.
<!DOCTYPE html>
<html lang="lv">
<galvu>
<meta rakstzīmju kopa ="utf-8">
<virsraksts>CSS displeja vērtības</title>
<stils>
.inline-block {
displejs: inline-block;
fonta izmērs: 3rem;
platums: fit-saturs;
}
#inline-block-1 {
fona krāsa: dzeltena;
polsterējums: 10px 10px 10px 10px;
}
#inline-block-2 {
fona krāsa: gaiši zaļa;
polsterējums: 10px 10px 10px 10px;
}
</style>
</head>
<ķermenis>
<h1>CSS displeja iekļautais bloks (platums iestatīts)</h1>
<div klase="iekļauts bloks" id="inline-block-1">Šis ir teksts</div>
<div klase="iekļauts bloks" id="inline-block-2">ar inline-block rekvizītu
vērtību.</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.
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
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="lv">
<galvu>
<meta rakstzīmju kopa ="utf-8">
<virsraksts>CSS displeja vērtības</title>
<stils>
.flex {
displejs: flex;
fonta izmērs: 3rem;
}
#flex-1 {
fona krāsa: dzeltena;
platums: 40%;
augstums: 100 pikseļi;
}
#flex-2 {
fona krāsa: gaiši zaļa;
platums: 25%;
augstums: 100 pikseļi;
}
#flex-3 {
fona krāsa: gaiši zila;
platums: 35%;
augstums: 100 pikseļi;
}
</style>
</head>
<ķermenis>
<h1>CSS Display Flex</h1>
<div klase="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
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="lv">
<galvu>
<meta rakstzīmju kopa ="utf-8">
<virsraksts>CSS displeja vērtības</title>
<stils>
.inline-flex {
displejs: inline-flex;
fonta izmērs: 3rem;
platums: 49.8%;
}
#inline-flex-1 {
fona krāsa: dzeltena;
platums: 40%;
augstums: 100 pikseļi;
}
#inline-flex-2 {
fona krāsa: gaiši zaļa;
platums: 25%;
augstums: 100 pikseļi;
}
#inline-flex-3 {
fona krāsa: gaiši zila;
platums: 35%;
augstums: 100 pikseļi;
}
</style>
</head>
<ķermenis>
<h1>CSS displejs Inline-Flex</h1>
<div klase="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div klase="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
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ā a
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="lv">
<galvu>
<meta rakstzīmju kopa ="utf-8">
<virsraksts>CSS displeja vērtības</title>
<stils>
.tabula {
displejs: galds;
fonta izmērs: 3rem;
}
.header {
displejs: tabula-galvene-grupa;
fonta izmērs: 3rem;
}
#column-1 {
displejs: tabula-kolonna-grupa;
fona krāsa: dzeltena;
}
#column-2 {
displejs: tabula-kolonna-grupa;
fona krāsa: gaiši zaļa;
}
#column-3 {
displejs: tabula-kolonna-grupa;
fona krāsa: gaiši zila;
}
#rinda-1 {
displejs: tabula-rinda;
}
#rinda-2 {
displejs: tabula-rinda;
}
#rinda-3 {
displejs: tabula-rinda;
}
#šūna {
displejs: tabula-šūna;
polsterējums: 10 pikseļi;
platums: 20%;
}
</style>
</head>
<ķermenis>
<h1>CSS displeja tabula</h1>
<div klase="tabula">
<div id="kolonna-1"></div>
<div id="kolonna-2"></div>
<div id="kolonna-3"></div>
<div klase="galvene">
<div id="šūna">Vārds</div>
<div id="šūna">Vecums</div>
<div id="šūna">Valsts</div>
</div>
<div id="rinda-1">
<div id="šūna">Džefs</div>
<div id="šūna">21</div>
<div id="šūna">ASV</div>
</div>
<div id="rinda-2">
<div id="šūna">iesūdzēt</div>
<div id="šūna">34</div>
<div id="šūna">Spānija</div>
</div>
<div id="rinda-3">
<div id="šūna">Boriss</div>
<div id="šūna">57</div>
<div id="šūna">Singapūra</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 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="lv">
<galvu>
<meta rakstzīmju kopa ="utf-8">
<virsraksts>CSS displeja vērtības</title>
<stils>
.režģis {
displejs: režģis;
fonta izmērs: 3rem;
režģa veidnes apgabali:
'galvene galvene galvene galvene'
'kreisās sānjoslas satura saturs labā sānjosla'
'kājene kājene kājene';
atstarpe: 10 pikseļi;
}
#grid-1 {
režģa apgabals: galvene;
fona krāsa: dzeltena;
augstums: 100 pikseļi;
polsterējums: 20 pikseļi;
teksta līdzināšana: centrs;
}
#grid-2 {
režģa apgabals: kreisā sānjosla;
fona krāsa: gaiši zaļa;
augstums: 200 pikseļi;
polsterējums: 20 pikseļi;
teksta līdzināšana: centrs;
}
#grid-3 {
režģa apgabals: saturs;
fona krāsa: gaiši zila;
augstums: 200 pikseļi;
polsterējums: 20 pikseļi;
teksta līdzināšana: centrs;
}
#grid-4 {
režģa apgabals: labā sānjosla;
fona krāsa: gaiši zaļa;
augstums: 200 pikseļi;
polsterējums: 20 pikseļi;
teksta līdzināšana: centrs;
}
#grid-5 {
režģa apgabals: kājene;
fona krāsa: dzeltena;
augstums: 100 pikseļi;
polsterējums: 20 pikseļi;
teksta līdzināšana: centrs;
}
</style>
</head>
<ķermenis>
<h1>CSS displeja režģis</h1>
<div klase="režģis">
<div id="režģis-1">Virsraksts</div>
<div id="režģis-2">Kreisā sānjosla</div>
<div id="režģis-3">Saturs</div>
<div id="režģis-4">Labā sānjosla</div>
<div id="režģis-5">Kājene</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
Izmantojot iekļauto režģa vērtību, jūsu režģis tiks novietots 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.
