Корак ка савладавању веб дизајна

by
Tweet
Share
Share
Pin

Веб развој се у великој мери ослања на три главна језика, наиме ХТМЛ, ЦСС и Јавасцрипт. ХТМЛ описује структуру веб страница, односно који елементи се налазе на веб страници.

Цасцадинг Стиле Схеетс (ЦСС), с друге стране, описује како су ХТМЛ елементи представљени визуелно, док се Јавасцрипт користи за додавање интерактивности и динамичког понашања веб страницама.

ЦСС је посебно важан када је у питању креирање естетски пријатних корисничких интерфејса са одличним корисничким искуством. ЦСС је одговоран за презентацију и стил веб садржаја, а користи се за контролу изгледа, изгледа и стила веб страница.

На пример, користећи ЦСС, можете променити начин на који се садржај приказује на вашој веб страници и изменити ствари као што су фонтови, боје, ивице, маргине, размаци и позадине, између осталог.

Поред тога, ЦСС је кључан у креирању респонзивних веб локација које се прилагођавају различитим величинама екрана и уређајима. Такође омогућава конзистентне и уједначене стилове на различитим страницама на веб локацији и помаже у томе да веб странице буду доступне корисницима са инвалидитетом.

У случају да желите да ускладите своју веб локацију са својим брендом и добро користите боје бренда на својој веб локацији, ЦСС је оно што ће вам омогућити да то урадите.

Без ЦСС-а, веб локације би вероватно изгледале веома слично, са веома благим дизајном без стилова, боја, ефеката лебдења или позадине. Веб локације такође не би реаговале и имале би врло мало прилагођавања да би се веб локација ускладила са брендом.

Стога је ЦСС веома важан алат за веб програмере. Да бисте користили ЦСС на својој веб локацији, потребно је да га повежете са ХТМЛ-ом странице. Запамтите, ХТМЛ описује елементе и садржај веб локације.

Због тога морате да повежете свој ХТМЛ са ЦСС-ом да бисте користили ЦСС за стилизовање елемената и садржаја ваше веб странице. Овај чланак ће вас научити како то учинити. Међутим, пре него што погледамо како да повежемо ЦСС са ХТМЛ-ом, погледајмо различите начине на које можете написати ЦСС и користити га за стилизовање својих ХТМЛ елемената.

Различити начини укључивања ЦСС-а у ваш ХТМЛ

Постоје три главна начина укључивања ЦСС-а у ваше ХТМЛ датотеке. Ово укључује:

  2 лака начина за ресетовање ПРАМ-а и СМЦ-а на Мац-у

#1. Инлине Стилес

Ово укључује писање ваших ЦСС стилова директно на сваки ХТМЛ елемент, као што је приказано у наставку:

<body style="background-color: yellow;">
  <h1 style="color: orangered; font-size: 40px;">techblog.co.rs</h1>
  <p style="color: blue; font-size: 16px;">techblog.co.rs is an online publication that produces high-quality articles on
    Technology, Business, and Fintech to help
    businesses and people grow.</p>
</body>

Колико год вам овај метод омогућавао да лако додате ЦСС на своје ХТМЛ странице, то није добар начин да додате ЦСС у свој ХТМЛ. То је зато што одузима много времена, отежава читање и одржавање кода, посебно за велике стилове, и може утицати на време учитавања веб страница.

#2. Интерни ЦСС

Ово укључује писање стилова за веб страницу унутар елемента <стиле> који се налази у одељку <хеад> ХТМЛ странице. Пример овога је приказан у наставку:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>techblog.co.rs</title>
  <style>
    body {
      background-color: yellow;
    }

    h1 {
      color: orangered;
      font-size: 40px;
    }

    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<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.</p>
</body>
</html>

Овај метод, иако једноставан за извођење, такође се не препоручује јер отежава дељење стилова између различитих ХТМЛ докумената.

#3. Екстерни ЦСС стилски лист

Ово укључује креирање засебне ЦСС датотеке која ће задржати све ваше стилове за ваше ХТМЛ странице. Ова ЦСС датотека се затим повезује са ХТМЛ документом за стилизовање елемената на веб страници. Пример екстерне ЦСС датотеке је приказан у наставку:

body {
  background-color: yellow;
}

h1 {
  color: orangered;
  font-size: 40px;
}

p {
  color: blue;
  font-size: 16px;
}

Ово је препоручени приступ додавања ЦСС-а вашим ХТМЛ документима за стилизовање ваших веб страница. Не само да олакшава дељење стилова између различитих датотека, већ и одваја ваш ХТМЛ од вашег ЦСС-а, чинећи ваш код модуларним, лаким за читање и одржавање.

Да бисте научили како да повежете ЦСС са ХТМЛ-ом, направите фасциклу и унутар ње направите ХТМЛ датотеку која се зове индек.хтмл и ЦСС датотеку под називом стиле.цсс. Можете користити било које име за две датотеке, али екстензије треба да буду .хтмл и .цсс.

  10 најбољих бесплатних скенера и дама за портове

Отворите две датотеке у уређивачу кода. У ХТМЛ датотеку налепите следећи код:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>techblog.co.rs</title>
</head>

<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.</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>
</html>

Ову ХТМЛ датотеку можете да отворите у прегледачу тако што ћете отворити претраживач и отићи до фасцикле у којој се налази ХТМЛ датотека, а затим је превући у прегледач.

Алтернативно, можете да кликнете десним тастером миша на ХТМЛ датотеку и изаберете било који претраживач са падајуће листе. Двоструки клик на датотеку такође је отвара са подразумеваним претраживачем на вашем рачунару.

Тренутно је наша веб страница као што је приказано у наставку:

Да бисмо описали како ће се елементи у горњој ХТМЛ датотеци приказати, потребна нам је ЦСС датотека са свим стиловима за елементе. У ЦСС датотеку коју сте креирали, налепите следећи код:

body {
  background: rgb(245,235,224);
  background: linear-gradient(90deg, rgba(245,235,224,1) 0%, rgba(227,213,202,1) 35%, rgba(212,163,115,1) 100%);
}

h1 {
  color: #fb5607;
  font-size: 40px;
}

p {
  color: #0f4c5c;
  font-size: 16px;
  font-weight: 700;
}

li {
  color: #00b4d8;
  font-weight: 400;
}

Пошто је наша ЦСС датотека спремна, следећи корак је повезивање са нашим ХТМЛ-ом. Да бисте повезали индек.хтмл датотеку са стиле.цсс датотеком, додајте следећи ред у одељак заглавља ХТМЛ датотеке:

<link rel="stylesheet" href="https://wilku.top/a-step-towards-mastering-web-design/style.css">

У реду изнад:

  • <линк>: је ХТМЛ елемент који се користи за спецификацију односа између тренутног ХТМЛ документа и спољног ресурса, у нашем случају ЦСС датотеке. Ово је елемент који користимо за повезивање ЦСС датотека са ХТМЛ датотекама.
  • рел=”стилесхеет” – рел означава однос. Ово је атрибут који се додаје елементу везе да би се одредио однос између ХТМЛ документа и ставке која се повезује са ХТМЛ-ом. У овом случају, постављено је на „стилесхеет“ да би се назначило да је повезана датотека ЦСС датотека.
  • хреф=”стиле.цсс”: користи се за одређивање путање до ЦСС датотеке коју желимо до наше ХТМЛ датотеке. Путања се прослеђује у хреф као стринг. Пошто се наша ЦСС датотека налази у истој фасцикли као и наша ХТМЛ датотека, путања је једноставно име ЦСС датотеке коју желимо да повежемо са нашим ХТМЛ-ом.

Цео ХТМЛ је приказан испод:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>techblog.co.rs</title>
  <link rel="stylesheet" href="https://wilku.top/a-step-towards-mastering-web-design/style.css">
</head>

<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.</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>
</html>

Наша ХТМЛ датотека у нашем претраживачу након повезивања са ЦСС датотеком је као што је приказано у наставку:

Најбоље праксе за повезивање ЦСС-а са ХТМЛ-ом

Неке најбоље праксе којих се треба придржавати када повезујете ЦСС са ХТМЛ-ом укључују:

  • Користите спољну листу стилова. Када повезујете ХТМЛ са ЦСС колико год постоји много начина на које то можете да урадите, најбољи и препоручени начин је додавање спољне ЦСС датотеке и повезивање са својим ХТМЛ-ом. На овај начин, ваш код ће бити модуларан, лак за читање, лак за отклањање грешака и лак за одржавање.
  • Поставите елемент <линк> у одељак заглавља ХТМЛ документа. Честа грешка је стављање елемента <линк> у тело ХТМЛ-а. Ово доводи до грешака и ваши стилови се неће приказивати у вашем ХТМЛ документу.
  • Користите релативне путање – Када повезујете ЦСС са ХТМЛ-ом, такође морате да наведете локацију ЦСС датотеке. За ово користите релативне путање уместо апсолутних путања како бисте били сигурни да је ваш пројекат преносив.
  • Комбинујте ЦСС датотеке када се користе на истој страници – да бисте обезбедили брже учитавање и боље перформансе веб локација, комбинујте више ЦСС датотека у једну датотеку, посебно ако садрже стилове за једну страницу.
  • Осигурајте исправан правопис када повезујете ЦСС са ХТМЛ-ом. Уобичајена почетничка грешка при повезивању ЦСС-а са ХТМЛ-ом је погрешно написано рел=”стилесхеет” и коришћење облика за множину “стилесхеетс”. У случају да повежете свој ЦСС са својим ХТМЛ-ом и приметите да се ваши стилови не приказују, проверите и уверите се да је ваш правопис тачан.

Поред исправног повезивања вашег ЦСС-а са ХТМЛ-ом, уверите се да ваше ЦСС датотеке имају описна имена, одличну организацију кода са коментарима и мудро користите имена класа и ИД-ове. Ово ће резултирати угоднијим развојним искуством.

Закључак

ЦСС је кључна алатка у креирању естетских веб локација са којима је радо комуницирати и користити. Као програмер, познавање ЦСС-а ће вам помоћи да креирате боље корисничко сучеље и корисничко искуство за ваше кориснике. Да бисте користили ЦСС у свом ХТМЛ-у, направите спољну ЦСС датотеку и пратите упутства у чланку да бисте исправно повезали две датотеке.

Такође можете истражити како да користите СВГ у ХТМЛ-у за дизајнирање запањујуће графике.