قبلنا یه سری پست نوشته بودم که توشون به یه سری نکتهی خیلی ساده از طراحی وب و عمومن سیاساس اشاره کردم که قصد دارم تو این پست یهکوچولو پام رو فراتر بذارم و بردرها (حاشیهها) داخله سیاساس رو بهطور ِ نسبتن کاملی توضیح بدم.
یک)انواع بردرها از نظر استایل
dotted: به این صورت نمایش داده میشه.
dashed: به شکل حاشیههای بافاصله از هم نمایش داده میشه.
solid: به صورت حاشیه ِ یک پارچه نمایش داده میشه.
double:به صورت حاشیه ِ دوبل و یکپارچه نمایش داده میشه.
groove: بهصورت ِ سهبعدی نمایش داده میشه که بستگی به رنگ ِ خط هم داره.
ridge: صورت ِ دیگهای از نمایش سهبعدی.
inset: صورت ِ دیگهای از نمایش سهبعدی.
outset: صورت ِ دیگهای از نمایش سهبعدی.
هر کدوم از این حاشیهها باید از دستور ِ متفاوتی استفاده کرد که به شکل زیر انجام میشه:
border:width/ border name/ color;
به عنوان مثال کد ِ زیر نمونه حاشیه سوم رو نمایش میده:
border:1px dashed #000;
دو) کنترل کامل بردرها
همونطور که احتمالن متوجه شدهاید خطی که ما با توجه به دستورهای بالا در سیاساس تولید میکنیم بهصورت ِ یکسان اعمال میشه.ولی درصورتی که ما بخوایم که در هر بُعد از یک نوع حاشیه استفاده کنیم چاره چیه؟
برای اینکار باید ابتدا دستور ِ زیر رو برای بلاک ِ خودمون بنویسیم:
border:width/ color;
که همونطور که متوجه شدید شکل ِ خط رو از دستور حذف کردیم.حالا ما تعریف کردیم که حاشیهمون باید چه عرض و چه رنگی داشته باشه و تنها میمونه مشخص کردن ِ نوع حاشیهای که میخوایم برای هر بعد از یک نوع ِ خاص استفاده کنیم.پس اونرو هم تعریف میکنیم:
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
که مثالش همچین چیزی میشه:
برای راست و چپ و همچنین پایین و بالا میتونیم از خطهای مختلفی استفاده کنیم.
و البته شما مطمئنن از هر نوع خطی که میخواید میتونید بهجای dotted و solid استفاده کنید.
نکات ساده:
۱-منظور از width در این مطلب عرض ِ خطهاست که با پیکسل و عدد مشخص میشه (مثال: ۱۰px)
2-منظور از color در این مطلب کد یا نام ِ رنگ ِ مورد نظر برای خطهاست (مثال: black یا #۰۰۰).
در صورتی که میخواید مطالب ِ بیشتری درباره بردرها در سیاساس یاد بگیرید یه سر به اینجا بزنید.
پ.ن: اگه اشکال و مشکلی در متن هست ممنون میشم تو کامنتا بهم بگید :)
