Ru.hexlet.io saytında dərc olunmuş Per Harald Borgenin “Niyə CSS Grid layout yaratmaq üçün Bootstrap-dan daha yaxşıdır” məqaləsinin tərcüməsini təqdim edirik.

CSS Grid internetdə tərtibatlar yaratmaq üçün yeni bir üsuldur. İlk dəfə olaraq, bir çox üstünlükləri təmin edən tam hüquqlu layout sistemi birbaşa brauzerdə mövcuddur.

CSS Grid-i ən məşhur çərçivə Bootstrap ilə müqayisə etdikdə bu üstünlüklər xüsusilə diqqəti cəlb edir. Siz nəinki JavaScript olmadan əvvəllər qeyri-mümkün olan planlar yarada bilərsiniz, həm də kodunuzun saxlanması və başa düşülməsi asanlaşacaq.

Gəlin CSS Grid-in Bootstrap-dan üstün olduğunu düşündüyüm ilk üç səbəbə baxaq.

İşarələmə asanlaşacaq

Bootstrap-ı CSS Grid ilə əvəz etmək HTML-i daha təmiz edəcək. Bu ən vacib fayda olmasa da, yəqin ki, ilk görəcəyiniz faydadır.

Aydınlıq üçün iki versiya üçün tələb olunan kodu müqayisə edə bilmək üçün dummy veb sayt tərtibatı yaratdım. Burada:

Bootstrap

Əvvəlcə Bootstrap-da bu saytı qurmaq üçün lazım olan işarələmələrə baxaq.

Burada buna diqqət yetirməyinizi istərdim:

1. Hər bir sətirdə ayrıca etiket olmalıdır
   .
2. Planı göstərmək üçün sinif adları (col-xs-2) istifadə edilməlidir.
3. Bu nümunə mürəkkəbləşdikdə, HTML də mürəkkəbləşir.

Bu, cavab verən saytdırsa, teqlər adətən daha pis görünür:

CSS Grid

İndi eyni şeyi CSS Grid-də həyata keçirməyin bir yoluna baxaq. Budur HTML:

Mən semantik elementlərdən istifadə edə bilərdim, lakin Bootstrap ilə müqayisəni daha aydın etmək üçün div-lərdən istifadə etməyə qərar verdim.

Bu işarələmənin daha sadə olduğunu dərhal görə bilərsiniz. Çirkin sinif adları və hər sətir üçün əlavə div teqləri keçmişdə qaldı. Bu, sadəcə şəbəkə və onun içindəki mövqelər üçün konteynerdir.

Və Bootstrap-dan fərqli olaraq, səhifə tərtibatının mürəkkəbliyi artdıqca bu işarələmə çox mürəkkəb olmayacaq.

Bootstrap nümunəsində sizdən heç bir CSS əlavə etməyiniz tələb olunmurdu; CSS Grid-də mütləq etməlisiniz. Daha dəqiq desək, bunu əlavə etməlisiniz:

Bəziləri üçün bu, Bootstrap üçün satış nöqtəsi ola bilər: sadə şəbəkə yaratmaq üçün CSS-dən narahat olmaq lazım deyil - siz sadəcə HTML-də tərtibat qurursunuz.

Ancaq növbəti nöqtədə görəcəyiniz kimi, çevikliyə gəldikdə, işarələmə və tərtibat arasındakı əlaqə əslində zəiflikdir.

Daha çox çeviklik

Tutaq ki, siz ekran ölçüsündən asılı olaraq tərtibatı dəyişmək istəyirsiniz. Məsələn, mobil cihazlardan baxmaq üçün menyunu yuxarı sıraya qaldırın.

Başqa sözlə, tərtibatı bundan dəyişdirin:

buna:

CSS Grid

Bunu CSS Grid ilə etmək çox asandır. Media sorğusu əlavə edirik və istədiyimiz kimi müxtəlif blokları qarışdırırıq:

HTML-nin necə yazılmasından narahat olmadan bu şəkildə tərtibat yaratmaq bacarığı mənbə sifarişinin müstəqilliyi adlanır və bu, tərtibatçılar və dizaynerlər üçün böyük bir qələbədir.

