Вие не сте ограничени на една CSS класа по елемент.
Каскадните стилски листови (CSS) ви овозможуваат да го дефинирате изгледот на елементот со тоа што ќе се вклучите во атрибутите што ги применивте на тој елемент. Овие атрибути можат да бидат или ИД или класа и, како и сите атрибути, додаваат корисни информации за елементите на кои се прикачени. Во зависност од кој атрибут ќе додадете елемент, можете да напишете CSS селектор за да ги примени потребните визуелни стилови кои се потребни за да се постигне изглед и чувство за тој елемент и веб-страницата како целина.
Додека или лични карти или класи работат за да се вметнат во нив со правилата на CSS, современите методи на веб дизајн ги наклонуваат класи преку лични карти, делумно, бидејќи тие се помалку специфични и полесно работат со целокупната. Да, сеуште ќе најдете многу сајтови кои користат ID-а, но овие атрибути се применуваат поретко отколку во минатото, додека часовите преземаа модерни веб-страници.
Единствени или повеќе класи во CSS?
Во повеќето случаи ќе му доделите еден атрибут на еден елемент на елементот, но вие всушност не се ограничени само на една класа на начин на кој сте со идентификатори. Додека елементот може да има само еден атрибут на идентификација, апсолутно може да му дадете елемент на повеќе класи и, во некои случаи, тоа ќе ја направи вашата страница полесна за стил и многу пофлексибилен!
Ако треба да му доделите повеќе класи на елемент, можете да додадете дополнителни класи и едноставно да ги одделите со празно место во вашиот атрибут.
На пример, овој параграф има три класи:
pullquote вклучен лево "> Ова ќе биде текстот на ставот
Ова ги поставува следните три класи на тагот:
- Pullquote
- Избрана
- Лево
Забележете ги празнините помеѓу секоја од овие вредности на класата. Овие простори се она што ги поставува како различни, индивидуални класи. Ова е исто така зошто имињата на класите не можат да имаат празни места во нив, бидејќи тоа би ги поставило како посебни класи.
На пример, ако сте користеле "pullquote-featured-left" без простор, тоа ќе биде една класа вредност, но примерот погоре, каде што овие три зборови се одделени со празно место, ги поставува како индивидуални вредности. Важно е да го разберете овој концепт додека одлучувате за вредностите на класите кои ќе ги користите на вашите веб-страници.
Откако ќе ги имате вредностите на класата во HTML, тогаш можете да ги назначите овие како класи во вашиот CSS и да ги примените стилите што сакате да ги додадете. На пример.
.pullquote {...}
.Избрана { ... }
p.left {...}
Во овие примери, паровите на декларации и вредности на CSS ќе бидат во внатрешноста на кадрави загради, што е како овие стилови ќе бидат применети на соодветниот селектор.
Забелешка - ако поставите класа на одреден елемент (на пример, p.left), сепак можете да го користите како дел од листата на класи; сепак, бидете свесни дека тоа ќе влијае само на оние елементи што се наведени во CSS. Со други зборови, стилот p.left ќе се применува само на ставовите со оваа класа, бидејќи вашиот селектор всушност велеше да го примени на "ставовите со класа вредност на" лево ". Спротивно на тоа, другите два селектори во примерот не наведуваат одреден елемент, па ќе се применуваат на секој елемент кој ги користи тие вредности на класата.
Предности на повеќе класи
Повеќекратните класи може полесно да додаваат специјални ефекти на елементите без да создадат сосема нов стил за тој елемент.
На пример, можеби ќе сакате да имате способност брзо да летате лево или десно . Може да напишете две класи лево и десно со само плови: лево; и плови: десно; во нив. Потоа, секогаш кога сте имале елемент што треба да летате лево, едноставно ќе ја додадете класата "лево" во својата класна листа.
Меѓутоа, постои фина линија за одење тука. Запомнете дека веб стандардите диктираат одвојување на стилот и структурата. Структурата се ракува преку HTML додека стилот е во CSS.
Ако вашиот HTML документ е исполнет со елементи со сите имиња на класа како "црвено" или "лево", кои се имиња кои диктираат како елементите треба да изгледаат наместо она што се, ја преминувате таа линија помеѓу структурата и стилот. Се обидувам да ги ограничам моите не-семантички класни имиња колку што е можно поради оваа причина.
Повеќе класи, семантика и JavaScript
Друга предност за користење на повеќе класи е тоа што ви дава многу повеќе можности за интерактивност.
Можете да аплицирате нови класи за постоечките елементи користејќи го JavaScript без да ги отстраните почетните класи. Можете исто така да користите класи за дефинирање на семантиката на елементот . Ова значи дека можете да додадете дополнителни класи за да дефинирате што тој елемент значи семантички. Така работи Микроформатите.
Недостатоци на повеќе класи
Најголем недостаток на користење на повеќе класи на вашите елементи е тоа што може да ги направи малку гломазни за да гледаат и да управуваат со текот на времето. Може да биде тешко да се утврди кои стилови влијаат врз еден елемент и ако скриптите влијаат врз него. Многу од достапните рамки денес, како што се Bootstrap, прават тешка употреба на елементи со повеќе класи. Тој код може да излезе од рака и тешко да се работи со многу брзо ако не сте внимателни.
Кога користите повеќе класи, исто така ризикувате да имате стил за една класа да го прескокнете стилот на друг, дури и ако немате намера за тоа. Ова тогаш може да ви го отежне да дознаете зошто вашите стилови не се применуваат дури и кога изгледа дека треба.
Треба да бидете свесни за специфичност, дури и со атрибутите што се применуваат на тој елемент!
Со користење на алатки како алатките на Webmaster во Chrome, полесно можете да видите како вашите класи влијаат на вашите стилови и да го избегнуваат овој проблем со конфликтни стилови и атрибути.
Авторски напис од Џенифер Крајнин. Уредено од Џереми Жирар на 8/7/17