CSS yaratmağın 4 yolu

Mündəricat:

CSS yaratmağın 4 yolu
CSS yaratmağın 4 yolu

Video: CSS yaratmağın 4 yolu

Video: CSS yaratmağın 4 yolu
Video: 8 ci sinif Elektron cədvəl 2024, Aprel
Anonim

Cascading Style Sheet (CSS), dizaynerlərə qruplara müəyyən elementlər ataraq eyni anda bir neçə funksiyanı idarə etməyə imkan verən veb sayt kodlaşdırma sistemidir. Məsələn, veb saytın arxa planı üçün bir kod istifadə edərək, dizaynerlər CSS faylına bir dəyişiklik etməklə veb saytın bütün səhifələrindəki fon rəngini və ya şəkli dəyişə bilərlər. Əsas veb sayt üçün CSS -in necə yaradılacağı burada.

Addımlar

4 -dən 1 -ci hissə: Daxili CSS yazmaq

CSS Adım 1 yaradın
CSS Adım 1 yaradın

Addım 1. HTML etiketləri haqqında əsas anlayışa malik olduğunuzdan əmin olun

Etiketlərin necə işlədiyini bilməlisiniz

src

href

atributlar.

CSS Adım 2 yaradın
CSS Adım 2 yaradın

Addım 2. Bəzi əsas CSS xüsusiyyətlərini öyrənin

Çox sayda əmlak olduğunu görəcəksiniz. Ancaq bunların hamısını öyrənmək lazım deyil.

  • Bəzi yaxşı CSS xüsusiyyətlərini bilmək lazımdır

    rəng

    şrift ailəsi

  • .
CSS Adım 3 yaradın
CSS Adım 3 yaradın

Addım 3. Hər bir mülkün dəyərləri haqqında məlumat əldə edin

Bütün mülklərin bir dəyərə ehtiyacı var. Üçün

rəng

mülkiyyət, məsələn, qoya bilərsiniz

qırmızı

dəyər.

CSS Adım 4 yaradın
CSS Adım 4 yaradın

Addım 4. Bu barədə məlumat əldə edin

üslub

HTML atributu.

Kimi bir element daxilində istifadə olunur

href

və ya

src

. İstifadə etmək üçün bərabər işarədən sonra dırnaq işarələrinə CSS atributunu, iki nöqtəni və sonra mülkün dəyərini qoyun. Bu CSS qaydası olaraq bilinir.

CSS Adım 5 yaradın
CSS Adım 5 yaradın

Addım 5. Daxili CSS -in ümumiyyətlə peşəkar veb tərtibatçıları tərəfindən veb saytlar üçün istifadə edilmədiyini anlayın

Daxili CSS, HTML sənədinə lazımsız qarışıqlıq əlavə edə bilər. Bununla birlikdə, CSS -in necə işlədiyini öyrənmək üçün əla bir yoldur.

4 /2 -ci hissə: Əsas CSS yazmaq

CSS Adım 6 yaradın
CSS Adım 6 yaradın

Addım 1. İstifadə etmək istədiyiniz proqramı işə salın

HTML və CSS faylları yaratmağa imkan verməlidir.

Xüsusi bir proqramınız yoxdursa, Notepad və ya başqa bir mətn redaktorundan istifadə edə bilərsiniz. Faylınızı həm mətn faylı, həm də CSS faylı olaraq qeyd edin

CSS Adım 7 yaradın
CSS Adım 7 yaradın

Addım 2. Veb saytınız üçün HTML faylını açın

Bunu bir HTML redaktoru ilə də açmalısınız, əgər quraşdırmısınızsa.

HTML redaktorları HTML və CSS -ni eyni vaxtda redaktə etməyə imkan verir

CSS Adım 8 yaradın
CSS Adım 8 yaradın

Addım 3. HTML başınızda etiket yaradın

Bu, ayrı bir fayla ehtiyac olmadan CSS yazmağa imkan verəcəkdir.

CSS Addım 9 yaradın
CSS Addım 9 yaradın

Addım 4. Stil əlavə etmək istədiyiniz elementi seçin və elementin adını yazın və ardınca bir sıra buruq mötərizələr ({}) yazın

Kodunuzu daha oxunaqlı etmək üçün hər zaman ikinci qıvrım kəməri öz xəttinə qoyun.

CSS Adım 10 yaradın
CSS Adım 10 yaradın

Addım 5. Mötərizələrin arasına CSS qaydalarınızı istifadə etdiyiniz kimi yazın

üslub

atribut.