CSS Grid sizə HTML-ni olması lazım olan şeyə çevirməyə imkan verir. CSS-in nəzərdə tutduğu vizuallıq deyil, məzmun işarələməsi.

Bootstrap

Bootstrap-da da eyni şeyi etmək istəsək, HTML-ni dəyişdirməliyik. İkinci cərgədəki menyu girov saxlanıldığından, başlığa əlavə olaraq menyu etiketini də yuxarı cərgəyə daşımalıyıq.

Bunu media sorğusu ilə etmək mənasız bir iş deyil. Bu, yalnız HTML və CSS ilə edilə bilər və siz JavaScript ilə skripka etməli olacaqsınız.

Bu nümunə CSS Grid-in mənim təcrübə etdiyim böyük faydasını göstərir.

Artıq 12 sütun məhdudiyyəti yoxdur

Bu, ən böyük problem deyil, lakin bir çox dəfə bezdirici olmuşdur. Bootstrap şəbəkəsi 12 sütuna bölündüyündən, beş sütunlu bir tərtibat istəsəniz, probleminiz olacaq. Və ya yeddi. Və ya doqquz. Və ya on iki olmayan bir rəqəmdən.

CSS Grid ilə belə deyil. İstədiyiniz qədər sütunla öz layoutunuzu yarada bilərsiniz. Budur yeddi sütun düzümü.

Bu, grid-şablon-sütunlarını təkrar (7, 1fr) kimi təyin etməklə həyata keçirilir:

Bootstrap-da bunu etmək üçün sındırmalar ola bilər... Və mən bilirəm ki, Bootstrap 4 bu çevikliyə imkan verən Flexbox-dan istifadə edir, lakin hələ də betadan çıxmayıb.

Bu məqaləni yekunlaşdırmazdan əvvəl, əlbəttə ki, brauzer dəstəyi haqqında danışmaq lazımdır. Bu yazıya görə qlobal veb trafikinin 75%-i CSS Grid-i dəstəkləyir.

Ancaq CSS Grid-dən tamamilə imtina etməzdən əvvəl Morten Rand-Hendriksenin bu barədə söylədiklərinə qulaq asmağı təklif edirəm. O, iddia edir ki, CSS Grid geriyə uyğunluq haqqında necə düşündüyümüzü yenidən düşünmək üçün bir fürsətdir:

“CSS Grid layout moduludur, o, bizə mənbə kodun sırasına müdaxilə etmədən sənədin tərtibatını dəyişməyə imkan verir. Başqa sözlə desək, CSS Grid tamamilə vizual vasitədir və düzgün istifadə olunarsa, sənəddəki məzmunun daxili əlaqələrinə təsir etməyəcək. Bu, sadə, lakin təəccüblü bir fakta gətirib çıxarır: köhnə brauzerdə CSS Grid dəstəyinin olmaması sayt ziyarətçisinin təcrübəsinə təsir etməməlidir, sadəcə olaraq bu qavrayışı dəyişdirməlidir.”

Başqa sözlə, məzmunu vizualdan ayırdıqdan sonra bütün ziyarətçilər məzmunu görəcək, lakin CSS Grid onu daha yaxşı işarələmə ilə aktivləşdirənlər üçün baxış təcrübəsini yaxşılaşdıracaq.

Nəticə

“CSS Grid-dən nə qədər çox istifadə edirəmsə, bir o qədər əmin oluram ki, üstünə abstraksiya qatı əlavə etməyin heç bir faydası yoxdur. CSS Grid birbaşa brauzerdə qurulmuş layout çərçivəsidir."

Salam, blog saytının əziz oxucuları. Bu gün mən vebsaytla işləyərkən HTML dilini bilməyə nə üçün ehtiyacınız ola biləcəyindən (bunun nə olduğu haqqında oxuyun), CSS kaskad üslub vərəqləri ilə işləməyin əsaslarından (mövzu ilə bağlı giriş məqaləsi tapa bilərsiniz) danışmaq istərdim. eləcə də ən azı PHP-də proqramların qurulmasının əsaslarını və prinsiplərini və MySQL verilənlər bazası ilə işləmək məntiqini başa düşmək.

