Цасцадинг Стиле Схеетс (ЦСС) је језик стилских листова који се користи да опише како су ХТМЛ и КСМЛ документи представљени визуелно. Користећи ЦСС, програмери могу да контролишу и мењају стил, изглед и распоред елемената на веб страницама.
На пример, програмери могу да промене фонтове, боје, позадину, ефекте лебдења, па чак и да своје веб странице могу да реагују тако да се прилагоде различитим величинама екрана и уређајима. Поред тога, ЦСС омогућава брендовима и програмерима да лако креирају веб странице које имају доследне стилове који су усклађени са бојама бренда.
Када подразумевано креирате ХТМЛ документ, ХТМЛ елементи ће бити приказани у тачном редоследу у ком се појављују у изворном коду. Ово се назива нормалним протоком.
У нормалном току, где изглед ХТМЛ елемената није измењен, можемо груписати ХТМЛ елементе у две групе на основу начина на који се елементи приказују на страници.
Ове групе су инлине елементи и блок елементи. Хајде да погледамо ове две групе да бисмо боље разумели како се ХТМЛ елементи приказују.
Да бисте то пратили, направите нову фасциклу и у њој направите индек.хтмл датотеку и апп.цсс датотеку. Датотекама можете дати име по свом избору. Међутим, екстензије су .хтмл и .цсс.
Отворите ХТМЛ датотеку у уређивачу кода и налепите следећи код:
<!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>
Код изнад линкова ствара основни ХТМЛ шаблон или шаблон где можемо да почнемо да креирамо веб странице. Такође повезује индек.хтмл са датотеком апп.цсс тако да можемо да мењамо и контролишемо како се ХТМЛ елементи приказују помоћу ЦСС-а.
Сав ХТМЛ код представљен касније у чланку биће додат унутар ознака <боди>. Наша ЦСС датотека ће бити празна на почетку.
Преглед садржаја
Блоцк Елементс
Блок елементи су елементи који заузимају цео доступни хоризонтални простор где се појављују, стварајући нову линију пре и после елемента. Такође заузима вертикалну висину која је једнака висини свог садржаја, стварајући тако блокове.
Неки примери елемената на нивоу блока укључују дивове <див>, пасусе <п>, неуређене листе <ул>, уређене листе <ол>, ставке листе <ли> и наслове као што су <х1>, <х2>, <х3 >, и тако даље.
Пример овога је приказан у наставку:
<body>
<h1>techblog.co.rs</h1>
<p>techblog.co.rs 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 techblog.co.rs include:</p>
<ul>
<li>Programming</li>
<li>Cyber Security</li>
<li>Digital Forensics</li>
<li>Productivity</li>
<li>Gaming</li>
</ul>
</body>
Када отворите ХТМЛ документ у прегледачу и прегледате страницу, резултат је приказан у наставку:
Приметите да елемент <х1> који садржи наслов вдзвдз заузима цео хоризонтални простор који је доступан, а пасус који долази после њега се гура у следећи ред. Овако се понашају блок елементи.
Инлине Елементс
Инлине елементи су елементи који се уклапају уз друге елементе у истој линији и заузимају само онолико ширине колико је потребно да би били приказани. Инлине елементи не почињу на новој линији, а такође не гурају друге елементе у нову линију.
Инлине елементи не прекидају ток садржаја. Они теку унутар садржаја без стварања посебних блокова. Неки примери инлине елемената укључују распоне <спан>, ознаке сидра <а>, улазе <инпут> и време <време>, између осталог.
Размотрите код у наставку, који модификује наш ранији код тако да укључује уграђене елементе:
<body>
<h1>techblog.co.rs</h1>
<p>techblog.co.rs <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/techblog.co.rs.com">topics</a> covered include:</p>
<p>Some of the topics covered by techblog.co.rs include:</p>
<ul>
<li>Programming</li>
<li>Cyber Security</li>
<li>Digital Forensics</li>
<li>Productivity</li>
<li>Gaming</li>
</ul>
</body>
Резултат провере нове ХТМЛ странице је приказан у наставку:
Обратите пажњу на то како се елемент <спан> уклапа у исти ред са другим садржајем без прекида протока садржаја на страници. Овако се понашају инлине елементи.
Прикажи својство
Као што смо управо видели, ХТМЛ елементи су, подразумевано, или блок елементи или уметнути елементи, што одређује како се приказују и утицај који имају на нормалан ток садржаја у ХТМЛ документу.
Као веб програмер, можда бисте желели да промените ово подразумевано понашање у ХТМЛ елементима. То јест, нека елемент који је подразумевано блок елемент буде третиран као инлине елемент или обрнуто. На пример, можда желите да х1, који је подразумевано блок елемент, буде уметнути елемент, или <спан>, који је подразумевано инлине, да буде блок елемент.
Да бисмо променили подразумевано понашање блокова и инлине елемената, користимо својство дисплаи. Својство приказа је ЦСС својство које вам омогућава да промените или подесите да ли ће се елемент третирати као инлине елемент или блок елемент.
Користећи својство дисплаи, можете променити елемент који је подразумевано блок елемент у инлине елемент и обрнуто.
Да бисте видели ово на делу, додајте следећи код у ЦСС датотеку коју сте креирали и освежите ХТМЛ страницу у прегледачу.
h1 {
display: inline;
background-color: paleturquoise;
}
p {
display: inline;
background-color: palevioletred;
}
span {
display: block;
background-color: darkolivegreen;
}
ul {
background-color: yellow;
}
Горњи код користи својство приказа да промени елементе <х1> и <п>, који су подразумевано блок елементи, у инлине. Такође мења елемент <спан>, који је подразумевано уграђен у блок, и додаје различите боје позадине елементима ради лакшег разликовања. Коначни ХТМЛ документ, након уношења измена у нашу ЦСС датотеку, приказан је у наставку:
Приметите да елемент <х1>, који је раније заузимао цео блок, сада дели исту линију са елементом <п>, који је такође заузимао цео блок. Елемент спан са бојом позадине маслинасто зелене сада заузима цео блок иако је његово подразумевано понашање да се уклапа у исту линију са другим елементима.
Важна разлика између инлине и блок елемената
Осим њиховог утицаја на нормалан ток садржаја на страници. Постоји још једна важна разлика између инлине и блок елемената.
Код Инлине елемената, ако елемент има својство ширине и/или висине, својства ће бити занемарена. Због тога не можете да промените ширину или висину инлине елемента.
Поред тога, ако додате маргину инлине елементу, маргина ће се поштовати само хоризонтално. Вертикална маргина на инлине елементу се занемарује.
Ако додате паддинг инлине елементу, он се поштује само хоризонтално. Колико год се паддинг појавио и вертикално, остали елементи га неће поштовати. Стога, паддинг неће пореметити остатак садржаја изнад или испод инлине елемента.
Да бисте видели ово у акцији, избришите или коментаришите сав код у ЦСС датотеци и додајте следећи код:
span {
height: 500px;
width: 400px;
margin: 20px;
background-color: darkolivegreen;
}
a {
padding: 20px;
border: 1px solid black;
}
Добијена ХТМЛ страница је приказана у наставку:
Приметите да колико год елемент <спан> имао својство висине и ширине, његова висина и ширина се нису промениле. Поред тога, маргина додата на све стране у елементу <спан> примењује се само хоризонтално.
Са елементом <а>, колико год се паддинг примењује око њега, он утиче само на садржај у истој линији са елементом. Приметите да елементи на линији изнад ње нису ни на који начин погођени.
Код блок елемената се поштују својства ширине и висине. Маргина и паддинг примењени на блок елементе се такође поштују и ступају на снагу у свим правцима.
Да бисте видели ово у акцији, додајте следећи код у постојећу ЦСС датотеку:
h1 {
height: 50px;
width: 200px;
border: 1px solid black;
padding: 50px;
margin: 35px;
background-color: aquamarine;
}
Добијени ХТМЛ је приказан испод:
Приметите да су ширина, висина, маргина и допуна додати х1, блок елементу, поштовани у свим правцима.
Из разлике у начину на који се ширина, висина, маргина и паддинг примењују на уметнуте и блок елементе, добијамо трећу вредност приказа која се може користити са својством приказа да би се променио начин на који се елементи приказују. Ово је инлине-блок.
Инлине-Блоцк елементи
Инлине-блок елемент се понаша као инлине елемент; односно уклапа се уз друге елементе у истој линији без гурања елемената у другу линију. Међутим, за разлику од инлине елемената, ширина, висина, маргина и паддинг елемената инлине-блока се поштују.
Стога бисте користили опцију приказа инлине-блоцк када желите да се елемент понаша као уметнути елемент, али вам и даље омогућава да додате ширину, висину, маргину и паддинг који ће бити примењен на елемент као да је блок елемент. Односно, својства ће се примењивати и поштовати у свим правцима.
Да бисте видели ово у акцији, избришите или коментаришите сав код у ЦСС датотеци и додајте следећи код:
span {
display: inline-block;
background-color: darkolivegreen;
height: 50px;
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
ЦСС код изнад поставља својство приказа <спан> на инлине-блоцк. <спан> је подразумевано уграђени елемент. Код затим додаје ширину, висину, маргину и допуну елементу <спан>. Резултат је приказан у наставку:
Имајте на уму да су ширина, висина, маргина и паддинг који су додати елементу <спан> испоштовани, а елемент спан је и даље приказан као уметнути елемент.
Овако се понашају елементи инлине-блока. Раније смо покушали да додамо иста својства елементу <спан>, али она нису поштована јер је <спан> у то време био уграђени елемент.
Инлине вс. Инлине-Блоцк
Разлике између инлине и инлине-блока су приказане у наставку:
Карактеристика ИнлинеИнлине-БлоцкДисплаи понашање На њега утиче својство висине линије. Поштујте хоризонталне маргине и паддинг. Ширина и висина Игнорише својства ширине и висине. Поштује својства ширине и висине. Маргине и паддинг Игнорише хоризонталне маргине и паддинг. Токови унутар садржаја не почињу на новом линија. На висину линије утиче својство висина линије. На њу утиче својство висина линије. Хоризонтални распоред Игнорише својства поравнања текста и прављења текста. Одговара на својства поравнања текста и прављења текста.
Као што видите, инлине и инлине-блоцк елементи се разликују по томе како се понашају одређена ЦСС својства када се примењују на њих.
Када користити Инлине и Инлине-Блоцк
Као програмер, користите инлине опцију када желите да ваш ХТМЛ садржај тече унутар исте линије без изазивања прелома редова. На пример, када радите са елементима на нивоу текста као што су <а>, <стронг> и <спан>, има смисла користити инлине опцију, што је њихово подразумевано понашање.
С друге стране, користите инлине-блоцк када желите да се елемент понаша као блок елемент, али и даље тече унутар садржаја без изазивања прелома редова и гурања остатка садржаја у нове редове. То јест, користите инлине-блоцк ако желите контролу над ширином, висином, маргином и својствима допуна елемента, али и даље имате елемент да буде део инлине тока.
Закључак
ЦСС има инлине, блок и инлине опције приказа, које се могу користити за промену или контролу начина на који се елементи приказују на веб страници. Користимо својство дисплаи да бисмо поставили елемент да буде инлине, блоцк или инлине-блоцк.
Као веб програмер, важно је разумети разлику између инлине, блок и инлине-блоцк елемената. Користите чланак да бисте се упознали са њима и почните да користите својство приказа у својим пројектима да бисте добили више праксе.
Затим можете такође истражити неке ЦСС Грид Генераторе да бисте визуелно направили сложене распореде.