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

ЦСС се може имплементирати на један од три начина - инлине, интерно или екстерно. Иако је спољни ЦСС препоручени приступ, постоје случајеви када би два преостала метода имплементације могла бити практичнија.

У овом водичу ћете научити све основе ЦСС -а да бисте данас почели да правите апликације.

Када користити различите методе имплементације ЦСС -а

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

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

Користећи Инлине ЦСС Пример

Главни наслов

Горњи ред кода приказује текст „Главни наслов“ премазан црвеном бојом. Ово је вероватно један од јединих практичних разлога за коришћење уграђеног ЦСС -а јер обично постоји само један х1 елемент на датој веб страници.

Ако намеравате све премазати х2 елементи на веб страници са жутом бојом. Мораћете да користите ЦСС стил кључна реч, заједно са боја својство и његова вредност (жуто) на сваком елементу. Међутим, ефикаснији начин извршавања овог задатка је коришћење интерног ЦСС -а.

Коришћење примера интерног ЦСС -а

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

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

Коришћење примера спољног ЦСС -а

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

Повезан: Шта су каскадни стилски листови и за шта се користи ЦСС? Пошто је ваша ЦСС датотека повезана са вашим ХТМЛ документом, сада можете почети са писањем ЦСС кода у своју ЦСС датотеку. У овом тренутку, једина разлика између горњег унутрашњег ЦСС примера и спољног ЦСС је стил таг. Стога ће уметање следећег кода у ЦСС датотеку произвести исти резултат као и горњи пример интерног ЦСС -а.

х2 {
боја: жута;
}

Истражујући основну структуру ЦСС -а

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

Селектор

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

Почетак и крај декларације

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

Имовина

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

Раздвојник својства/вредности

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

Вредност

Вредност ЦСС својства представља тачан стил који желите да примените на дато својство. Вредности које су доступне за употребу зависе од типа својства. На пример, својство које се користи у горњој структури је боја, што значи да постоји само једна врста вредности која се може применити на ово својство, назив боје. А. боја вредност се може представити у једном од четири облика: вредност речи (као у горњем примеру), хексадецимална вредност, вредност ХСЛ (нијанса, засићење, светлост) или вредност РГБ (црвена, зелена, плава).

Одвајач декларације

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

Шта су ИД -ови и класе?

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

Опште правило у ЦСС -у је да ће последња декларација стила коју додате датотеци заменити оне које су биле раније. Стога, ако постоје две декларације са х2 селектор у ЦСС датотеци, последња додата декларација замењује оне које су раније постојале.

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

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

Истражујући различите врсте селектора

Постоје три основне врсте селектора - појединачни, вишеструки и угнежђени. До сада је овај чланак опсежно покривао појединачне селекторе.

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

Пример основног ХТМЛ предлошка

Добродошли

Лорем ипсум долор сит амет цонсецтетур, адиписицинг елит. Импедит одит волуптатес
дигниссимос волуптатибус тенетур.  Репудиандае, аними цорпорис!  Арцхитецто
темпора волуптатес нулла оффициа плацеат куискуам фацере ат! Куод долоре долорибус еос!







О томе

Лорем ипсум долор сит амет цонсецтетур, адиписицинг елит. Импедит одит волуптатес
дигниссимос волуптатибус тенетур.  Репудиандае, аними цорпорис!  Арцхитецто
темпора волуптатес нулла оффициа плацеат куискуам фацере ат! Куод долоре долорибус еос!







Титле

Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Лаборе аспернатур вел диц куод куибусдам!
Еа делецтус сит, Лабориосам еос апериам аспериорес? Ат ад Лаборум илло инвенторе куос ест долорес
импедит фугит аспериорес репеллендус харум макиме волуптате сит нулла еакуе оффициис фуга аними,
перферендис ин еарум иуре долорум Лабориосам еним реициендис! Еум цум делецтус ест тенетур цоррупти
моллитиа, минима, магни ат иусто ид неопходитатибус харум ратионе, ипсум долоремкуе деленити ек елигенди
ометати максимум? Да ли сте променили опционо оглас, нисте ли темпора сапиенте?







Титле

Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Лаборе аспернатур вел диц куод куибусдам!
Еа делецтус сит, Лабориосам еос апериам аспериорес? Ат ад Лаборум илло инвенторе куос ест долорес
импедит фугит аспериорес репеллендус харум макиме волуптате сит нулла еакуе оффициис фуга аними,
перферендис ин еарум иуре долорум Лабориосам еним реициендис! Еум цум делецтус ест тенетур цоррупти
моллитиа, минима, магни ат иусто ид неопходитатибус харум ратионе, ипсум долоремкуе деленити ек елигенди
ометати максимум? Да ли сте променили опционо оглас, нисте ли темпора сапиенте?

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

Пример коришћења више селектора

#О, .цонтент {
бела боја;
боја позадине: даркциан;
}

Када користите више селектора, сваки селектор увек треба да одвојите зарезом. Горњи пример има два селектора, ан ид и а класа. Ако зарез који следи иза О томеид недостаје, ЦСС декларација се неће извршити.

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

Примери угнежђених селектора

#Велцоме п спан {
боја црвена;
}

Горњи угњежђени селектор садржи ид и два ХТМЛ елемента. Као што можете видети из горњег примера, угњежђени селектор вам пружа могућност циљања одређеног елемента унутар групе.

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

Без обзира да ли користите језик за обликовање попут ЦСС -а или језик за програмирање, апсолутно бисте требали знати како написати коментар. Коментари су кључни у пројектима на нивоу предузећа у којима више програмера ради заједно, а такође су корисни при развоју малих размера.

ЦСС коментар садржи две косе црте, две звездице и део коментара.

/ * Овако пишете коментар у једном реду у ЦСС */

/*
Овако пишете
коментар у више редова
у ЦСС -у
*/

Шта је следеће?

Овај чланак вам пружа основне компоненте ЦСС -а. Сада можете користити идентификатор:

• Било који од три метода имплементације ЦСС -а
• Сви елементи у ЦСС декларацији
• Три основне врсте селектора
• ЦСС коментар

Ипак, ово је само почетак. ЦСС има неколико оквира који ће вам помоћи да развијете боље разумевање језика. Једини изазов је одлучити који је најбољи за вас.

Таилвинд ЦСС вс. Боотстрап: Који је бољи оквир?

Приликом одабира ЦСС оквира важно је пронаћи онај који испуњава ваше захтеве.

Прочитајте следеће

О аутору