sahib olmadan veb-saytlar yaratmağa imkan verir yuxarıda qeyd olunan bütün hikmətlər, lakin eyni zamanda, işləyərkən, yəqin ki, ən mürəkkəb CMS-dən (Joomla, WordPress, Drupal və s.) istifadə etməklə həll edə bilməyəcəyiniz suallarınız və problemləriniz olacaq.

Vebsaytda işləyərkən niyə dil biliklərinə (işarələmə, üslublar, server proqramlaşdırması) ehtiyacınız ola bilər?

Ya bir çox digər parametrlər arasında CMS admin panelində belə bir element tapa bilməyəcəksiniz (bəzi parametrləri yerləşdirərkən mühərrik müəlliflərinin məntiqi qeyri-müəyyən olaraq qalır və bəlkə də müəllifin özünün vərdiş gücü burada müəyyən rol oynayır), və ya tərtibatçılar məzmun idarəetmə sisteminin admin panelinə belə bir elementi ümumiyyətlə daxil etməyəcəklər. İdarəetmə paneli vasitəsilə hər şey üçün parametrləri həyata keçirmək mümkün deyil - adətən orada yalnız ən zəruri və tez-tez istifadə olunan parametrlər göstərilir.

Tez-tez olur problemi həll etmək daha asandır mühərrik idarəetmə panelində təqdim olunan standart alətlərlə deyil, birbaşa olaraq, verilənlər bazasında nəyisə redaktə etməklə və ya FTP vasitəsilə onlara daxil olmaq yolu ilə müəyyən mühərrik fayllarının məzmununu tənzimləməklə.

Bəli, bu, ən azı HTML işarələmə dilinin əsaslarını öyrənmək, kaskad stil vərəqlərinin veb səhifələrin görünüşünə necə təsir etdiyini başa düşmək, həmçinin verilənlər bazasının strukturunu başa düşmək və ona dəyişikliklərin necə ediləcəyini öyrənmək üçün vaxt sərf etməyi tələb edəcək. Və bəlkə də ən çətini, nəyin və harada ağrısız şəkildə dəyişdirilə biləcəyini və nəyə toxunulmamalı olduğunu başa düşmək üçün PHP-də kod yazmağın əsas prinsiplərini başa düşməkdir.

Mən, əlbəttə ki, veb səhifələrin dizaynından başlayacağam (əslində, bu anda mən artıq bu tapşırığı yerinə yetirmişəm və nəticələrini görə bilərsiniz və). Əvvəlki yazıların birində qeyd etdiyim kimi, son vaxtlara qədər bütün resurslar HTML formatında olan səhifələrdən ibarət idi. Bundan əlavə, vebsaytın məzmunu (mətnlər, şəkillər, cədvəllər) və dizaynı (rənglər, fon, abzaslar) orada göstərilmişdir.

Düzgün tərtibatın müasir anlayışında məzmun hipermətn işarələmə dili teqlərindən istifadə etməklə həyata keçirilməli və bu məzmunun dizaynı xarici stil cədvəli fayllarından istifadə etməklə həyata keçirilməlidir. Bu ayırma veb-sayt səhifəsini lazımsız xidmət kodundan azad etməyə imkan verir.

Fakt budur ki, axtarış motorları çox yaxındır informasiya komponentinin nisbətinə baxın veb səhifənin kodu (brauzerdə göstərilən mətn) və onun xidmət komponenti (teqlər, müxtəlif skriptlər və s.). Buna görə də, bu səhifənin hüdudlarından kənara çıxmaqla, məlumat komponenti daşımayan, lakin yalnız səhifələrin dizaynına cavabdeh olan hər şey, biz axtarış sistemlərinin layihəmizə münasibətini yaxşılaşdırırıq (yaxşı, ən azı nəzəri cəhətdən).

