Menü Kapat

CSS-ə başlamazdan əvvəl CSS-in nə olduğunu bilməyimiz vacibdir. CSS bizim yazdığımız HTML yazılarına gözəllik vermək üçün istifadə etdiyimiz bir proqram növüdür. Gəlin bir neçə nümunə ilə tanış olaq:

Burada quruluşa nəzər yetirsək belə bir qaydanı nəzərə almalıyıq: CSS kodlarını yazmazdan əvvəl selector dediyimiz anlayışda CSS kodlarının tətbiq olunacağı etiketi qeyd etməliyik. Misal olaraq biz səhifədəki bütün p etiketlərinə bir CSS kodu yazmaq istəsək, p etiketini selector kimi qeyd etməliyik. Daha sonra isə fiqurlu mötərizə ( {} ) içərisinə biz CSS kodlarımız yaza bilərik. Property hissəsi əsas hissə, value hissəsi isə dəyər (miqdar) yazılacaq hissədir. Property-dən sonra : , value yəni dəyərdən sonra isə bitiş hissəsini bildirmək üçün ; ,istifadə edilir. Yuxarıdakı şəkildə də görə bilərik ki, bu səhifədəki bütün p etiketlərinə, yəni paraqraf etiketlərinə göy rəng verilmişdir və səhifədəki bütün p etiketləri göy rəng almışdır. Color yazı rəngi olduğu halda biz onun yerinə background-color yazsaq bu arxaplan rəngi olacaqdır. Biz p etiketlərinin arxaplan rəngini value hissəsində bildirərək istədiyimiz rəngi verə bilərik.
Aşağıdakı koda baxaq:

Burda yazılan kodlar sırası ilə səhifədəki bütün p etiketlərinə göy, h1 etiketlərinə qırmızı, span etiketlərinin arxaplan rəngini isə qəhvəyi edir.

CSS kodları yazı tipləri:

CSS kodlarını 3 şəkildə tanımlaya bilərik. Bunlardan ilki olan İnternal CSS ilə tanış olaq.

İnternal CSS:
CSS kodlarını yazmazdan əvvəl biz html faylının body hissəsində 1 ədəd paraqraf, yəni p etiketi yaradaq və içərisinə Paraqraf Etiketi yazaq. Daha sonra İnternal CSS yazmaq üçün head hissəsində <style> </style> etiketi quraq. Head hissəsində yaratdığımız style(stil) etiketi içərisində olan CSS kodları İnternal CSS adlanır. İndi isə əvvəl yazdığımız kodları bu etiket daxilində qeyd edək.

Səhifəni yadda saxlayıb veb brovzerdə baxdığımız zaman p etiketinin rənginin göyə dəyişdiyini görəcəyik. Belə tipli CSS İnternal CSS adlanır.

İnline CSS:

İnternal CSS-də biz p etiketi yaradaraq bütün etiketlərə müraciət edirdik. Bu cür yazı forması çox zaman əlverişli olmur. Yuxarıda yazdığımız CSS kodları müəyyən bir etiketi əhatə edirdi. Belə bir hal ortaya çıxa bilər ki, səhifədə bir neçə eyni etiketin təkrarı olsun və bunlara müxtəlif CSS kodları tətbiq edilsin. Bunun üçün biz İnline CSS yazı formasından istifadə edəcəyik. Hər hansı bir etiketə (p etiketi götürək) fərqli rəng vermək istiyiriksə, bu zaman CSS kodlarını etiketinin daxilində yazacağıq. Məsələn: <p style=”color: green;”></p>.

Yadda saxlayıb və veb səhifədə baxdığımız zaman p etiketi daxilində verilmiş yazının yaşıl rəngdə olduğunu görəcəyik. Bizim kodlarımızda həm İnternal CSS, həm də İnline CSS varsa, bu vaxt İnline CSS də yazdığımız kodlar daha üstün olacaqdır(üstünlük fərqi). Biz Internal CSS-də hər hansısa bir etiketi silmək istədiyimizdə onun dəyərini none olaraq qeyd etməliyik. Yuxarıdakı p etiketinin rənginin olmamasını istədiyimiz halda, <p style=”color: none;”> yazmağımız kifayətdir.

External CSS:

Yazdığımız bütün CSS kodlarının bir neçə HTML fayllarında təsirli olmağını istəyiriksə bu vaxt External CSS-dən istifadə edəcəyik. 3 Html səhifəsi yaradaq və hər birinə ad verək (Məsələn: about.html , index.html , reference.html). Hər biri üçün eyni olan style(stil) xüsusiyyətini hər biri etiketə tək-tək yazmaq bizim üçün vaxt itkisidir. Buna görə də External CSS-dən istifadə edirik. Yeni bir CSS səhifəsi açırıq (Məsələn: style.css). Html səhifələrini CSS səhifəsinə birləşdirmək üçün link atributundan head hissəsində istifadə edəcəyik. <link rel=”stylesheet” href=”style.css”>-bu yazıda href hissəsinə yaratdığımız CSS səhifəsinin adını yazırıq.

INDEX.HTML:

STYLE.CSS:

Link atributunu bütün (CSS kodlarının lazım olduğu səhifələrə) html səhifələrinə tətbiq etməliyik. Hər 3 yazı tipinin üstünlük sıralamasını qeyd edək: İnline CSS > İnternal CSS > External CSS- bu sıralamada ən üstün CSS təyin edicisi İnline CSS olacaqdır. External CSS ancaq bütün səhifələrdəki kodları ümumiləşdirmək üçün istifadə olunmur. Yazılarımızın daha səliqəli olmasını istəyiriksə hər bir səhifəyə uyğun yeni CSS səhifəsi yaratmağımız məqsədə uyğundur. (Məsələn: about.css , reference.css , index.css və s.).