Stil Sınıfları ve Kimlikleri Kullanma

Dərs və ID'lər CSS-ni genişləndirməyə kömək edir

Bugünkü Web-də veb-saytların yaradılması CSS-nin (Cascading Style Sheets) dərin anlayışını tələb edir. Bunlar brauzer pəncərəsində yerləşdirmənin müəyyənləşdirilməsi üçün bir veb sayt verdiyiniz təlimatlardır. Veb səhifəmizin görünüşünü və hissini yaradan HTML sənədinizə bir sıra "üslub" tətbiq edirsiz.

Bir sənəddə yuxarıda göstərilən üslubları tətbiq etmək üçün bir çox yol var, lakin çox vaxt bir sənəddə yalnız elementlərdən bəzilərinə bir stil istifadə etmək istəyir, lakin bu elementin bütün nümunələri deyil.

Bir sənəddə bir neçə elementə müraciət edə biləcəyiniz stil yaratmaq istəyə bilərsiniz, hər bir nümunə üçün stil qaydasını təkrarlamaq lazım deyil. Bu istənilən üslublara nail olmaq üçün sinif və ID HTML xüsusiyyətlərini istifadə edəcəksiniz. Bu atributlar demək olar ki, hər bir HTML etiketinə tətbiq oluna bilən qlobal xüsusiyyətlərdir .Bu, bölmələr, paraqraflar, əlaqələr, siyahılarınızı və ya sənədinizdə digər HTML parçaların bəzilərini tərtib edirsinizsə, Bu vəzifəni yerinə yetirməkdə sizə yardım!

Class Seçicilər

Sinif seçicisi bir neçə element üzərində bir elementə və ya etiketə bir neçə üslub qoymağa imkan verir. Məsələn, mətnin müəyyən hissələrinə sənəddə qalan mətndən fərqli rəngdə səslənmək isteyebilirsiniz. Bu vurğulanmış bölmələr səhifədə yerləşdiyiniz bir "xəbərdarlıq" ola bilər. Aşağıdakı kimi dərslərinizi təyin edə bilərsiniz:

p {color: # 0000ff; }
p.alert {color: # ff0000; }

Bu üslublar bütün paraqrafların rəngini mavi (# 0000ff) rənginə düzəldər, lakin "alert" in sinif xüsusiyyətinə malik hər hansı bir paraqraf əvəzinə qırmızı rəngli (# ff0000). Sinif özniteliğinin yalnız bir etiket seçicisini istifadə edən ilk CSS qaydasından daha yüksək spesifikliyə malik olmasıdır.

CSS ilə işləyərkən, daha konkret bir qayda daha az spesifik olanı ləğv edəcəkdir. Beləliklə, bu nümunədə, daha ümumi qayda bütün paraqrafların rəngini müəyyənləşdirir, lakin yalnız bəzi paraqraflarda yerləşdirməyi qadağan edən ikinci, daha xüsusi qayda.

Bəzi HTML formatlarında bu necə istifadə edilə bilər:

Bu paraqraf səhifə üçün default olan mavi göstərilir.

Bu paraqraf da mavi olardı.

Sinif özniteliği element seçici stilindən standart mavi rəngin üzərində yazılacağı üçün bu paraqraf qırmızı göstərilir.

Bu misalda, "p.alert" in üslubu yalnız "alert" sinifini istifadə edən bənd elementlərinə tətbiq ediləcək. Əgər bu klassı bir neçə HTML elementindən istifadə etmək istəyirsinizsə, sadəcə HTML elementini stil çağırışı (yalnız müddətin (.) yerindən əmin olun), bu kimi:

.alert {fon-rəng: # ff0000;}

Bu sinif indi ehtiyacı olan hər hansı elementə təqdim olunur. "Uyarı" nın sinfi öznitelik dəyərinə malik olan HTML-lərin hər hansı bir forması bu stilə qovuşacaq. Aşağıdakı HTML-də biz "xəbərdarlıq" sinfi istifadə edən hər iki paraqrafa və bir başlıq səviyyəsinə sahibik. Hər ikisi də göstərdiyimiz CSS-lərə əsaslanan qırmızı-rəngli rəng olacaqdı.

Bu paraqraf qırmızı rəngdə yazılacaq.

Və bu h2 də qırmızı olardı.

Bu gün veb-saytlarda sinif xüsusiyyətləri tez-tez elementlər üzərində istifadə olunur, çünki onlar kimliklərin bir spesifiklik baxımından işləməsi daha asandır. Ən həqiqi HTML səhifələrini tapacaqsınız, bəziləri sənəddə bir neçə dəfə təkrarlanır və yalnız bir dəfə görünə biləcək başqaları ilə tanış olacaqsınız.

ID Seçiciləri

ID seçicisi bir etiket və ya digər HTML elementi ilə əlaqələndirmədən müəyyən bir üsluba ad vermək imkanı verir. Bir hadisə haqqında informasiyanı ehtiva edən HTML formatında bir bölməiniz olduğunu söylə.

Bu bölməni "hadisə" adına bir ID atributu verə bilərdiniz, onda bu bölməni 1 piksellik geniş qara sərhəd ilə xarakterizə etmək istəyirsinizsə, bu kimi bir ID kodu yaza bilərsiniz:

#event {border: 1px solid # 000; }

ID seçicilərlə problem bir HTML sənədində təkrarlana bilməz. Onlar unikal olmalıdır (sitenizin birdən çox səhifəsində eyni ID istifadə edə bilərsiniz, lakin hər bir HTML sənədində yalnız bir dəfə). Belə ki, bütün bu sərhədi lazım olan 3 hadisəyə malik olsanız, onlara "hadisə1", "hadisə2" və "hadisə3" və hər birinin üslubu verilmişdir. Buna görə də, "hadisə" sözügedən sinif xüsusiyyətini istifadə etmək və onları bütünlüklə birləşdirmək daha asan olardı.

ID öznitelikleriyle olan başqa bir problem, sınıf niteliklerine kıyasla daha yüksek bir spesifikiteye sahip olmasıdır. Bu, əvvəlcədən müəyyən edilmiş bir stilin ləğv edilməsi üçün CSS-yə ehtiyacınız varsa, ID'lərə çox ağırlıq verdiyiniz təqdirdə bunu etmək çətin ola bilər. Bu səbəbdən bir çox web developers, yalnız bu dəyərdən bir dəfə istifadə etmək niyyətində olsalar da, demək olar ki, bütün üslublar üçün daha az xüsusi sinif xüsusiyyətlərinə çevrilmiş olsalar da, markalanmasında identifikatorlar istifadə etməkdən uzaqlaşdılar.

Kimlik atributlarının oyuna daxil olduğu bir sahə, səhifə çapa keçidləri olan bir səhifə yaratmaq istədiyiniz zaman. Məsələn, paralaks stiliniz varsa, həmin səhifənin müxtəlif hissələrinə "sıçrayış" edən bir səhifədə olan bütün məzmunu ehtiva edən bir veb səhifəsi var. Bu, bu bağlama bağlantılarını istifadə edən ID öznitelikleri ve metin bağlantıları kullanılarak yapılır.

Siz sadəcə bu simvolun əvvəlcədən göstərdiyi xüsusiyyətin link kimi href xassəsinə əlavə edərsiniz:

Bu linkdir

Tıklanınca ya da toxunduğunuzda, bu link, bu ID özniteliği olan sayfanın bir bölümüne atlayacaktır. Sayfada heç bir element bu ID dəyərini istifadə etməsə, link heç bir şey etməyəcəkdir.