Каскадни табеле стилова дефинишите изглед елемента веб странице повезивањем атрибута које примените на тај елемент. Ови атрибути могу бити ИД или класа и, као и сви атрибути, додају корисне информације елементима за које су повезани.
У зависности од тога који атрибут додате елементу, можете да напишете ЦСС селектор да примените неопходни визуелни стилови који су потребни за постизање изгледа и осећаја тог елемента и веб странице у целини.
Иако било ИД или часови раде у сврху њиховог повезивања са ЦСС правилима, савремени веб дизајн методе фаворизују класе у односу на ИД, делимично јер су мање специфичне и са њима је лакше радити у целини.
Један или више предавања у ЦСС-у?
У већини случајева елементу доделите један атрибут класе, али заправо нисте ограничени само на једну класу каква јесте са ИД-овима. Док је елемент може имати само један ИД атрибут, можете дати елементу неколико класа и, у неким случајевима, то ће учинити вашу страницу лакшом за обликовање и још много тога флексибилан.
Ако елементу требате доделити неколико класа, додајте додатне класе и једноставно их одвојите размаком у свом атрибуту.
На пример, овај одломак има три класе:
Ово би био текст пасуса
Ово поставља следеће три класе на ознаку пасуса:
- Пуллкуоте
- Изабран
- Лево
Обратите пажњу на размаке између сваке од ових вредности класе. Ти простори су оно што их поставља као различите, појединачне разреде. То је такође разлог зашто имена класа не могу имати размаке у себи јер би их то поставило као засебне класе.
Једном када унесете вредности класе у ХТМЛ, можете их затим доделити као часове у вашем ЦСС-у и применити стилове које желите да додате. На пример.
.пуллкуоте {... }
.Изабран {... }
п.лефт {... }
У овим примерима, ЦСС декларације и парови вредности појављују се у витичастим заградама, тако да би се ти стилови применили на одговарајући селектор.
ако ти поставити класу на одређени елемент (на пример, стр.лево), и даље га можете користити као део списка класа; међутим, имајте на уму да ће то утицати само на оне елементе који су наведени у ЦСС-у. Другим речима, стр.лево стил примењиваће се само на пасусе са овом класом, јер ваш селектор заправо каже да се примењују на „пасусе са вредношћу класе од лево, „Насупрот томе, друга два селектора у примеру не наводе одређени елемент, па би се примењивали на било који елемент који користи те вредности класе.
Више класа, семантика и ЈаваСцрипт
Још једна предност коришћења неколико класа је што повећава могућности интерактивности.
Примените нове класе на постојеће елементе помоћу ЈаваСцрипт-а без уклањања било које од почетних класа. Класе такође можете користити за дефинисање семантика елемента - додајте додатне класе да бисте дефинисали шта тај елемент семантички значи. Овај приступ је како Микроформати Извођење радова.
Предности више класа
Слојевито постављање неколико класа може олакшати додавање посебних ефеката елементима без потребе за стварањем потпуно новог стила за тај елемент.
На пример, да бисте плутали елементе лево или десно, можете написати две класе:
лево.
и.
јел тако.
са само.
лебди: лево;
и.
лебди: десно;
у њима. Тада, кад год вам је елемент требао лебдети, једноставно бисте класу додали „лево“ на његову листу класа.
Међутим, овде постоји танка линија за шетњу. Запамтите да веб стандарди налажу раздвајање стила и структуре. Структуром се рукује помоћу ХТМЛ-а док је стил у ЦСС-у. Ако је ваш ХТМЛ документ испуњен елементима који сви имају називе класа попут „црвена“ или „лева“, то су имена која диктирајте како елементи треба да изгледају уместо онога што јесу, прелазите ту границу између структуре и стила.
Мане вишеструких часова
Највећи недостатак употребе неколико истовремених предавања на вашим елементима је тај што их временом може учинити помало незграпним за гледање и управљање. Може бити тешко одредити који стилови утичу на елемент и да ли неке скрипте утичу на њега. Многи данас доступни оквири, попут Боотстрапа, интензивно користе елементе са више класа. Тај код може врло брзо измаћи контроли и тешко га је радити ако нисте пажљиви.
Када користите неколико класа, такође ризикујете да стил једне класе надјача стил друге. Овај судар тада може отежати докучивање зашто се ваши стилови не примењују чак и када се чини да би требало. Будите свесни специфичности, чак и са атрибутима примењеним на тај један елемент.
Коришћењем алата попут алата за вебмастере у Гоогле Цхроме-у можете лакше да видите како ваши часови утичу на ваше стилове и избегнете овај проблем сукобљених стилова и атрибута.