CSS-i səhifələrə əlavə etmə üsulları

1- Kod içində (In-line)
Birbaşa olaraq HTML elementin içində style xüsusiyyətindən istifadə edərək tətbiq etmək.
<div style="color:red">Yoxlama üçün yazı</div>
Bütün CSS əmrlərini kodların içinə birbaşa yazmaq elə də məsləhət görülən kodlaşdırma forması deyil. Ancaq xüsusi vəziyyətlərdə istifadə edilə bilər.
 
2- style elementi istifadə edərək
<head> hissəsində <style> elementi içində CSS kodumuzu yazaraq tətbiq etmək.
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>CSS-i səhifələrə əlavə etmə üsulları</title> 
<style type="text/css"> 
div{
    color:red;
}
</style>
</head>
Birinci üsula görə üstünlüyü HTML kod ilə CSS-in bir-birindən ayrılmış olmasıdır.
 
3- Xarici Stil şablonu istifadəsi
Bu metodda CSS kodlarımzı .css formatlı bir fayla yazırıq. Məsələn: numune.css
p { 
    color: red; 
}

a { 
    color: blue; 
}
Ardınca bu kodu lazım olan səhifələrimizə tətbiq edirik.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-i səhifələrə əlavə etmə üsulları</title>
<link rel="stylesheet" type="text/css" href="numune.css">
</head>
Bu üsulun digərlərinə görə ən böyük üstünlüyü bir dəfə yazılan kodun lazım olan bütün səhifələrə əlavə oluna bilməsidir. Beləliklə xaricdən əlavə olunan css kodu bir dəfə yükləndikdən sonra digər istifadə etdiyimiz səhifələrdə yenidən yüklənmir, bu da öz növbəsində bizə sürət qazandıracaqdır.
 
4- @import ilə əlavə etmək
Tətbiqi 3-cü üsula bənzərdir.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-i səhifələrə əlavə etmə üsulları</title>
<style type="text/css"> 
@import "mehsullar.css"; 
</style>
</head>
Bu üsulla əlavə olunan xarici css faylı lap köhnə veb brazuerlər tərəfindən dəstəklənməyəcəkdir

@import ilə əlavə olunan kod veb brazuerlər tərəfindən link ilə əlavə olunan kodlaşdırmadan daha tez oxunur .

Nəticə olaraq burada CSS-in 4 cür əlavə olunma üsulunu gördük, ancaq bu metodlardan dördüncüsü üstünlükləri baxımından təklif edilən bir üsuldur.

Eyni zamanda məzmunu böyük olan saytlarda css kodunun hissələrə ayrılması və istifadə edilən səhifədə hansı hissələr lazımlıdırsa onların import edilməsi məsləhət görülür. Bununla eyni zamanda kodlarda dəyişiklik etmək istəyəndə də asanlıq yaranır.
 
Məsələn: məhsullar bölməsi üçün bir css faylı yaradaq, sonra hissələrə ayırdığımız css kodlarının məhsullara lazım olanlarını mehsullar.css içinə əlavə edək. Qalan kodları isə uyğun css fayllarına bölək.
@import url(/css/struktur.css); 
@import url(/css/sriftler.css); 
@import url(/css/rengler.css); 
@import url(/css/mehsullarucun.css);
CSS3