• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 160 ۲۴ آذر ۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram