Inline, gömülü və xarici stillər: Burada bilmək lazımdır
Front-end veb saytının inkişafı tez-tez 3 ayaqlı bir səliqə kimi təmsil olunur. Bu ayaqları belə:
Bu nağıl, CSS və ya Cascading Style Sheets ikinci ayağı, bu gün burada baxdığımız şeydir. Xüsusilə, bir sənədə əlavə edə biləcəyiniz 3 üsluba müraciət etmək istəyirik.
- Inline üslubları
- Daxili üslublar
- Xarici üslublar
Bu cür CSS üslublarının hər biri öz faydaları və çatışmazlıqlarına malikdir, buna görə də onların hər birinə daha dərin baxaq.
Inline Styles
Inline üslubları HTML sənədində etiketdə birbaşa yazılmış üslublardır. Inline üslubları yalnız tətbiq olunan xüsusi etiketə təsir göstərir. Standart bir keçid və ya çapa etiketinə tətbiq edilən inline stilin nümunəsi:
Bu CSS qaydası, standart bir vurğulayan mətn dekorasiyasını bu bir linkdən çıxardı. Bununla belə, səhifədə başqa bir link dəyişdirilməyəcək. Bu inline üslublarının məhdudiyyətlərindən biridir. Onlar yalnız müəyyən bir maddə üzrə dəyişdirildikləri üçün, faktiki səhifə dizaynına nail olmaq üçün HTML-yə bu üslublarla zibil verməlisiniz. Bu yaxşı bir təcrübə deyil. Əslində, bu "font" yazıları və web pages strukturu və stil qarışığı gündən bir addımdır.
Inline üslubları da çox yüksək spesifikliyə malikdir.
Bu, digər, qeyri-inline üslublarla yazmaq üçün onları çox çətinləşdirir. Məsələn, bir saytın reaksiyasını vermək və media sorgularını istifadə edərək bir elementin müəyyən nöqtələrə necə baxdığını dəyişdirmək istəyirsinizsə, bir elementə daxil olan inline üslublar bunu etmək üçün çox çətin olacaq.
Nəhayət, inline üslublar çox sərfəli istifadə edildikdə, həqiqətən, yalnız uyğundur.
Əslində, nadiren mənim veb səhifələrimdə inline üslublarını istifadə edirəm.
Daxili Styles
Gömülü üslublar sənədin başında yerləşdirilən üslublardır. Yerləşdirilmiş üslublar yalnız daxil olunan səhifənin etiketlərini təsir edir. Bir daha, bu yanaşma CSS-nin güclü birindən imtina edir. Hər bir səhifədə üsluba sahib olacağından
, bir sitewide dəyişiklik etmək istəsəniz, qırmızıdan yaşıl rənglərə olan əlaqələrin rəngini dəyişdirmək kimi, hər səhifədə yerləşmiş stil hesabatı istifadə etdiyindən, bu dəyişikliyi hər səhifəyə çevirməliyik. Bu inline üslublarından daha yaxşıdır, lakin bir çox hallarda hələ problemlidir.
Əlavələr əlavə olunur
bir sənədin ayrıca səhifəyə əhəmiyyətli miqdarda bir biçimlendirme kodunu da əlavə edər və bu da səhifəni gələcəkdə daha da idarə edə bilər.
Daxili stillərin faydası, digər xarici faylların yüklənməsini tələb etmək əvəzinə, səhifənin özü ilə yükün dərhal olmasıdır. Bu yükləmə sürətindən və performans perspektivindən faydalana bilər.
Xarici Style Sheets
Çox saytlar bu gün xarici stillərdən istifadə edirlər. Xarici üslublar ayrı bir sənəddə yazılmış və müxtəlif veb sənədlərə əlavə edilmiş üslublardır. Xarici stil cədvəlləri əlavə edilmiş hər hansı bir sənədə təsir göstərə bilər, yəni hər səhifə eyni stil səhifəsini (bu, adətən necə aparılır) istifadə etdiyi 20 səhifədən ibarət bir veb saytınız varsa, hər birinə görsel bir dəyişiklik edə bilərsiniz bu səhifələrin sadəcə stil tərtibini düzəldərək.
Bu, uzun müddətli sayt idarəçiliyini daha asan edir.
Xarici stillərdən aşağı olanlar, bu xarici faylları almaq və yükləmək üçün səhifələr tələb edir. CSS səhifəsində hər bir səhifədə hər bir stildən istifadə olunmayacaq, çox sayda səhifə daha çox CSS-lərin əsl ehtiyacdan daha yüklənəcəkdir.
Xarici CSS faylları üçün bir performans hiti olduğunu doğrudur, baxmayaraq ki, bu, minimuma endirilə bilər. Həqiqətən, CSS faylları yalnız mətn fayllarıdır, buna görə də ümumiyyətlə başlamağa çox böyük deyil. Bütün saytınız 1 CSS faylını istifadə edirsə, əvvəlcədən yükləndikdən sonra həmin sənədin saxlanılmasının faydasını alırsınız.
Bu, ilk səhifəyə bəzi səfərlərə az təsir göstərə bilər, ancaq sonrakı səhifələr cached CSS faylı istifadə edəcək, belə ki, hər hansı bir hit inkar olunacaq. Xarici CSS faylları bütün veb səhifələrimi necə qurur.