Üstəlik, ayrı bir faylda yerləşdirilən CSS qaydalarının siyahısı resursun dizaynını birləşdirməyə imkan verir. Lazım gələrsə, siz həmişə bütün veb səhifələrin kodunu redaktə etmədən dizaynda nəyisə dəyişə bilərsiniz, çünki bu halda, bütün səhifələr üçün ümumi olan stil cədvəlinə mövcud olanları düzəltmək və ya yeni üslub xüsusiyyətləri əlavə etmək kifayət edəcəkdir.

Stil vərəqlərinin yaranması ilə bir çox hipermətn işarələmə dili teqləri və onların atributları köhnəlmiş hesab olunmağa başladı və istifadə üçün tövsiyə edilmir. Bunun əvəzinə eyni hərəkətləri yerinə yetirən CSS xüsusiyyətlərindən istifadə etmək tövsiyə olunur. Bu o demək deyil ki, artıq HTML öyrənməyə ehtiyac yoxdur, sadəcə olaraq vebsayt yaratmaq və saxlamaq üçün bilməli olduğunuz və istifadə edə bildiyiniz teqlərin və onların atributlarının sayı azalıb. Özüm də daim istifadə etdiyim etiketlər haqqında sizə məlumat verməyə çalışacağam.

Hansı redaktor kodu redaktə etmək və ya dəyişiklik etmək daha yaxşıdır?

Bunda mürəkkəb bir şey yoxdur, çünki əslində bu, hətta proqramlaşdırma dili deyil, rus dilindəki sintaksisə bənzər bir şey olan hipermətn işarəsidir. Öz təcrübənizə əsaslanaraq dərhal nə məsləhət vermək istərdiniz? Özünüz bloknotda etiketlər yazmağa çalışın, məsələn Notepad++(mənimkini oxuyun) və Dreamviewer kimi proqramlarda deyil. Niyə?

Bəli, çünki bu halda teqlərin və atributların yazılmasını yaxşılaşdıracaq və xatırlayacaqsınız. Bəli, Dreamviewer kimi proqramlarda tərtib etmək daha rahatdır, çünki... onu dərhal brauzerdə görə bilərsiniz və müəyyən bir teq yazmaq üçün seçimlər açılan siyahıdan seçilə bilər.

Ancaq fakt budur ki, siz əsasən mühərrik fayllarınızda mövcud kodu redaktə etməli olacaqsınız və bütün etiketləri və onların atributlarını əzbər yazmağı xatırlasanız (xoşbəxtlikdən onların çoxu yoxdur) daha rahat olacaq. Niyə bir etiketi düzəltmək üçün çətin Dreamview-də faylı açın, bu məqsədlər üçün adi notepad, yaxşı və ya onun Notepad plus plus adlı qabaqcıl analoqu (link yuxarıda verilmişdir) kifayətdir.

Baxmayaraq ki, bu mənim şəxsi fikrimdir (IMHO) və nəyin daha əlverişli olduğuna qərar vermək sizin ixtiyarınızdadır. Məsələn, kurslarında bütün bu məsələni öyrəndiyim Yevgeni Popov, görünür, Dreamviewer-in tərəfdarıdır. Prinsipcə, bir şey vacibdir - kodu bütün dəyişiklikləri saxlaya bilən redaktorda redaktə edəsiniz və istəsəniz, hər şeyi olduğu kimi qaytarın(geri).

Bu vəziyyətdə, nə qədər qarışdırsanız da, hər şey düzələcək. Və əlbəttə ki, kodu yazdığınız və ya redaktə etdiyiniz dilin sintaksisi ilə vurğulanması çox rahatdır. Notepad++ mənim seçimimdir! Onun imkanları haqqında yuxarıdakı məqalədə danışdım.

İşarələmə və onun dizaynı haqqında bir-bir danışmaq yəqin ki, tamamilə düzgün deyil, ona görə də onların birgə istifadəsi haqqında danışmağa çalışacağam. Başa düşmək lazımdır ki, CSS xassələri bir və ya bir neçə ayrı faylda yazılıb, onları mühərrikiniz üçün istifadə olunan mövzuda asanlıqla tapa bilərsiniz.

