Веб локације би изгледале досадно без ЦСС-а јер је овај стилски језик одговоран за стил текста, величину, боју и позиционирање на веб страници.
Преглед садржаја
Шта је ЦСС?
Цасцадинг Стиле Схеетс, скраћено ЦСС, је језик који описује како ХТМЛ елементи треба да буду приказани на екрану или папиру. ЦСС је креирао Ворлд Виде Веб Цонсортиум (В3Ц) 1996. године.
ХТМЛ елементи нису дизајнирани да имају ознаке које би могле да помогну у форматирању веб странице, а од програмера се тражило само да напишу ознаке за страницу. Увођење ознака као што је <фонт> када је ХТМЛ 3.2 покренут увео је нове проблеме за програмере.
Како веб странице имају обојене позадине, различите фонтове и више стилова, поновно писање кода постало је скупо и болно. В3Ц школе су увеле ЦСС да би решиле ове изазове, и он је наставио да се развија током година.
Зашто ЦСС?
#1. ЦСС је ефикасан
ЦСС нас спашава од муке додавања ознака као што су фонт, поравнања елемената, ивица, боја, стил позадине и величина на свакој веб страници.
#2. Штеде време
Можете лако да промените изглед целог веб сајта изменом спољне ЦСС датотеке.
#3. Компатибилност више уређаја
Савремени корисници веба приступају сајтовима на гаџетима са различитим величинама екрана, као што су рачунари, таблети и паметни телефони. ЦСС олакшава креирање веб страница које одговарају величини екрана.
#4. Лако одржавање апликација
Модерне веб апликације се увек развијају. ЦСС олакшава промену појединачних компоненти или чак целе веб локације без промене кодне базе.
Како се ЦСС користи са ХТМЛ-ом за креирање веб локација?
ХТМЛ је стандардни језик за означавање који се користи за креирање веб страница. С друге стране, ЦСС описује како се веб странице (направљене помоћу ХТМЛ-а) приказују. Веб страница креирана коришћењем ХТМЛ-а и ЦСС-а идеално ће имати ХТМЛ датотеку текста, линкова слика и ХТМЛ ознака.
Ова ХТМЛ датотека може имати или засебну ЦСС датотеку повезана са њом помоћу ознаке везе или користити интерне или уграђене ЦСС стилове. ХТМЛ датотека може имати наслов као што је <х1> и пасус означен са <п>. Можете користити ЦСС да бисте наложили претраживачу да прикаже сав садржај у параграфу подебљаним или чак да садржај заглавља буде 50 пиксела и зелене боје.
У следећем одељку ћемо показати како ХТМЛ и ЦСС функционишу.
Врсте ЦСС-а
#1. Екстерни ЦСС
Да би ЦСС био класификован као екстерни, требало би да постоји ХТМЛ датотека и посебна ЦСС датотека са екстензијом .цсс. На пример, стиле.цсс. ЦСС датотека је повезана са ХТМЛ датотеком/документом помоћу ознаке везе.
Пример спољне ЦСС датотеке:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
ЦСС датотека се може повезати са следећим ХТМЛ документом:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Ознака везе повезује екстерни стилски лист са ХТМЛ документом, док атрибут хреф специфицира локацију екстерног стилског листа.
Коначна веб страница ће се појавити на следећи начин:
Екстерни ЦСС је приступ који се највише препоручује јер олакшава креирање компоненти за вишекратну употребу и универзалне промене у бази кода.
#2. Интерни ЦСС
Интерни ЦСС је идеалан када имате један ХТМЛ документ који желите да јединствено стилизујете. Скуп правила стила је написан на ХТМЛ документу унутар одељка заглавља.
Ово је пример интерног ЦСС-а:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Рендерована веб страница ће се појавити на следећи начин:
Интерни ЦСС није идеалан у већини случајева јер чини код у ХТМЛ документу тако великим, што утиче на брзину учитавања.
#3. Инлине ЦСС
Инлине ЦСС садржи ЦСС стил унутар тела. На пример, можете да стилизујете пасус, наслов или чак див користећи инлине ЦСС.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Рендеровани документ ће се појавити на следећи начин:
Инлине ЦСС није идеалан ако желите да скалирате своју веб апликацију, јер је за додавање ЦСС својства свакој ХТМЛ ознаци потребно време.
Истражите неке од најбољих онлајн курсева и књига за савладавање ЦСС-а.
Направите респонзивне веб странице помоћу ХТМЛ-а и ЦСС-а
Овај курс за прављење респонзивних веб локација у стварном свету учи како да направите респонзивне веб локације користећи ХТМЛ5 и ЦСС3. Није вам потребно никакво предзнање у веб развоју да бисте научили овај курс који истражује концепте као што су модел кутије, решавање сукоба селектора, шеме позиционирања и наслеђивање.
То је такође идеалан курс ако желите да научите како да размишљате, планирате, скицирате, кодирате, тестирате и оптимизујете професионалну веб локацију.
Напредни ЦСС и Сасс
Напредни курс за ЦСС и Сасс вас упознаје са начином на који ЦСС функционише иза кулиса истражујући теме као што су каскада, специфичност и наслеђе.
Курс садржи многе модерне ЦСС технике за креирање моћних веб страница које реагују. Курс представља Саас и како га користити у пројектима док се пројектује ЦСС, глобалне варијабле и управљају медијским упитима.
Такође је идеалан курс ако желите да научите ЦСС анимацију, јер се дотиче @кеифрамес, анимације и прелаза.
Научите ЦСС
Леарн ЦСС би Цодецадеми учи како да користите ЦСС да бисте визуелно трансформисали ХТМЛ у привлачне веб странице. Курс је подељен на 8 лекција и има 6 пројеката за тестирање вашег разумевања.
Главне ствари које ћете научити из овог курса су како да додате стил ХТМЛ елементима, повежете ХТМЛ и ЦСС датотеке и креирате јединствене изгледе за веб странице.
Направите своју прву веб страницу помоћу ХТМЛ-а и ЦСС-а
Курс за прављење прве веб странице учи како да користите ХТМЛ5 и ЦСС3 за креирање веб локација које одговарају. Овај бесплатни курс је представљен у 4 модула и захтева око 10 сати да се заврши. Није вам потребно никакво претходно знање о програмирању да бисте научили овај курс.
Основе ЦСС-а
Основе ЦСС-а креирао је В3Цк. Неке од ствари које ћете научити на овом курсу су; најбоље праксе у веб дизајну, основне ЦСС селекторе и како да изаберете ЦСС својства. Курс је подељен у 5 модула; потребно вам је око 5 недеља да га завршите када учите 5-7 сати недељно.
Увод у ЦСС3
Овај курс о ЦСС3 представља каскадне стилове. Курс припрема Универзитет у Мичигену и подучава како се пише ЦСС правила, успостављају добре програмске навике и тестира код. Потребно вам је око 12 сати да завршите овај курс који долази са дељивим сертификатом о завршетку.
Увод у ХТМЛ и ЦСС
Овај уводни курс о ХТМЛ-у и ЦСС-у учи како да креирате стилизоване и добро структуриране веб странице користећи ХТМЛ и ЦСС. Курс учи полазнике како да креирају веб странице користећи структуру налик стаблу, а затим да их стилизују користећи ЦСС.
Овај бесплатни курс је погодан за почетнике и користи модел учења самосталног темпа. Потребно вам је око 3 недеље да завршите овај курс који предају стручњаци из индустрије.
ЦСС Туториал
ЦСС Туториал је бесплатан курс на В3сцхоолс. Курс је подељен на поглавља ради лакшег разумевања. Свако поглавље даје примере и вежбе. Платформа има онлајн где можете да експериментишете са различитим концептима преко дугмета „Пробајте сами“.
ЦСС: Дефинитивни водич
Књига ЦСС: Дефинитивни водич је од помоћи ако желите да научите основе ЦСС-а, од селектора и специфичности, до каскаде. Књига такође детаљно описује флексбокс, позиционирање и флоат трикове.
То је такође књига коју можете наручити ако желите да научите како да користите ЦСС за производњу 2Д и 3Д трансформација, прелаза и анимација. Дефинитивни водич је доступан у верзији Киндле и меком повезу.
Прилагодљив веб дизајн са ХТМЛ5 и ЦСС
Ова књига о респонзивном веб дизајну са ХТМЛ5 и ЦСС подучава како да креирате прилагодљиве веб локације које су отпорне на будућност користећи ХТМЛ5 и ЦСС.
Након што научите трикове из ове књиге, веб локације које направите ће радити беспрекорно на стоним рачунарима, таблетима и мобилним телефонима. Књига је написана у формату који је једноставан за праћење и доступна је у меком повезу и формату Киндле.
ХТМЛ и ЦСС: Дизајнирајте и правите веб странице
Ова књига о ХТМЛ-у и ЦСС-у идеална је за све, било да сте хобиста, студент или професионалац.
Писац доноси садржај ове књиге кроз информативну графику и животну фотографију како би олакшао разумевање различитих концепата. Ресурс је представљен у јединственој структури, што олакшава прегледавање свих поглавља.
Модерн ЦСС
Ова књига о модерном ЦСС-у: Савладајте кључне концепте ЦСС-а за савремени веб развој поучава ЦСС кроз примере кода, дијаграме и снимке екрана.
Књига у својим првим поглављима уводи боје, бираче, моделе кутија, комбинаторе и специфичности. Књига затим представља стилизовани текст, позиционирање, градијенте, ивице, З-индекс и контексте слагања. Такође научите напредне теме као што су прелази, анимације, трансформације, флекбок и ЦСС мреже.
Завршне речи
Улога ЦСС-а у савременим веб локацијама не може се довољно нагласити. Поред тога што веб странице чини визуелно привлачним, ЦСС олакшава навигацију кроз различите веб странице.
Учење ЦСС-а може бити лако ако користите горе наведене ресурсе. Неки од ових курсева су бесплатни, док се други плаћају.
Затим, можете погледати ЦСС варалице за програмере и дизајнере.