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