Element başına tək CSS sinfi ilə məhdudlaşmırsınız.
Cascading Style Sheets (CSS) , elementə tətbiq etdiyiniz xüsusiyyətlərə qoşulmaqla elementin görünüşünü müəyyən etməyə imkan verir. Bu xüsusiyyətlər ya ID və ya bir sinif ola bilər və bütün atributlar kimi onlar əlavə etdikləri elementlərə faydalı məlumatlar əlavə edə bilərlər. Bir elementə eklediğiniz xüsusiyyətdən asılı olaraq, element və veb səhifənin görünüşünü və hissini əldə etmək üçün lazım olan görsel üslubları tətbiq etmək üçün bir CSS seçicisi yaza bilərsiniz.
ID və ya siniflər CSS qaydalarına qoşulma məqsədi ilə işləyərkən, müasir veb dizayn metodları qismən şəxsiyyətlər üzərində siniflərə üstünlük verir, çünki onlar daha az xüsusi və ümumi işləməyi asanlaşdırırlar. Bəli, hələ də şəxsiyyət vəsiqələrini istifadə edən çox sayda sayt tapacaqsınız, lakin bu xüsusiyyətlər keçmişdə olduğundan daha səmərəli şəkildə tətbiq olunur, dərslər isə müasir veb səhifələrdən istifadə edir.
CSS-də tək və ya bir neçə sinif?
Çox hallarda bir elementə bir sinif atributu təyin edərdiniz, ancaq faktiki olaraq yalnız bir siniflə məhdudlaşmırsınız. Element yalnız bir ID öznitəsinə malik olsa da, tamamilə bir elementdən bir çox dərs verə bilər, bəzi hallarda isə bu səhifəni stilinizə daha asan və daha çevik edəcəkdir!
Bir elementə birdən çox sinif təyin etməlisinizsə, əlavə siniflər əlavə edə və sadəcə atributunuzdakı bir boşluqla ayıra bilərsiniz.
Məsələn, bu bənddə üç sinif var:
pullquote featured left "> Bu paragrafın mətni olardı
Bu paraqraf etiketində aşağıdakı üç sinfi müəyyən edir:
- Pullquote
- Featured
- Sol
Bu sinif dəyərlərindən hər biri arasında boşluqlara diqqət yetirin. Bu boşluqlar fərqli fərdi dərslər kimi qurur. Buna görə də sinif adları onların içərisində boşluqlar ola bilməz, çünki bunu etmək ayrı-ayrı siniflərdir.
Məsələn, "pullquote-featured-left" bir boşluq istifadə etsəniz, bir sinif dəyəri olacaq, lakin bu üç sözün bir boşluqla ayrıldığı yuxarıda göstərilən nümunə fərdi dəyərlər kimi təyin edir. Web səhifələrinizdə hansı sinif dəyərlərinin istifadə ediləcəyi barədə qərar qəbul etdiyinizdə bu konsepsiyanı anlamaq vacibdir.
HTML-də sinif dəyərləriniz varsa, bunları CSS-də dərslər kimi təyin edə və əlavə etmək istədiyiniz üslubları tətbiq edə bilərsiniz. Misal üçün.
.pullquote {...}
.featured {...}
p.left {...}
Bu nümunələrdə CSS bəyannamələri və dəyərlər cütləri üslubların müvafiq seçiciyə necə tətbiq ediləcəyi ilə bağlı olan kıvırcık qolların içərisində olacaqdır.
Qeyd - müəyyən bir elementə bir sinif təyin etsəniz (məsələn, p.left), onu hələ də siniflər siyahısının bir hissəsi kimi istifadə edə bilərsiniz; ancaq, yalnız CSS-də göstərilən elementlərə təsir edəcəkdir. Başqa sözlə, p.left üslubu yalnız seçicinizin "sol" bir sinif dəyəri olan paraqraflara tətbiq etmək üçün deyir, çünki bu sinifdə olan paraqraflara tətbiq olunacaq. Əksinə, nümunə olan digər iki seçici müəyyən bir elementi göstərmir, beləliklə bu sinif dəyərlərini istifadə edən hər hansı elementə müraciət edəcəklər.
Birden çox siniflərin üstünlükləri
Bir neçə dərs daha asan elementə xüsusi effektlər əlavə edə bilər ki, bu element üçün tamamilə yeni bir üslub yaratmır.
Məsələn, elementləri sola və ya sağa sürətlə çatdırmaq qabiliyyətinə malik ola bilərsiniz. Yalnız float ilə sol və sağ iki dərs yaza bilərsiniz: sol; və float: sağ; onlarda. Sonra bir elementiniz olanda sola dönmək lazımdır, sadəcə sinfi "sol" sinfi siyahısına əlavə edərdiniz.
Bununla birlikdə bura getmək üçün gözəl bir xətt var. Veb standartları üslub və quruluşun ayrılmasını diktə etdiyini unutmayın. Stil CSS-də olduğunda struktur HTML vasitəsilə işlənir.
HTML sənədinizin bütün elementlər, nə elementlərdən daha çox baxmaq istədiklərini göstərən adlar olan "qırmızı" və ya "sol" kimi sinif adları olan elementlərlə doludursa, bu xəttin struktur və stil arasındakı hissəsini keçəcəksiniz. Bu səbəbdən mümkün olmayan semantik sinif adlarını məhdudlaşdırmağa çalışıram.
Birden çox sinif, semantik və JavaScript
Bir çox sinifdən istifadə etmək üçün bir üstünlük daha çox interaktiv imkanları təmin edir.
Mövcud elementlərə yeni dərslər başlanğıc siniflərdən birini çıxarmadan JavaScript istifadə edə bilərsiniz. Bir elementin semantikasını müəyyən etmək üçün dərslərdən istifadə edə bilərsiniz. Bu, bu elementin semantik anlamı nə olduğunu müəyyən etmək üçün əlavə dərslər əlavə edə bilərsiniz. Microformats bu necə işləyir.
Bir çox siniflərin mənfi cəhətləri
Elementlərinizdə bir çox dərslərdən istifadə etmək üçün ən böyük dezavantaj bu, onları vaxt keçirməyə və idarə etmələrə bir qədər sərtləşə bilər. Bir üslubun hansı elementə təsir etdiyini və hər hansı bir skriptin təsir etdiyini müəyyənləşdirmək çətin ola bilər. Bootstrap kimi bu gün mövcud olan bir çox çərçivə bir çox dərsli elementləri ağır istifadə edir. Ehtiyatlı olmadıqda, bu kod əlindən çıxa bilər və çox tez işləməyə bilər.
Bir çox sinifdən istifadə etdiyinizdə, bir sinif üçün üsluba sahib olma riskini başqasının üslubunu ləğv etsən də, bunun üçün niyyət etməsən də. Buna görə də üslublarınızın nəyə görə lazım olmadığı hallarda tətbiq olunmadığını anlamaq çətinləşə bilər.
Bir elementə tətbiq edilən xüsusiyyətlərlə belə özünəməxsusluqdan xəbərdar olmalısan!
Chrome'da Web Yöneticisi alətləri kimi bir vasitə istifadə edərək, dərslərinizin üslublarınıza necə təsir etdiyini daha asanlıqla görə bilərik və qarşıdurma üslub və xüsusiyyətləri bu problemdən qaçın.
Jennifer Krynin tərəfindən hazırlanan əsər. Jeremy Girard tərəfindən 8/7/17 tarixində ediləcək