Kompüterlər, Proqramlaşdırma
CSS, pseudo-class, pseudo-element: hover, uşaq, hədəf
HTML və CSS-ni birləşdirərək, bir web səhifəsinin bütün elementlərini tamamilə idarə edə bilərsiniz. Üslublar ilə hər hansı bir blokun və ya xəttin görünüşünü asanlıqla dəyişə bilərsiniz. Çoğunlukla bir kodlayıcı daha kompleks bir görevi yerine getirmek - elementin kendisinin değil, onun bir parçasını ya da müəyyən bir durumunu dəyişdirmək lazımdır. Bu halda, CSS pseudo-sinfləri xilasetmə üçün gəlir.
Yalançı dərslər, düzəlişdə normal siniflər kimi eyni prinsipdə işləyirlər, lakin onlar fiziki olaraq səhifədə yoxdur. Onların köməyi ilə sənəddə olmayan və adi seçici ilə seçilə bilməyən məlumatlara əsasən maddələr seçə bilərsiniz. Burada sadə bir nümunə var: qırmızı bir düymən var və onu hover etdiyiniz zaman mavi döndərmək istəyirsən. Teorik olaraq JavaScript-də tətbiq oluna bilər, amma nə üçün belə bir mürəkkəblikdir? Daha çox istifadə etmək rahatdır : hover CSS. Onun köməyi ilə vahidə yalnız siçan imlecini atdığınız zaman işləyəcək parametrlər verə bilərsiniz.
CSS pseudo-class siyahısı müntəzəm olaraq yenilənir. Yəqin ki, bu materialı oxuyarkən bir neçə yeni görünəcək. Birincisi, CSS3 spesifikasiyasında ortaya çıxanlara nəzər salaq.
Nth-of-tipi
Məsələn, qırmızı rəngdə yazılacaq və ikinci xətt mavi, üçüncü qırmızı, dördüncüsü isə yenidən mavi olacaq, rənglərin dəyişilməsini istifadə etmək istədiyiniz bir siyahı olduğunu varsayalım. Əvvəllər bunun üçün yeni dərslər yaratmaq məcburiyyətində oldunuz. Keçmiş makamların siyahısı hər bir elementini sinifə əlavə etdi və sonra görünüşünü stil səhifəsində dəyişdi. Layihə çox rahat və çirklənmədi.
İndi hər şey daha asandır. CSS pseudo sinfini istifadə edin: nth-of-tipi. Bu, markajda heç bir şey dəyişmədən zəruri vizual təsiri əldə etmək imkanı verəcəkdir. Əməliyyat prinsipi sadədir: bir seçiciyi və adından sonra parantezdə, lazımi elementləri tapacaq bir formul və ya söz yazmaq. Məsələn: nth-of-tipi (hətta) bütün elementləri tapır və: nth-of-tipi (odd) - tək. Ən doğru nəzarət üçün istifadə olunan çox sayda formul var. Parantezlərdə bir sıra göstərə bilərsiniz - bu halda üslub indeksi bu rəqəmə bərabər olan elementə tətbiq olunacaq.
Nth-uşaq
Bu CSS pseudo-klassı əvvəlki kimi bənzəyir, ancaq seçilən elementin uşaqları ilə yalnız işləyir. Məsələn, siyahıda
Dəqiq nəzarət üçün formulalar istifadə edilə bilər. Onlar bir başlanğıc üçün olduqca çətindir, ancaq sözlərin sintaksisinə bir az qazma dəyər, şeylər daha asan olsun. Formulalar bu kimi görünür: a + b, burada a bir çoxluq təşkil edir və b bir offsetdir. Məsələn, n-yəni parantezlərdə göstərsəniz, yalançı sinif bütün uşaqları seçəcəkdir (çünki a və b şəklində əlavə şərtlər göstərilmir). Əgər n + 2-ni göstərsəniz, bütün elementlər seçiləcək, birinci (istisna olmaqla iki). Bu anı praktikada öyrənmək yaxşıdır. Uşaq komponentləri və müxtəlif formullarla sınaqdan keçirin.
Sonuncu uşaq
Hər şey sadədir. CSS uşaq yalançı dərsləri müəyyən bir element seçmək üçün istifadə olunur. Bu, valideynin sonuncu uşağını seçir. Çox tez-tez istifadə olunur, məsələn, masanın sonuncu satırını seçmək və ya sonuncu sətirdən ötürülməsinin qarşısını almaq üçün çubadanı son blokdan çıxarmaq.
N-son uşaq
Hərəkət prinsipi ilə əvvəlcədən qeyd olunan nth-uşaqa bənzəyir, lakin əks istiqamətdə hərəkət edir, yəni istifadə edildikdə elementlər aşağıdan yuxarıya doğru hərəkət edir. Son bir neçə maddəni tapmaq istəyirsinizsə bu faydalıdır.
Bu sözdə dərslər və CSS pseudo-elementləri yararsızdır, çünki normal siniflərdən istifadə etməklə də məqsədə nail ola bilərsiniz. Bu belə deyil. Nth-child: nth-last-child və onların analoqları böyük layihələrdə işləyərkən çox faydalıdır - məsələn, blokun çoxlu sayda uşaqları var. Əl kursları təşkil etmək uzun və çətindir.
Dövlət idarəçiliyinin yalançı sinfləri
Bir elementin görünüşünü müəyyən bir vəziyyətdə dəyişdirmək lazımdırsa? Bu halda, mətbuat, rəhbərlik və digər tədbirlərin CSS-də saxta dərsləri verilir. Onları daha ətraflı nəzərdən keçirək.
: Link
Bu yalnız CSS-lərin bir-birindən fərqlənən, lakin yalnız hələ də ziyarət edilməmiş bir CSS-lərdir. Bununla, istifadəçi hələ keçmədiyi bu elementləri üçün üslubları müəyyən edə bilərsiniz.
: Ziyarət etdi
Əvvəlki versiyonun analoqu, artıq yalnız ziyarət edilən bağlantıları idarə edir. Bu iki sözdə dərsləri birləşdirərək, onlara lazım olduğunuz kimi teqlərin görünüşünü dəyişə bilərsiniz. Lakin, dövlətlərin müəyyən brauzerlər üçün hesablanmış olduğunu və tarixi təmizlədikdən sonra sıfırlanacağını qeyd edin.
Pseudo-class: hədəf CSS
Düzgün istifadə etməklə JavaScript-nin istifadəsini əvəz edən ən maraqlı yalançı dərslərdən biridir. Bu, identifikatorun səhifənin ünvan barında göstərildiyi bir elementi idarə etməyə imkan verir. Bəli, ilk dəfə başa düşmək çətindir. Bir nümunə hazırlamağa çalışaq.
Diyelim ki, müəyyən id: id1, id2, id3 olan sayfada 3 div qutu var. Həmçinin müvafiq href dəyərləri ilə üç əlaqə var: # id1, # id2, # id3. Sayfanın link çubuğundaki ilk linki tıkladığınızda, sayfanın bağlantısı müvafiq kimliği görünür.
CSS-də, bütün div blokları üçün ekran: heç əmlak göstərilməyib, yəni default olaraq göstərilmir. Hedefi istifadə edin: div və ekranını göstərin: blok xüsusiyyət. İndi müəyyən href ilə əlaqələrə vurduğunuzda, müvafiq id ilə bloklar ekrana atılacaq: blok, yəni səhifədə görünməyə başlayacaqlar! Əgər id1 ilə olan linkə vurduğunuzda və ya id ilə əlaqə qurarsanız, id1 ilə bir blok görürsünüz və s.
Hələ bir şey aydın deyil? Denemeyi cəhd edin. Yuxarıdakı biçimlendirme və üslubları olan bir səhifə yaradın. Bir neçə dəqiqə içində hər şeydə gözəl olacaqsınız.
Hər hansı bir elementə tətbiq oluna bilən yalançı dərslər
Yuxarıda təsvir edilən söz-siniflərin əksəriyyəti iş üçün lazımlı istinadlar. Ancaq hər kəs elementlərə ehtiyac duymur. Bir sıra variantlar tamamilə səhifənin hər hansı bir hissəsinə tətbiq edilə bilər.
- Aktiv: istifadəçinin sol siçan düyməsini tıkladığı elementlərin üslubu üçün nəzərdə tutulur;
- : Hover - istifadəçi kursorun keçdiyi elementlər üçün CSS;
- : Fokus - səhifənin hazırda diqqət mərkəzində olan hissələri üçün. Bu söz-klass tez-tez formaları ilə işləmək üçün istifadə olunur. Məsələn, istifadəçi adı üçün giriş simvolunu vurğulamaq istərsinizsə, qonaq kursor yerləşdirsə və simvol yazmağa başlayır.
Xatırla ki, fəal aktivə yalnız onu basdığınız zaman aktiv olur. Sol siçan düyməsini işlədəndən dərhal sonra, onunla təyin edilmiş üslublar yox olacaq və element default olaraq göstərildiyi kimi göstərilir. Çox hallarda, bu söz-sinif düymələri ilə işləmək üçün istifadə olunur. Onlara çox sayda dövlət qura bilərsiniz. Məsələn, default olaraq düyməni mavi, hovering zaman - yaşıl, basdıqda - qırmızı və s.
Əlbəttə, yalançı dərslər yalnız müasir brauzerlər tərəfindən dəstəklənir. Məsələn, IE6 və 7-də siz mərkəzdən istifadə edə bilməzsiniz və yalnız IE6-da referanslar üçün çalışır və hərəkət edirsiniz. Ümid edirəm ki, belə brauzerlər ilə işləməyinizə ehtiyac yoxdur, əgər lazım olsa, şərti şərhlərdən istifadə edin.
Əlavə pseudo-dərsləri
Yuxarıda sadalanan siyahı siyahı ilə məhdudlaşmır. Müasir CSS sayəsində yalnız daxil olan elementləri (effektiv) və ya yalnız (: aradan) söndürə bilərsiniz, yalnız onay işaretli qutuları və radio (: seçilmiş). Qısaca, biz məzmunun görünüşünü daha yaxından idarə etmək üçün istifadə edə biləcəyiniz bir neçə variantları təsvir edəcəyik.
- Yalnızca uşaq - üslubu yeganə uşaq olan elementə tətbiq etmək qabiliyyəti;
- : Lang - lang xüsusiyyətindən istifadə edərək müəyyən edilmiş bir dildə olan elementlərlə işləmək;
- Kök - kök elementini seçmək üçün istifadə olunur. Buna görə, HTML-də bu etiketidir;
- : Çox güclü bir vasitə deyil. Bu üslubun tətbiqini müəyyən seçicilərə məhdudlaşdırmağa imkan verir. Burada nümunə:. Rəngli rəng: not (span). Bu seçici, deyilsə, mavi rəngli sinfi olan bütün elementlərə üslub tətbiq edir.
Pseudo-sinflərin tam siyahısı birdən çox səhifəyə görə uzanacaq. Çox nizamlayıcılar yalnız bir qismini praktikada istifadə edərək, JavaScript istifadə edən dövlətləri idarə etməyə üstünlük verirlər. Bəli, rahatdır, lakin daha çox effektiv nəticələrə uyğun söz-sınıftan istifadə edərək asanlıqla əldə edilə biləcəyi bir sıra nöqtələr var.
Similar articles
Trending Now