Користење на класи на стилови и лични карти

Класи и ИД помогне да се прошири вашиот CSS

Градење на веб-страници на веб-сајтот денес бара длабоко разбирање на CSS (Cascading Style Sheets). Ова се упатствата што ќе ги дадете на веб-страница за да одредите како ќе биде изгледот во прозорецот на прелистувачот. Применувате серија "стилови" на вашиот HTML документ, кој ќе создаде изглед и чувство на вашата веб страница.

Постојат многу начини да ги примените овие споменати стилови низ еден документ, но честопати сакате да користите стил само на некои од елементите во документот, но не и сите примери на тој елемент.

Можеби исто така сакате да создадете стил кој може да се примени на неколку елементи во документот, без да мора да го повторите правилото за стил за секоја поединечна инстанца. За да ги постигнете овие посакувани стилови, ќе ги користите атрибутите на класа и идентификација на HTML. Овие атрибути се глобални атрибути кои можат да се применат на речиси секоја ознака HTML . Тоа значи дека без разлика дали сте стилизирање на поделби, ставови, линкови, листи или други делови од HTML во вашиот документ, можете да се свртите кон класа и идентификација на атрибути да ви помогне да ја остварите оваа задача!

Класа селектори

Селекторот на класа ви овозможува да поставите повеќе стилови на истиот елемент или ознака во некој документ. На пример, може да сакате да имате извесни делови од вашиот текст да бидат повикани во различна боја од остатокот од текстот во документот. Овие обележани делови може да бидат "предупредување" што го поставувате на страницата. Можете да ги доделите вашите ставки со вакви часови:

p (боја: # 0000ff; }
p.alert {боја: # ff0000; }

Овие стилови би ја поставиле бојата на сите параграфи во сино (# 0000ff), но секој параграф со атрибут на алармот на "алармирање" би наместо со стил со црвено (# ff0000). Ова е затоа што класниот атрибут има повисока специфичност од првото правило за CSS, кое користи само селектор на ознаки.

Кога работи со CSS, поконкретно правило ќе замени помалку специфичен. Така, во овој пример, поопшто правило ја поставува бојата на сите ставови, но второто, поспецифично правило, одоми го поставувањето само на некои параграфи.

Еве како ова може да се користи во некој HTML ознака:

Овој параграф ќе биде прикажан со сина боја, што е стандардно за страницата.

Овој став исто така ќе биде во сина боја.

И овој став ќе биде прикажан во црвено, бидејќи атрибутот на класата ќе ја пребрише стандардната сина боја од стил на селектирање на елементите.

Во тој пример, стилот на "p.alert" ќе се однесува само на елементи од став кои ја користат оваа "тревога" класа. Ако сакате да ја користите таа класа преку повеќе HTML елементи, едноставно ќе го отстраните HTML елементот од почетокот на стил повик (само бидете сигурни да го напуштите периодот (.) во место), вака:

.alert {background-color: # ff0000;}

Оваа класа сега е достапна за секој елемент што му е потребен. Секое парче од HTML што има вредност на атрибутот "алармирање" на класата, сега ќе го добие овој стил. Во HTML подолу, имаме и став и наслов 2, кој ја користи класата "алармирање". И двете од нив би имале позадина-боја на црвено врз основа на CSS што само покажавме.

Овој став ќе биде напишан со црвено.

И ова h2 исто така ќе биде црвено.

На веб-сајтови денес, атрибутите на класите често се користат на повеќето елементи, бидејќи тие се полесно да работат со од перспектива на специфичност дека се идентификатори. Ќе најдете најнапредните HTML страници кои треба да бидат пополнети со атрибути на класа, од кои некои се повторуваат повеќе пати во некој документ и други кои можат да се појавуваат само еднаш.

ID селектори

Селекторот на ID ви овозможува да го дадете името на одреден стил без да го асоцирате со ознака или друг HTML елемент . Кажете дека сте имале поделба во HTML означувањето што содржи информации за некој настан.

Оваа поделба би можела да му дадеш атрибут на "event", а потоа, ако сакаш да ја нагласиш таа поделба со широка црна граница од 1 пиксела, напишете ID код како што е:

#event {border: 1px solid # 000; }

Предизвикот со ID селектори е дека тие не можат да се повторат во еден HTML документ. Мора да бидат уникатни (можете да го користите истиот проект на повеќе страници на вашиот сајт, но само еднаш во секој одделен HTML документ). Значи, ако сте имале 3 настани за кои се потребни оваа граница, ќе треба да им дадете ID атрибути на "event1", "event2" и "event3" и стил на секој од нив. Затоа, би било многу полесно да се користи горенаведениот класен атрибут на "настан" и да ги стимулира сите одеднаш.

Друг предизвик со идентификациски атрибути е дека тие имаат повисока специфичност од атрибутите на класата. Ова значи дека ако треба да имате CSS што го заменува претходно воспоставениот стил, може да биде тешко да го сторите тоа ако премногу се потпрете на лични карти. Поради оваа причина, многу веб програмери се преселија подалеку од користење на ИД во нивниот раздел, дури и ако тие само имаат намера да ја користат таа вредност еднаш, и наместо тоа, се свртеа кон помалку специфичните атрибути на класата за скоро сите стилови.

Една област каде што атрибутите на идентификацијата влегуваат во игра е кога сакате да креирате страница која има вградени линкови. На пример, ако имате веб-страница за стил паралакса која ги содржи сите содржини на една страница со врски што "скокаат" на разни делови од таа страница. Ова е направено со користење на атрибути на ID и текстуални врски кои ги користат овие приклучоци.

Вие едноставно ќе ја додадете вредноста на тој атрибут, пред кој претходи симболот #, на атрибутот href на линкот, како на пример:

Ова е врска

Кога ќе кликнете или допрете, оваа врска ќе скокне до делот од страницата која го има овој атрибут ID. Доколку ниту еден елемент на оваа страница не ја искористи оваа вредност на ID, врската нема да направи ништо.