Օգտագործելով CSS էկրան՝ վեբ կայքի դասավորությունները վերահսկելու համար
Ցուցադրման հատկությունը կարող է կտրուկ փոխել սովորական HTML տարրերի վարքը: Եթե գիտեք, թե ինչպես, դուք կկարողանաք կարգավորել մի շարք դասավորություններ:
CSS ցուցադրման հատկությունը հզոր գործիք է վեբ դիզայներների համար: Այն թույլ է տալիս վերահսկել վեբկայքի տարրերի դասավորությունը նվազագույն ոճով, պարզ արժեքներով, որոնք հեշտ է հիշել:
Բայց ի՞նչ է անում այս արժեքներից յուրաքանչյուրը և ինչպե՞ս են դրանք գործում: Եկեք պարզենք.
Ի՞նչ է CSS ցուցադրման հատկությունը:
Ցուցադրման հատկությունը սահմանում է վեբ էջի HTML տարրերի համար օգտագործվող տուփի մատուցման տեսակը: Սա հանգեցնում է տարբեր վարքագծի, ներառյալ ընդհանրապես չներկայանալը: Դուք կարող եք խմբագրել այս արժեքները ձեր վեբկայքում ոճային թերթիկի կամ CSS հարմարեցման համապատասխան բաժինների միջոցով CMS գործիքներում, ինչպիսին է WordPress-ը:
Պահպանեք տարրերը համահունչ CSS էկրանով
Լայնության և բարձրության արժեքները չեն կիրառվում ներկառուցված էկրանով տարրի վրա. բովանդակությունը ներսում սահմանում է իր չափերը: Ներկառուցված HTML տարրերը կարող են կողք կողքի նստել այլ տարրերի հետ՝ իրենց պահելով որպես : Ցուցադրման ներդիրում առավել հաճախ օգտագործվում է տեքստի համար:
<!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>
Այս HTML նշումը և CSS-ը վերևում ծառայում են որպես ցուցադրման ներկառուցված արժեքի լավ օրինակ: Միասին օգտագործման դեպքում սա կցուցադրի տեքստի մեկ տող, որը կազմված է երկու տարբեր HTML տարրերով:
Վերահսկել վեբ կայքի դասավորությունները CSS ցուցադրմամբ՝ արգելափակում
Որոշ առումներով ցուցադրման բլոկի արժեքը հակադիր է ներդիրային արժեքին: Բարձրության և լայնության չափերը կարող են սահմանվել, և այս արժեքով տարրերը չեն կարող նստել միմյանց կողքին: Վերևի օրինակը ցույց է տալիս բլոկի արժեքով երկու տարր: Բլոկի ցուցադրման արժեք ունեցող տարրերը լռելյայն իրենց մայր տարրի առավելագույն լայնությամբ:
<!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>Ի տարբերություն ներդիր ոճի օրինակի, ցուցադրման բլոկի արժեքի այս օրինակը տեքստի տողերը բաժանում է երկու տարբեր տողերի: Համապատասխան բովանդակության լայնության արժեքը սահմանում է տարրերի լայնությունը տեքստի երկարությանը համապատասխանելու համար:
Կողք-կողքի HTML տարրեր CSS էկրանով. inline-block
CSS ցուցադրման inline-block արժեքը աշխատում է ճիշտ այնպես, ինչպես սովորական ներկառուցված արժեքը, միայն հատուկ չափումներ ավելացնելու ունակությամբ: Սա հնարավորություն է տալիս ստեղծել ցանցանման դասավորություններ՝ առանց մայր տարրերի տեղում: Վերադառնալով նախորդ օրինակին՝ ավելացնելով inline-block արժեքը, թույլ է տալիս տարրերին նստել միմյանց կողքին:
<!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>
Inline-block արժեքը շատ չի տարբերվում ներկառուցված արժեքից: Կարևոր է նշել, որ դուք կարող եք սահմանել այս արժեքով տարրերի չափերը, սակայն որոշակի դեպքերում հեշտացնելով աշխատելը:
Թաքցնել վեբ կայքի տարրերը CSS էկրանով. չկա
Ցուցադրման ամենապարզ արժեքը «ոչ մեկը» է: Այս արժեքը թաքցնում է տարրը և ցանկացած երեխա տարրեր՝ լուսանցքների և այլ տարածությունների հատկությունների հետ միասին: CSS ցուցադրման ոչ մի արժեք ունեցող տարրերը դեռ տեսանելի են դիտարկիչի տեսուչներում:
Ստեղծեք ճկուն և արձագանքող տարրեր CSS էկրանով. flex
Display flex-ը CSS դասավորության նորագույն ռեժիմներից մեկն է: Երբ ցուցադրման ճկունությունը գտնվում է մայր տարրի վրա, դրա ներսում գտնվող բոլոր տարրերը դառնում են ճկուն CSS տարրեր: Այս կազմաձևման հիմնական տարրը flexbox է:
Flexbox-ները ստեղծում են արձագանքող ձևավորումներ նախապես սահմանված փոփոխականներով, ինչպիսիք են լայնությունը և բարձրությունը: Արժե սովորել HTML/CSS flexbox-ների մասին նախքան սկսելը:
<!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> Flexbox-ների դիրքը կողք կողքի Ցուցադրմամբ՝ inline-flex
Inline-flex-ն իրեն պահում է ճիշտ այնպես, ինչպես սովորական flexbox-ը, և լրացուցիչ առավելությունն այն է, որ տարրը կարող է նստել այլ տարրերի կողքին:
<!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>Ստեղծեք բարդ աղյուսակներ CSS էկրանով. աղյուսակ
Ցուցադրվող աղյուսակի արժեքը հիշեցնում է կայքի դիզայնի հին օրերը: Թեև կայքերից շատերն այսօր չեն օգտագործում աղյուսակներ իրենց դասավորության համար, դրանք դեռ վավեր են տվյալների և բովանդակությունը ընթեռնելի ձևաչափով ցուցադրելու համար:
Աղյուսակի արժեքը HTML տարրին ավելացնելու դեպքում այն կգործի աղյուսակի տարրի պես, բայց ձեր աղյուսակը ճիշտ աշխատելու համար ձեզ անհրաժեշտ են լրացուցիչ արժեքներ:
CSS ցուցադրում՝ աղյուսակ-բջիջ
Աղյուսակ-բջջային արժեք ունեցող տարրերը գործում են որպես հիմնական աղյուսակի առանձին բջիջներ: Եվ աղյուսակ-սյունակ և աղյուսակ-շարքի արժեքները խմբավորում են այս առանձին բջիջները միասին:
CSS ցուցադրում՝ աղյուսակ-տող
Աղյուսակ տողի արժեքը աշխատում է այնպես, ինչպես
CSS ցուցադրում՝ աղյուսակ-սյունակ
Աղյուսակ-սյունակ արժեքն աշխատում է աղյուսակի տողի արժեքի նման, միայն այն չի բաժանում ձեր աղյուսակը: Փոխարենը, դուք կարող եք օգտագործել այս արժեքը՝ արդեն գոյություն ունեցող տարբեր սյունակներում հատուկ CSS կանոններ ավելացնելու համար:
<!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>Ստեղծեք կողք կողքի աղյուսակներ CSS էկրանով. inline-table
Ինչպես մյուս ներդիր տարբերակները, որոնք մենք արդեն դիտել ենք, inline-table-ը հնարավորություն է տալիս սեղանի տարրերը տեղադրել այլ տարրերի կողքին:
Կառուցեք պատասխանատու վեբ կայքի դասավորություններ CSS էկրանով. ցանց
CSS ցուցադրման ցանցի արժեքը նման է աղյուսակի արժեքին, միայն ցանցի սյունակները և տողերը կարող են ճկուն չափումներ ունենալ: Սա ցանցերը դարձնում է իդեալական վեբ էջերի հիմնական դասավորությունը ստեղծելու համար: Նրանք տարածք են թողնում ամբողջ լայնությամբ վերնագրերի և էջատակների համար՝ միաժամանակ հնարավորություն տալով ունենալ տարբեր չափերի բովանդակության տարածքներ:
<!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>
Ցանցերը նման են flexbox-ներին, միայն նրանք կարող են տարրեր տեղադրել միմյանց ներքևում և կողքին: Ցանց-կաղապար-տարածքների հատկությունը կենսական նշանակություն ունի դրա համար: Ինչպես երևում է ծածկագրից, մեր վերնագիրն ու ստորոտը զանգվածում չորս տեղ են զբաղեցնում, քանի որ դրանք ամբողջ լայնությամբ են: Կողային տողերը յուրաքանչյուրը զբաղեցնում են մեկ բնիկ, մինչդեռ բովանդակությունը երկուսում՝ արդյունավետորեն բաժանելով ցանցի միջին շարքը երեք սյունակի:
CSS ցուցադրում՝ inline-grid
Ներքին ցանցի արժեքի օգտագործումը հնարավորություն կտա ձեր ցանցին նստել այլ տարրերի կողքին, ինչպես այս ուղեցույցի մյուս ներկառուցված արժեքները:
Օգտագործելով CSS Display վեբ դիզայնի համար
CSS ցուցադրման հատկությունը առաջարկում է հարմար եղանակ՝ կարգավորելու վեբ կայքի տարրերի կառուցվածքները՝ առանց HTML նշումը փոխելու: Սա իդեալական է նրանց համար, ովքեր օգտագործում են բովանդակության առաքման հարթակներ, ինչպիսիք են Shopify կամ WordPress, բայց այն կարող է նաև հարմար լինել ընդհանուր վեբ ձևավորման համար: