CSS | Border
CSS-də border parametri bir teqin ətraf sərhədlərinə vizual görüntü vermək üçün istifadə edilir. Border parametrinin köməyi ilə teqin sərhədlərini rəngli, əyimli, qırıq-qırıq, qalın və ya nazik xəttlə təsvir edə bilərik. Border veb səhifəyə hər hansısa bir sütunun digər sütunlardan fərqlənməsi üçün də istifadə edilə bilər.
CSS-də hər bir parametr müxtəlif dəyərlər aldığı kimi “border” parametri də müxtəlif cür dəyərlər alır. Bu dəyərlər iki növdə border parametrinə verilə bilər.
- Ardıcıl
- Ayrı-ayrılıqda
<div> teqinə verilmiş “borderClass” klası vasitəsi ilə teqə border parametrini verək.
ayrı-ayrılıqda verilən dəyərlərə nümunə olaraq:
border-width — teqin sərhədinin qalınlığını bildirir.
border-style — teqin sərhədinin stilini bildirir.
border-color — teqin sərhədinin rəngini bildirir.
Ard-arda verilən dəyərlərə misal olaraq, nümunə.
Göründüyü kimi üç sətirdə yazılan kodu bir sətirdə asanlıqla yazmaq mümkündür. Bu səbəbdən dəyərlərin parametrlərə ard-arda verilməsi kodun sadəliyi baxımından daha yaxşıdır.
Yuxarıdakı hər iki nümunənin nəticəsi eyni olacaq. Nəticə:
Aşağıda border-in stillərinə nümunələr verilib.
Yuxarıdakı nümunədə “border: 3px solid red;” ilə teqin sərhədinə stil vermişdik. Burada biz solid yerinə dashed yəni “border: 3px dashed red;” stilini yazmış olsaydıq onda nəticə aşağıdakı kimi olardı.
Teqin kənar sərhədlərindən birini silmək üçün “none” dəyərindən istifadə edə bilərik. Məsələn sağ tərəfdən sərhədi silək. Nümunə:
Kodun vizual nəticəsi:
Eynilə bu üsulla rəngini, stilini və ölçüsünü də dəyişə bilərik.
· border-right-color: blue; — sağ tərəfin rəngini maviyə dəyişir,
· border-left-style: dotted; — sol tərəfin stilini dəyişir,
· border-bottom-width; — alt tərəfin ölçüsünü dəyişir.
Border-radius parametri ilə sərhədlərin künclərini müxtəlif ölçüdə yuvarlaqlaşdıra bilərik. Burada ölçünü həm px ilə, həm də faiz ilə vermək olar.
Məsələn aşağıdakı nümunəyə baxaq:
Burada teqin kənar sərhədlərini 20px ölçüsündə yuvarlaqlaşdırdıq. Vizual nəticə aşağıdakı kimi olacaq:
Əgər biz tam bir dairə almaq istəsək onda teqin ölçülərinin 4 tərəfini eyni ölçüyə salırıq, məsələn 200px. Border-radius isə 50% verdikdə tam bir dairə almış olarıq.
Yuxarıdakı kodun vizual nəticəsi aşağıdakı kimi olacaq.
Əgər biz kvadartın yalnız iki tərəfini, məsələn sağ yuxarı və sol aşağı künclərini yuvarlaqlaşdırmaq istəsək o zaman kodumuzu bu cür yazmalı olardıq.
Birinci ölçü yəni 0 yuxarı və aşağını, ikinci yəni 50% sol və sağı bildirir.
Kodun vizual nəticəsi:
Biz bu yolla teqin hər küncünü müxtəlif ölçüdə yuvarlaqlaşdıra bilərik.
Ölçülər sıra ilə yuxarı, sağ, aşağı, sol formasında verilir.
Kodun vizual nəticəsi:
Faydalı mənbələr
BUTA.İO komandasının yazarı : Alim Babazadə
