Комбиновањем ХТМЛ-а и ЦСС-а можете апсолутно да контролишетесви елементи веб странице. Стилови могу лако променити изглед било ког блока или линије. Често дизајнер распореда треба да изврши тежи задатак - да промени изглед не самог елемента, већ његовог засебног дела или одређеног стања. Овде ЦСС псеудо-класе долазе у помоћ.
Псеудо-часови раде на исти начин као иредовне часове маркирања, али они физички нису присутни на страници. Уз њихову помоћ можете одабрати елементе на основу информација које нису укључене у документ, а које није могуће одабрати редовним бирачем. Ево једноставног примера: имате црвено дугме и желите да оно пређе у плаво када пређете мишем. У теорији се то може учинити у ЈаваСцрипт-у, али зашто такве компликације? Много је погодније за употребу: пређите курсором ЦСС. Уз његову помоћ блоку можете дати било које параметре који ће се активирати само када задржите курсор миша.
Листа псеудо-класа ЦСС се редовно ажурира. Можда ћете се појавити неколико нових док читате овај материјал. Прво, погледајмо оне који су се појавили у спецификацији ЦСС3.
: н-типа
Претпоставимо да имате списак где стежелите да користите наизменичне боје, односно, први ред ће бити, на пример, написан црвеном бојом, а други плавом, трећи поново црвеном, четврти поново плавом бојом. Раније је ово захтевало стварање нових класа. Дизајнери распореда из прошлости додали су класу у сваку ставку листе, а затим су променили изглед у табели стилова. Није било баш згодно и загађивало је распоред.
Сад је све лакше.Користите ЦСС псеудо-класу: нтх-оф-типе. То ће омогућити постизање жељеног визуелног ефекта без промене ичега у маркупу. Принцип је једноставан: ви одредите селектор, а у заграде након његовог имена напишите формулу или кључну реч која ће пронаћи потребне елементе. На пример: нтх-оф-типе (евен) ће пронаћи све парне елементе, а: нтх-оф-типе (одд) наћи ће непарне. Постоји велики број формула које се користе за најтачнију контролу. Можете да наведете број у заградама - у овом случају, стилови ће се применити на елемент чији је индекс једнак овом броју.
: н-то дете
Ова псеудо-класа ЦСС-а је у принципу сличнапретходни, али за разлику од тога ради искључиво са децом изабраног елемента. На пример, ако желите да га користите за прилагођавање изгледа ознака <ли> на листи, морате да користите ул: нтх-цхилд конструкцију, јер је <ул> родитељ <ли>.
Формуле се могу користити за прецизну контролу.Прилично су незгодни за почетнике, али кад мало закопате у синтаксу, ствари постају лакше. Формуле изгледају овако: ан + б, где је а фактор, а б офсет. На пример, ако у заградама наведете н, тада ће псеудо-класа одабрати сву децу (јер нису наведени додатни услови у облику а и б). Ако наведете н + 2, биће изабрани сви осим првог (јер је помак два). Најбоље је проучити овај тренутак у пракси. Експериментишите са подређеним компонентама и различитим формулама.
: последње дете
Овде је све једноставно.Подређене ЦСС псеудо-класе се користе за одабир једног одређеног елемента. Овај бира последње дете родитеља. Користи се прилично често, на пример, за одабир последњег реда табеле или уклањање увлаке из последњег блока како би се избегло његово премотавање у следећи ред.
: н-последње-дете
Принцип деловања је сличан поменутомраније н-дете, али делује у супротном смеру, односно када се користе, елементи ће се понављати одоздо према горе. Ово је корисно ако требате пронаћи неколико последњих ставки.
Могли бисте помислити да ове псеудо-класе иЦСС псеудо-елементи су бескорисни јер се ствари могу обавити и редовним часовима. Ово није истина. : нтх-цхилд ,: нтх-ласт-цхилд и њихови колеге врло су згодни када раде на великим пројектима - на пример, у случајевима када блок има огроман број деце. Ручно постављање часова је дуго и тешко.
Псеудо-класе управљања државама
Шта ако је потребно да промените изглед предмета у одређеном стању? У овом случају постоје ЦСС псеудо-класе за кликање, лебдење и друге акције. Размотримо их детаљније.
: линк
Ово је псеудо-класа ЦСС веза, и то не било која, већ само она која још увек нису посећене. У њему можете да поставите стилове за оне <а> елементе којима се корисник још није кретао.
: посетила
Аналог претходне верзије, која самоуправља већ посећеним везама. Комбиновањем ове две псеудо-класе можете да прилагодите изглед ознака <а> тачно онако како желите. Међутим, имајте на уму да се стања израчунавају за одређене прегледаче и ресетују након брисања историје.
Псеудо-класа: циљани ЦСС
Једна од најзанимљивијих псеудо-класа којакада се правилно користи, донекле замењује ЈаваСцрипт. Омогућава управљање елементом чији је идентификатор наведен у адресној траци странице. Да, први пут је то тешко разумети. Покушајмо то објаснити на примеру.
Рецимо да на страници имамо 3 див-а садефинисани ид: ид1, ид2, ид3. Такође имамо три везе са одговарајућим хреф вредностима: # ид1, # ид2, # ид3. Када кликнете на прву везу у адресној траци странице, након везе до саме странице, појавиће се одговарајући ИД.
Сви див-ови имају својство у ЦСС-удисплаи: ноне, односно нису подразумевано приказани. Користимо таргет: див и на њега постављамо својство дисплаи: блоцк. Сада, када кликнете на везе са одређеним хреф-ом, блоковима са одговарајућим ид-ом биће додељен дисплаи: блоцк, што значи да ће почети да се појављују на страници! Када кликнете на везу са хреф = ”# ид1”, појавит ће се блок са ид1 итд.
Још увек није јасно? Покушајте да експериментишете. Направите страницу са горе наведеним ознакама и стиловима. За пар минута ћете то савршено схватити.
Псеудо-класе које се могу применити на било који елемент
Већина горе описаних псеудо-класа захтевала је везе за рад. Међутим, нису сви потребни елементи <а>. Бројне варијације могу се применити на апсолутно било који део странице.
- : активна је намењена за обликовање елемената на којима је корисник кликнуо левим тастером миша;
- : ховер - ЦСС за елементе на којима корисник лебди;
- : фокус - за оне делове странице који су садасу у фокусу. Ова псеудо-класа се често користи за рад са обрасцима. На пример, ако желите да истакнете ред за унос корисничког имена када посетилац постави курсор у њега и почне да куца.
Запамтите да :активан делује само у тренутку притиска. Чим леви тастер миша престане да ради, с њим постављени стилови ће нестати и елемент ће бити приказан онако како је приказан по подразумеваној вредности. У већини случајева ова псеудо-класа се користи за рад са дугмадима. Можете им дати велики број држава. На пример, дугме ће подразумевано бити плаво, зелено при преласку, црвено при преласку и тако даље.
Наравно, псеудо-класе су у потпуности подржане.само савремени прегледачи. На пример, ИЕ6 и 7 неће успети да користе фокус, док лебдење и активно у ИЕ6 раде само за везе. Надамо се да не морате да радите са таквим прегледачима, али ако и даље требате, користите условне коментаре.
Додатне псеудо-класе
Горе наведене опције нису наведене.ограничен. Захваљујући савременом ЦСС-у, можете да изаберете само омогућене елементе (: омогућено) или само онемогућено (: онемогућено), само означено поље за потврду и радио (: означено). Хајде да укратко опишемо још неколико опција помоћу којих можете пажљивије да контролишете изглед свог садржаја.
- : онли-цхилд - омогућава вам да примените стил на елемент који је једини подређени елемент;
- : ланг - за рад са елементима који имају наведени језик помоћу атрибута ланг;
- : роот - користи се за избор основног елемента. Сходно томе, у ХТМЛ-у је ово ознака <хтмл>;
- : нот је врло моћан алат.Пружа могућност ограничавања примене стилова на одређене бираче. Ево примера: .блуе-цолор: нот (спан). Такав селектор ће применити стилове на све елементе класе плаве боје ако нису <спан> с.
Комплетна листа псеудо-класа се можда неће протезатиједна страна. Већина дизајнера распореда користи само неколико њих у пракси, више воле да управљају стањем помоћу ЈаваСцрипт-а. Да, ово је згодно, али постоји низ тачака у којима се ефикаснији резултати могу лакше постићи употребом одговарајуће псеудо-класе.
