مرزها در CSS



مرز به معنای حاشیه است. در این جلسه یاد می گیریم که چگونه برای عناصر خود حاشیه یا حاشیه ایجاد کنیم. تغییر سبک و ظاهر حاشیه ها به جذابیت المان ها کمک زیادی می کند. تغییر سبک، ضخامت و رنگ حاشیه ها از جمله مواردی است که می توانیم تغییر دهیم. سبک حاشیه برای تغییر سبک حاشیه باید از دستور border-style استفاده کنیم. از جمله مقادیری که این دستور می تواند بگیرد در زیر لیست شده است: نقطه چین، جامد، دوتایی، خط چین، شیار و غیره که به ترتیب حالت های نقطه چین، ساده، دو خط، چین و سه بعدی را ایجاد می کنند. . به عنوان مثال: P{border-style: dashed ;} در این حالت، یک حاشیه چین دار در اطراف فضای پاراگراف ایجاد می شود. حالا که نوع استایل حاشیه را مشخص کردیم می توانیم ضخامت و رنگ آن را نیز به دلخواه تغییر دهیم. بیایید خودمان را تغییر دهیم. توجه داشته باشید که اگر استایل را مشخص نکنیم، دستورات مربوط به رنگ و ضخامت کار نخواهد کرد. ضخامت marginWidth به معنای ضخامت است. برای تغییر ضخامت حاشیه از دستور border-width استفاده می کنیم. برای ارزش گذاری می توانیم از یک مقدار عددی مانند 2px و… استفاده کنیم یا از مقادیر تحت اللفظی مانند ضخیم، متوسط ​​یا نازک استفاده کنیم و حاشیه ضخامت کم، متوسط ​​یا زیاد به آن بدهیم. مثال: P{border-style: dashed; border-width: 2px;} رنگ حاشیه، با استفاده از دستور color می توانیم به راحتی رنگ حاشیه را تغییر دهیم. برای تغییر رنگ حاشیه، می توانیم از مقادیر اسمی یا فرمت های رنگی استفاده کنیم. چهار طرف حاشیه را استایل کنیم. در واقع می توانیم هر طرف مرز عنصر را به دلخواه تغییر دهیم. برای این کار می توانیم از دستورات زیر استفاده کنیم: P{border-top-style: solid ;border-right-style: dotted;border-bottom-style: groove ;border-left-style: dashed ;} ضخامت هایی نیز وجود دارد. و می توانیم از آنها استفاده کنیم. ساختار چند ارزشی فرض کنید می خواهیم مانند مثال بالا به یک پاراگراف مرزی بدهیم. به این معنی است که برای هر طرف استایل متفاوتی بدهید. اگر دقت کنید برای این کار باید از چهار دستور استفاده کنیم که ما را از بهینه سازی کد دور می کند و تعداد دستوراتمان را افزایش می دهد. برای این وضعیت راه حلی وجود دارد، می توانیم از ساختار چهار ارزشی، سه ارزشی، دو ارزشی یا تک ارزشی استفاده کنیم. و با این کار از بازنویسی جلوگیری می کنیم. برای مثال می‌توانیم مثال بالا را به صورت زیر بنویسیم: شکل نقطه‌دار و حاشیه پایین حالت سه‌بعدی و حاشیه سمت چپ خط چین است. حال اگر از حالت سه مقدار استفاده کنیم، چه شکلی خواهد بود؟ P {border-style: solid dotted dashed;} در این حالت، حاشیه بالایی یک خط ساده است، حاشیه سمت راست و چپ هر دو نقطه چین و حاشیه پایین به صورت The shape خواهد بود. و اگر از دو مقدار استفاده کنیم چگونه خواهد بود؟ به عنوان مثال، اگر بنویسیم: P{border-style: solid dotted;}، حاشیه های بالا و پایین صاف و حاشیه های راست و چپ نقطه چین می شوند. و اگر از یک مقدار استفاده کنیم، تمام اضلاع حاشیه یکسان می شود. گوشه های گرد برای گرد کردن گوشه های حاشیه، می توانیم از دستور زیر استفاده کنیم: border-radius: 5px; این ویژگی به عناصر ما زیبایی خاصی می بخشد.

دیدگاهتان را بنویسید