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