Müasir CMS-də veb səhifə teqləri əvvəllər olduğu kimi bir və ya bir neçə faylda yazılmır, lakin PHP-dən yaradılır (təfsir olunur). Artıq bu şəkildə yaradılan Html kodu brauzerə daxil edilir ki, o, öz növbəsində onu bizim üçün başa düşülən bir İnternet səhifəsi formasına çevirsin. Çətin, elə deyilmi?

Buna görə də istənilən CMS-də teqləri redaktə etmək hipermətn işarələmə dili ilə tam rahat olsanız belə, o qədər də əhəmiyyətsiz bir iş deyil. Axı siz PHP fayllarında teqləri redaktə etməli olacaqsınız və buna görə də ən azı onun əsas anlayışlarını və sintaksisini bilməlisiniz.

Ancaq narahat olmayın, dizaynı redaktə etmək üçün çox PHP biliyinə ehtiyacınız olmayacaq. Etiketlər orada, belə demək mümkünsə, səthdə yatır və onları müəyyən etmək və lazım olduqda onları düzəltmək çətin deyil.

Hansı vasitələrdən istifadə edə bilərsiniz?

Problem adətən başqa yerdə yaranır. İstədiyiniz teq fraqmentinin formalaşdığı PHP uzantılı faylı necə tapmaq olar? Burada bir sual var. Bəli, əlbəttə ki, bu mühərriklərlə işləmək təcrübəniz varsa, o zaman düşünürəm ki, siz bunu bacaracaqsınız. Bəs siz başlanğıcsınızsa və yüzlərlə PHP faylından hansının nəyə cavabdeh olduğunu bilmirsinizsə?

Eyni dərəcədə mükəmməl brauzer üçün əla plagin burada sizə kömək edəcək, həmçinin yuxarıda qeyd olunan Notepad++ çoxlarına məlum deyil. Bu proqramlar paketi dağları yerindən tərpətməyə və çox vaxta qənaət etməyə kömək edəcək.

Növbəti yazılarda saytla bağlı yaranan problemlərin effektiv həlli üçün bu proqramlardan necə istifadə edəcəyinizi ətraflı izah edəcəyəm. Bəli, demək olar ki, FTP vasitəsilə daxil olmağa imkan verən əvəzedilməz proqramı - FileZilla (bu mövzuda artıq məqalə var) haqqında unutdum. Yaxşı, əlbəttə ki, bu barədə də danışacağıq.

Məqsədlər qeyd olunub, vəzifələr qoyulub, qalan onları həyata keçirməkdir. Bunun üçün icazə verin, məzuniyyətimi götürüm.

Sənə uğurlar! Tezliklə blog saytının səhifələrində görüşənədək

Sizi maraqlandıra bilər

Google Font onlayn xidmətində veb sayt və kompüter üçün gözəl rus şriftləri - harada yükləmək və necə quraşdırmaq olar Adaptiv (cavab verən) dizayn - mobil cihazlarda baxmaq üçün saytın optimallaşdırılması
Gif, Png və ya Jpg - veb üçün rastr qrafika formatları, vebsaytda istifadə edildikdə onların müsbət və mənfi cəhətləri

Bu, CSS və sənədlər arasındakı əlaqəni izah edən Başlayanlar üçün CSS Bələdçisindəki ikinci məqalədir. Burada siz ilk məqaləni öyrənmək prosesində yaratdığınız sənədə CSS üslublarını necə əlavə edəcəyinizi öyrənəcəksiniz.

Məlumat: CSS niyə lazımdır?

CSS sənədlərinizin üslublarını, o cümlədən müxtəlif cihazlar və ekran ölçüləri üçün dizayn, tərtibat və layout variasiyalarını müəyyən etmək üçün istifadə olunur. CSS üslublarını etiketin içərisinə yerləşdirə bilərsiniz daxili üslub cədvəli ilə sənəd və ya üslublarınızı xarici olaraq müəyyən edəcək ayrıca CSS faylı əlavə edin. Xarici üslub cədvəlini sənədlə əlaqələndirmək üçün sadəcə başlıqdakı üslub cədvəlinə keçid əlavə edin sənəd.

