نکاتی کاربردی در مورد CSS (جلسه 5) : ویژگی border

- visibility ۰ mode_comment

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم. css-style

نکته ای که احتمالا در مورد ویژگی border نمی دانیم

اگه دقت کنید ما زیاد از ویژگی border در طراحی هامون استفاده میکنیم. بیشتر مواقع برای قرار دادن یک border بصورت زیر عمل میکنیم:

میبینید که برای ویژگی border، سه مقدار رو قرار میدیم و اولین مقدار توپر بودن اون رو مشخص میکنه و با استفاده از 1 پیکسل هم ضخامت رو مشخص کردیم. با استفاده از مقدار آخر هم رنگ border رو مشخص کردیم.

همونطور که دیدید برای ویژگی border خلاصه نویسی انجام دادیم و بصورت همزمان سه ویژگی border-style و border-width و border-color رو مشخص کردیم. فراموش نکنید که هر کدوم از این ویژگی هایی که با استفاده از border اونا رو مشخص کردیم، خودشون خلاصه نویسی شده هستن. مثلا کد بالا رو اگر ببینید، border-width رو درون اون برابر با 1 پیکسل قرار دادیم. پس اگر بخایم اون رو بصورت جداگانه تعریف کنیم، میبینیم، بصورت زیر خواهد بود:

پس دیدید زمانی که میگیم border-width برابر با 1 پیکسل هست یعنی border بالا و پایین و چپ و راست اون المنت برابر با 1 پیکسل هست. اگر بخوایم میتونیم border طرفین رو برابر با هم قرار ندیم. بصورت زیر:

با این کار مقادیر border-width برای بالا، راست، پایین و چپ رو متفاوت مشخص کردیم. این موارد برای ویژگی های border-style و border-color هم بهمین صورت هست و میتونیم برای طرفین مختلف، رنگ و استایل border رو متفاوت قرار بدیم. نمونه زیر رو در نظر بگیرید: دیدید که استایل، رنگ و ضخامت border های طرفین رو متفاوت قرار دادیم. همچنین میتونیم border ها رو بصورت دقیقتری مشخص کنیم. مثلا برای مشخص کردن استایل border سمت چپ، ویژگی border-left-style و برای مشخص کردن رنگ border بالا، ویژگی border-top-color رو مقداردهی میکنیم. پس همونطور که دیدید درون ویژگی border، مقادیر رو بصورت سه بار خلاصه نویسی شده قرار دادیم و با استفاده از ویژگی border نمیتونیم برای طرفین، استایل رو متفاوت قرار بدیم.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.