Изградња веб страница на данашњем Вебу захтева дубоко разумевање ЦСС-а (Цасцадинг Стиле Схеетс). Ово су упутства да дате веб локацију како бисте утврдили како ће изгледати у прозору прегледача. Примењујете низ "стилова" у свој ХТМЛ документ који ће створити изглед и осећај ваше веб странице.
Постоји много начина за примјену горе поменутих стилова кроз документ, али често желите да користите стил само неки елемената у документу, али не и свих инстанци тог елемента. Такође можете желети креирати стил који можете примијенити на неколико елемената у документу, без понављања правила стила за сваку појединачну инстанцу. Да бисте постигли ове жељене стилове, користићете атрибуте ХТМЛ и ИД класе. Ови атрибути су глобални атрибути који се могу применити на скоро сваку ХТМЛ ознаку. То значи да без обзира да ли сте стајалишта подела, параграфа, линкова, листа или било којег другог комада ХТМЛ-а у вашем документу, можете се обратити класама и атрибутима ИД-а како бисте им помогли у остваривању овог задатка!
Селектори класе
Селектор класа вам омогућава да подесите више стилова истом елементу или ознаку у документу. На пример, можда бисте желели да се одређени делови текста позивају у другој боји од остатка текста у документу. Ове означене секције могу бити "упозорења" које постављате на страници. Можете додијелити своје параграфе оваквим часовима:
п {боја: # 0000фф; } п.алерт {цолор: # фф0000; } Ови стилови би поставили боју све параграфи до плавих (# 0000фф), али било који одељак са атрибутом класе "упозорења" би уместо стилу био црвен (# фф0000). То је зато што атрибут класа има већу специфичност од првог ЦСС правила, који користи само селектор тагова. Када радите са ЦСС-ом, специфичније правило ће превазићи мање специфичну. Дакле, у овом примеру, општије правило поставља боју свих параграфа, али друго, специфичније правило од оног који преклапа то подешавање само у неким параграфима. Ево како се ово може користити у неком ХТМЛ ознаку: Овај став би био приказан плаво, што је подразумевано за страницу.
Овај став би такође био у плавој боји.
И овај параграф би био приказан црвеном јер атрибут класе би преписао стандардну плаву боју из стилинг селектора.
У том примеру, стил "п.алерт" би се примењивао само на елементе параграфа који користе ту "класу упозорења". Ако сте желели да користите ту класу у више ХТМЛ елемента, једноставно бисте уклонили ХТМЛ елемент од почетка позива типа (само обавезно напустите период ( .) на месту), овако: .алерт {бацкгроунд-цолор: # фф0000;} Ова класа је сада доступна сваком елементу који му је потребан. Сваки комад вашег ХТМЛ-а који има вредност атрибута класа "упозорења" сада ће добити овај стил. У ХТМЛ-у испод, имамо и параграф и ниво нивоа 2 који користе класу "упозорења". Оба би имала боју позадине црвене боје на основу ЦСС-а које смо управо показали.
Овај пасус би био написан црвеном бојом.
На веб страницама данас, атрибути класа се често користе на већини елемената, јер су лакше радити с перспективе специфичности да су ИД-ови. Најновије ХТМЛ странице ће се попунити атрибутима класа, од којих се неке више пута понављају у документу, а други који се могу појавити само једном. ИД селектор вам омогућава да наведете име одређеном стилу без асоцијације са ознаком или другим ХТМЛ елементом. Реците да имате поделу у ХТМЛ ознакама које садрже информације о догађају. Овом подјелу можете дати атрибут ИД-а за "догађај", а затим, ако желите да објасните тај одјељак с широком црном граничном линијом од 1 пиксла, напишите ИД-код овако: #евент {бордер: 1пк солид # 000; } Изазов с ИД селектора је да се они не могу поновити у ХТМЛ документу. Оне морају бити јединствене (можете користити исти ИД на више страница вашег сајта, али само једном у сваком појединачном ХТМЛ документу). Дакле, ако сте имали 3 догађаје који су потребни за ову границу, морали бисте им дати ИД атрибуте "догађаја1", "догађаја2" и "догађаја3" и стила сваког од њих. Због тога би било много лакше користити претходни атрибут класе "догађаја" и стајали их сви одједном. Још један изазов са атрибутима ИД-а јесте то што имају већу специфичност од атрибута класа. То значи да ако вам је потребан ЦСС који преклиње претходно успостављен стил, то може бити тешко ако се превише ослоните на ИД-је. Из тог разлога многи веб програмери су се одвојили од коришћења ИД-ова у њиховој ознаци, чак и ако намеравају само једном користити ту вриједност и умјесто тога претворили се у мање специфичне атрибуте класа за готово све стилове. Једна област у којој атрибути ИД-а долазе у игру је када желите да креирате страницу која има ин-линк сидро везе. На пример, ако имате веб сајт паралаксног стила који садржи сав садржај на једној страници са везама које "скокирају" на различите делове те странице. Ово се ради помоћу атрибута ИД-а и текстуалних веза које користе ове сидрење везе. Једноставно ћете додати вриједност тог атрибута, којој претходи знак "#", на атрибут "хреф" везе, овако: Ово је веза Када кликнете или додирнете, ова веза ће прећи на део странице са атрибутом овог ИД-а.Ако ниједан елемент на страници не користи ту ИД вредност, веза не би ништа учинила. Запамтите, ако желите да креирате повезивање на страници на сајту, биће потребно користити атрибуте ИД-а, али и даље можете да се окренете на класе за опште ЦСС стилове. Овако обележавамо странице данас - ми користимо класе селектора што је више могуће и само се окрећемо ИД-има када нам је потребан атрибут да дјелујете не само као кукавица за ЦСС, већ и као везу унутар странице.И овај х2 би такође био црвен.
ИД селектора
Компликације ИД атрибута