Xarici üslub cədvəlinə sahib olmağın bir çox üstünlükləri var. Üslubları HTML məzmunundan ayrı saxlamaq:

• Təkrarlanmanın qarşısını almağa kömək edir
• Baxımı asanlaşdırır
• Bütün sayt üçün bir yerdə dəyişiklik etməyə imkan verir

CSS ilə siz üslub məlumatlarını bütün səhifələr tərəfindən paylaşılan paylaşılan fayllarda saxlayırsınız. Məsələn, sənədlər h2 başlıqlarının rəngini təyin edən stil vərəqlərinə istinad etdikdə, tək CSS atributunu dəyişdirərək üslubu qlobal olaraq h2 başlıq teqlərinə tətbiq edə bilərsiniz.

İstifadəçi veb səhifəni açdıqda, brauzer səhifə məzmunu ilə birlikdə stil məlumatını yükləyir.

İstifadəçi çap rejimində veb səhifəni açdıqda, siz səhifənin oxunmasını asanlaşdıracaq müxtəlif üslub məlumatlarını verə bilərsiniz.

HTML və CSS-nin birlikdə işləməsini necə təmin etmək olar? Ümumiyyətlə, HTML sənədin üslubunu deyil, məzmununu təsvir etmək üçün istifadə olunur. CSS sənədin məzmununu deyil, üslubunu müəyyən etmək üçün istifadə olunur. Bu qayda üçün bəzi istisnaları daha sonra bələdçidə görəcəksiniz.

Daha ətraflı

HTML kimi işarələmə dili də üslubları müəyyən etmək üçün bəzi yollar təqdim edir.

Məsələn, HTML-də etiketdən istifadə edə bilərsiniz mətni qalın etmək və ya etiketdə səhifə fonunun rəngini təyin etmək üçün .

CSS-dən istifadə edərkən, işarələmə dilindən istifadə edərək üslubların qurulması adətən istifadə edilmir, çünki bütün üslub məlumatları asanlıqla oxuna bilər və CSS faylında dəyişdirilir.

Fəaliyyət: Stil cədvəli yaradın

1. Birinci məqalədə yaradılmış doc1.html ilə eyni kataloqda yeni mətn faylı yaradın.
2. Onu style1.css kimi yadda saxlayın. Bu fayl sizin stil cədvəliniz olacaq.
3. Aşağıdakı sətri kopyalayıb CSS faylına yapışdırın, sonra faylı yadda saxlayın: güclü (rəng: qırmızı;)

Stil cədvəlinin sənədlə əlaqələndirilməsi

1. Sənədinizi üslub cədvəli ilə əlaqələndirmək üçün HTML faylında bəzi dəyişikliklər etməlisiniz. Aşağıdakı sətirləri əlavə edin:

   C yüksələn Süslub S heets

2. Faylı yadda saxlayın və brauzerinizdə açın. Stil cədvəli böyük hərfləri qırmızı edəcək:

CSS-də qırmızıdan başqa başqa rəng adları da var.

• Dərslik

Öz təcrübəmə əsaslanaraq səhvlər və məsləhətlər yazdım. Əgər “pis məsləhət” kimi səhvlər varsa, konstruktiv tənqidi eşitməkdən şad olaram. Yazı yeni başlayanlar üçün HTML və CSS öyrənmək üçün nəzərdə tutulub, lakin ola bilsin ki, mütəxəssislər də bu materialı oxumaqda maraqlı olacaqlar.

1. W3C Təsdiqləyicisi

Saytın HTML və CSS-ni validator.w3.org xidməti vasitəsilə yoxlamaq tövsiyə olunur. Bu xidmət kodu skan edəcək və səhvləri göstərəcək, məsələn:

• etiket bağlanmayıb;
• bağlantılarda tövsiyə edilməyən simvollar;
• Tövsiyə olunmayan etiket istifadə olunur;
• tələb olunan atribut göstərilməmişdir;
• və digər.

2. UTF-8 formatında tərtibat

Səhifəni tərtib edərkən, fayl kodlaşdırmasının təyin olunduğundan əmin olmalısınız UTF-8 (BOM yoxdur). Hər bir mətn redaktoru kodlaşdırmanı fərqli təyin edir.

UTF-8 formatında fayl qeyri-standart simvollardan (məsələn, müxtəlif dillərin simvolları, valyuta simvolları və s.) istifadə etməyə imkan verir.

Siz həmçinin brauzerlərə səhifənin UTF-8 kodlaşdırmasında açıldığını bildirməlisiniz. Bu, aşağıdakı etiket vasitəsilə edilir:

3. Bir neçə element eyni id-ə malikdir

HTML kodundakı id atributunun dəyəri təkrarlanmamalıdır.

4. Spritlər

Bir neçə kiçik şəkli bir faylda birləşdirmək tövsiyə olunur (bu fayl sprite adlanır). Bu, sayta müraciətlərin sayını azaldacaq və səhifə yükləmə sürətini artıracaq.

İndiki vaxtda spritlər əvəzinə nişanlar olan şriftlərdən istifadə etmək də məşhurdur. Bunlar. Hərflərin əvəzinə dişli nişanlar, gülüş simaları və digər nişanlar göstərilir. Buna misal olaraq Twitter Bootstrap-da istifadə edilən qlifikonları göstərmək olar.

Spritlər üçün şriftlərin üstünlükləri nişanların ölçüsünü və daha kiçik ölçüsünü dəyişdirərkən keyfiyyətin qorunmasıdır. Ancaq çatışmazlıq odur ki, bir simvolda birdən çox rəng istifadə edə bilməzsiniz.

5. Çoxlu seçicilər

Üçdən çox seçicidən istifadə etmək tövsiyə edilmir, çünki bu saytın işinə təsir edir.

/* tövsiyə edilmir, böyük yuva */ .səhifə .element .başlıq a () /* qısaldıla bilər */ .səhifə .maddə a ()
Brauzerlər CSS-i sağdan sola oxuyurlar. Bunlar. yuxarıdakı kodda əvvəlcə səhifədə olan bütün keçidlər, sonra isə .item elementinin daxilində olan keçidlər seçiləcək.

6. HTML üslubları

HTML məlumatları (mətn, şəkillər) göstərmək üçün nəzərdə tutulub. Məzmun dizaynı (ölçü, rəng, şrift dəyişikliyi) CSS-də baş verir.

Kodda səhv

Kodda səhv

7. Yanlış sinif adları

Bir çox tərtibatçılar mətni yaşıl etmək lazım gəldikdə ona .green sinfini əlavə edirlər.

Mesaj mətni

Bu səhvdir, çünki... Dizaynı dəyişdirərkən bir çox rəng dəyişə bilər, məsələn, mesaj mətni yaşıl əvəzinə mavi görünə bilər. Sonra siz .yaşıl sinfinə malik bütün teqləri axtarmalı və onu .blue ilə əvəz etməli olacaqsınız.

Mesaj mətni

Mesaj mətni

8. Kəsir qiymətlərdə piksellər

Bəzi brauzerlər pikselləri fraksiya dəyərlərində göstərməyə imkan verir, məsələn, "1,5px". Amma bu yanlışdır, çünki... Piksel bölünməz vahiddir. "1.5px" əvəzinə "1.5em" istifadə etmək daha yaxşıdır.

P ( /* səhv */ hərf aralığı: 1.5px; /* düzgün */ hərf aralığı: .005em; )

9. İdlərin yerinə siniflərdən istifadə

İd yerinə sinifə görə seçmək tövsiyə olunur, çünki id ilə seçicilər siniflərdən daha çox çəkiyə malikdir və onları ləğv etmək çətin olacaq.

#modal a ( rəng: mavi; ) /* aşağıdakı rəngi əvəz etmək olmaz, çünki #modal siniflərdən daha çox çəkiyə malikdir */ .modal-başlıq a ( rəng: #333; ) /* bu halda #modal */ #modal .modal-başlıq a ( rəng: #333; ) əlavə etməli olacaqsınız.
İstifadəsi də tövsiyə edilmir!vacibdir, çünki onun çəkisi id atributundan daha yüksəkdir və onu ləğv etmək də çətin olacaq.

10. Menyu

Menyu siyahı kimi formatlaşdırılmalıdır.

Əsas Xəbərlər Şirkət haqqında

• ev
• Xəbərlər
• Şirkət haqqında

11. Şəkillər üçün alt işarə yoxdur

Alt atribut teqlərdə göstərilməlidir (boş ola bilər).

12. Etiketlər

Hər səhifədə hər etiketdə yalnız bir başlıq olmalıdır

. Əsasən, bu teq səhifənin başlığını ehtiva edir.

13. Transkripsiya

Bütün elementlərin adları ingiliscə tərcümədə yazılmalıdır. Bir sözün ingilis dilində necə yazılışını bilmirsinizsə belə, onu tərcümə edə biləcək bir çox pulsuz xidmətlər var. Elementlərin adları transkripsiyada görünəndə qeyri-peşəkar görünür.

/* səhv */ .tovar () .stranica () .zapros () /* düzgün */ .məhsul () .səhifə () .sorğu ()

14. Clearfix

Cəld düzəliş haqqında qısaca yazmaq çətindir, amma qeyd edəcəm ki, mənim fikrimcə, bir çox tərtibatçılar səhv edirlər.

class.clearfix ana teqdə göstərilməlidir və onun yanında yerləşdirilməməlidir.

15. HTML - proqramlaşdırma dili

HTML ilə yeni tanış olan bəzi insanlar HTML-nin proqramlaşdırma dili olduğunu düşünürlər. Əslində, HTML proqramlaşdırma dili deyil, onu Microsoft Word ilə müqayisə etmək olar. Məsələn, mətni qalın etmək üçün Word-də düyməni sıxmaq, HTML-də isə kodu yazmaq lazımdır. Bunlar. HTML sadəcə mətn, şəkillər, cədvəllər və digər elementləri əlavə edən bir vasitədir.

Məndə bu html var:

Ayrılıq necə şirin bir kədərdir!- Bill Rattleandrollspeer

Və bu css (Site.css-in sonuna əlavə olunub):

Fancify (şrift ölçüsü: 1.5em; şrift çəkisi: 800; şrift ailəsi: Consolas, "Segoe UI", Calibri, sans-serif; şrift üslubu: kursiv; )

Beləliklə, mən sitatın ("Ayrılıq belə şirin kədərdir!") kursivlə və sitat adından (Bill Rattleandrollspeer) fərqli şriftdə olmasını gözləyərdim, çünki onun span teqində "fancify" sinfi var. Sinfi görmək vacibdir, çünki onun içində görünən fayl Site.css faylından istifadə edən tərtibat faylına istinad edir.

Mən indi hansı yeniyetmə səhvini edirəm?

YENİLƏNİB

Düşündüm ki, problem bu faylda bu bölmədən sonra Site.css-ə yeni sinif əlavə etməyimdir:

/******************** * Mobil Üslublar * *********************/ @media yalnız ekran və (maksimum en: 850px) (

Amma mən onu yuxarı qaldırdım və o, hələ də işləmir və F12 | vasitəsilə görünmür Müvafiq etiket üçün elementi yoxlayın.

YENİLƏNİB 2

HTML necə gedir:

Ayrılıq necə şirin bir kədərdir!

Site.css-də mənim css qaydam budur:

P span etiketi .fancify ( şrift ölçüsü: 1.5em; şrift çəkisi: 800; şrift ailəsi: Consolas, "Segoe UI", Calibri, sans-serif; şrift üslubu: kursiv; ekran: inline; )

Amma tanınmır. Mən bunu css/html protokolunun icrası hesab edirəm və bir növ dünya orqanı tərəfindən həll edilməlidir. Yenə də ola bilsin ki, mən bir axmaq səhv etmişəm.