Hər sətir nöqtəli vergüllə (;) bitməlidir. Kodunuzun oxunaqlı olması üçün hər bir qayda öz sətrindən başlamalı və hər sətir girintili olmalıdır.

Bu üslubun səhifədə seçilmiş növün bütün elementlərinə təsir edəcəyini qeyd etmək çox vacibdir. Növbəti hissədə daha konkret üslublar müzakirə olunacaq

4 -dən 3 -cü hissə: Daha Ətraflı CSS

CSS Addım 11 yaradın
CSS Addım 11 yaradın

Addım 1. HTML faylı deyil, CSS faylı yaradın və

.css

uzadılması.

HTML faylınızı da açın.

CSS Addım 12 yaradın
CSS Addım 12 yaradın

Addım 2. HTML başınızda bir etiket yaradın

Bu, ayrı bir CSS faylını HTML sənədinizə bağlamağa imkan verəcəkdir. Bağlantı etiketinizin üç xüsusiyyətə ehtiyacı var:

rel

növü

href

  • rel

    "əlaqələr" deməkdir və brauzerə HTML sənədi ilə əlaqənin nə olduğunu bildirir. Burada bir dəyər olmalıdır

    "üslub cədvəli"

  • .
  • növü

    hansı medianın əlaqəli olduğunu bildirir. Burada bir dəyər olmalıdır

    "mətn/css"

  • href

  • burada bir elementdə necə istifadə edildiyinə bənzər şəkildə istifadə olunur, ancaq burada bir CSS faylına keçid edilməlidir. CSS faylı HTML faylı ilə eyni qovluqda yerləşirsə, yalnız fayl adının tırnak işarələri daxilində yazılması lazımdır.
CSS Addım 13 yaradın
CSS Addım 13 yaradın

Addım 3. Eyni üslubu əlavə etmək istədiyiniz müxtəlif növ elementləri seçin

A əlavə edin

sinif

bu elementlərə aid edin və onları seçdiyiniz sinif adına bərabər təyin edin. Bu, elementlərinizə eyni üslubu verəcəkdir.

CSS Addım 14 yaradın
CSS Addım 14 yaradın

Addım 4. Bir sinifin hansı üslubu alacağını təyin edin

Sinif adını CSS faylınıza əvvəlindən nöqtə (.) Qoyun (yəni.

.sınıf

).

CSS Addım 15 yaradın
CSS Addım 15 yaradın

Addım 5. Xüsusi üslub əlavə etmək istədiyiniz tək elementləri seçin və əlavə edin

id

atribut.

Id -lər CSS -də nöqtə yox, funt simvolu (#) istifadə edərək yaradılır.

Id -lər siniflərdən daha spesifikdir, buna görə də id, sinifdən fərqli bir dəyəri olan bir atributu varsa, hər hansı bir sinif üslubunu ləğv edəcək

4 -dən 4 -cü hissə: Daha çox məlumat

CSS Adım 16 yaradın
CSS Adım 16 yaradın

Addım 1. w3 məktəblərini ziyarət edin

Veb inkişaf etdirmə bacarıqlarını öyrətmək məqsədi daşıyan rəsmi bir veb saytdır. W3 -də HTML və CSS, eləcə də digər veb dillər üçün çoxlu istinadlar var.

CSS Addım 17 yaradın
CSS Addım 17 yaradın

Addım 2. Xüsusilə HTML və CSS öyrənmək və öyrətmək məqsədi daşıyan digər saytları tapın

CSS tricks.com kimi saytlar xüsusi olaraq CSS və veb dizayn bacarıqlarını öyrətmək məqsədi daşıyır. Nüfuzlu mənbələr tapmaq öyrənmə səyahətinizdə sizə kömək edəcək.

CSS Addım 18 yaradın
CSS Addım 18 yaradın

Addım 3. Veb dizaynerləri və inkişaf etdiriciləri ilə əlaqə saxlayın

Onların təcrübəsi və bilikləri sizə dəyərli bilik və bacarıqlar öyrədə bilər.

CSS Addım 19 yaradın
CSS Addım 19 yaradın

Addım 4. Qarşılaşdığınız veb saytların mənbə koduna baxın

Yaxşı inkişaf etmiş veb saytların CSS-lərinə baxmaq sizə veb saytların hissələrini dizayn etməyin yollarını göstərə bilər. Təcrübə olaraq kopyalayıb kodla məşğul olmaq, fərqli CSS xüsusiyyətlərini necə istifadə edəcəyinizi öyrənməyə kömək edə bilər.

Tövsiyə: