CSS təsvir üslubları

CSS təsvirləri yalnız bir sərhəddən çoxdur

CSS anahat təsviri çaşdırıcı bir xüsusiyyətdir. Bu barədə ilk dəfə məlumat aldığınız zaman sərhəd mülkiyyətindən necə uzaqdan fərqləndiyini anlamaq çətindir. W3C , aşağıdakı fərqləri olduğu kimi izah edir:

Xülasə yer tutmur

Bu bəyanat, öz içində və başı qarışıqdır. Web səhifəmizdə bir obyekt Veb səhifəsində yer tuta bilməz? Ancaq veb səhifənizin bir soğan kimi olduğunu düşünsəniz, səhifədəki hər bir maddə başqa bir maddənin üstündə qatlanmış ola bilər. Anahat obyekti həmişə elementin qutusunun üstünə yerləşdirilir, çünki yer tutmur.

Bir element ətrafındakı bir kontur yerləşdirildikdə, bu elementin səhifə üzərində necə yerləşdirilməsinə heç bir təsiri yoxdur. Elementin ölçüsünü və ya mövqeyini dəyişmir. Bir elementə təsvir etsəniz, həmin elementin bir xəttinə malik olmadığı kimi eyni məbləğdə yer tutur. Bu sərhədi doğrudur. Elementə olan sərhəd elementin kənarındakı eninə və yüksəkliyinə əlavə olunur. Beləliklə, 50 piksel genişliğinde, 2 piksellik bir sərhəddə bir şəkil varsa, o 54 piksel (hər tərəfdən sərhəd üçün 2 piksel) olardı. 2-pikselli konturla eyni şəkil səhifənizdə yalnız 50 piksellik genişlik olardı, anahat görüntünün kənar kənarında göstərilir.

Qeyri-Rectangular ola bilər

Siz düşünməyə başlamadan əvvəl "sərin, indi mən dəvələr çəkə bilərəm!" Yenidən düşün. Bu bəyanat sizin düşündüyünüzdən fərqli bir məna daşıyır. Bir elementə bir sərhəd qoyduğunuzda, brauzer bir elementi birbaşa dikdörtgen qutu kimi şərh edir. Qutu bir neçə xətt üzrə bölünürsə, brauzer yalnız kənarlarını açır, çünki qutusunu bağlamaz. Brauzer sərhədi bir sərhəd üçün kifayət qədər geniş bir sərhəd görən bir sanki bir davamlı dikdörtgen kimi görünür.

Əksinə, təsvir obyekti nəzərə alınır. Öyrənilmiş bir element bir neçə xətti əhatə edirsə, kontur xəttin sonunda bağlanır və növbəti xəttdə yenidən açılır. Mümkünsə, kontur düzbucaqlı bir forma meydana gətirərək, tam olaraq bağlı qalacaqdır.

Çərçivə əmlakının istifadəsi

Anahat xüsusiyyətinin ən yaxşı istifadə şərtlərindən biri, axtarış şərtlərini vurğulamaqdır. Bir çox sayt bunu fon rəngli edir, ancaq siz də təsvir xüsusiyyətindən istifadə edə bilərsiniz və səhifələrinizdə hər hansı əlavə aralıq əlavə etməkdən narahat olmaya bilərsiniz.

Anahat rəngli təsvir anlayış rəngini cari fonun tərsinə çevirən "invert" termini qəbul edir. Bu, hansı rənglərin istifadə edildiyini bilməməyə ehtiyac olmadan dinamik Web səhifələrində elementləri qeyd etməyə imkan verir.

Əlaqədar linklər ətrafında nöqtəli xəttini aradan qaldırmaq üçün anahat xüsusiyyətindən istifadə edə bilərsiniz. CSS-Tricks-dən verilən bu məqalə nöqtəli anahatın necə çıxarılacağını göstərir.