در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم.
نکته ای که احتمالا در مورد ویژگی border نمی‌دانیم
اگه دقت کنید ما زیاد از ویژگی border در طراحی هامون استفاده میکنیم. بیشتر مواقع برای قرار دادن یک border بصورت زیر عمل میکنیم:
.example {
border: solid 1px black;
}
میبینید که برای ویژگی border، سه مقدار رو قرار میدیم و اولین مقدار توپر بودن اون رو مشخص میکنه و با استفاده از 1 پیکسل هم ضخامت رو مشخص کردیم. با استفاده از مقدار آخر هم رنگ border رو مشخص کردیم.
همونطور که دیدید برای ویژگی border خلاصه نویسی انجام دادیم و بصورت همزمان سه ویژگی border-style و border-width و border-color رو مشخص کردیم. فراموش نکنید که هر کدوم از این ویژگی هایی که با استفاده از border اونا رو مشخص کردیم، خودشون خلاصه نویسی شده هستن. مثلا کد بالا رو اگر ببینید، border-width رو درون اون برابر با 1 پیکسل قرار دادیم. پس اگر بخایم اون رو بصورت جداگانه تعریف کنیم، میبینیم، بصورت زیر خواهد بود:
.example {
border-width: 1px 1px 1px 1px;
}
پس دیدید زمانی که میگیم border-width برابر با 1 پیکسل هست یعنی border بالا و پایین و چپ و راست اون المنت برابر با 1 پیکسل هست. اگر بخوایم میتونیم border طرفین رو برابر با هم قرار ندیم. بصورت زیر:
.example {
border-width: 2px 5px 1px 0;
}
با این کار مقادیر border-width برای بالا، راست، پایین و چپ رو متفاوت مشخص کردیم. این موارد برای ویژگی‌های border-style و border-color هم بهمین صورت هست و میتونیم برای طرفین مختلف، رنگ و استایل border رو متفاوت قرار بدیم. نمونه زیر رو در نظر بگیرید: دیدید که استایل، رنگ و ضخامت borderهای طرفین رو متفاوت قرار دادیم. همچنین میتونیم borderها رو بصورت دقیقتری مشخص کنیم. مثلا برای مشخص کردن استایل border سمت چپ، ویژگی border-left-style و برای مشخص کردن رنگ border بالا، ویژگی border-top-color رو مقداردهی میکنیم. پس همونطور که دیدید درون ویژگی border، مقادیر رو بصورت سه بار خلاصه نویسی شده قرار دادیم و با استفاده از ویژگی border نمیتونیم برای طرفین، استایل رو متفاوت قرار بدیم.
در جلسات بعدی با ادامه نکات در خدمتتون هستیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق و پیروز باشید.
یا علی
اولین دیدگاه این پست رو تو بنویس !