031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » آخرین اخبار » تنظیم خواص  عناصر Border و Margin و Padding   

تنظیم خواص  عناصر Border و Margin و Padding   

۱۲ام آذر ۱۳۹۷
رعنا زارع
0
19

خواص عناصر Border و Margin و Padding

در مقاله های قبلی در رابطه با طریقه نوشتن css صحبت کرده بودیم. حال در این مقاله سعی شده است به بررسی برخی از خواص عناصر Border و Margin و Padding و باکس ها و نحوه ی کار همه ی آن ها پرداخته شود. برای کسب اطلاعات بیشتر در این زمینه با تیم طراحی سایت اصفهان همراه باشید.

در نگاه اول استفاده از خواص عناصر Border و Margin و Padding و نحوه ی استفاده از آن ها نسبتا ساده هستند. با این حال موتور های جستجوی مرورگر از لیستی طولانی از قوانینی که در توصیه نامه ی CSS ارائه شده اند پیروی می کنند. به همین دلیل جزییات زیادی قبل از استفاده از css ها وجود دارند که باید فرا بگیرید.

خاصیت Margin

این خاصیت از  css برای مشخص کردن فضای خالی  خارج از محیط عناصر مورد استفاده قرار می گیرد. تمام خصوصیات Margin می توانند مقدار منفی بگیرند که با این کار باعث هم پوشانی عناصر html  می شوید. این عنصر css را می توان برای حالت های Top , Right , Bottom ,Left تنظیم نمود. برای دادن Margin به هر کدام از حالت های بالا می توان از دو روش زیر استفاده کرد. در روش اول می توان به صورت جداگانه به هر کدام از حالت ها مقدار داد. به مثال زیر توجه کنید:

  margin-top:1px;

  margin-right:2px;

  margin-bottom:3px;

  margin-left:2px;

در روش دوم شما می توانید به صورت ساعتگرد به هر کدام از حالت ها مقدار بدهید. به مثال زیر توجه کنید.

;margin:1px 2px 3px 2px

مقدار اول margin  را در حالت Top مشخص می کند. مقدار دوم margin  را در حالت  right مشخص می کند. مقدار سوم margin  را در حالت  bottomمشخص می کند. مقدار چهارم margin  را در حالت  left مشخص می کند.

اگر تنها برای تمام حالت ها یک مقدار وجود داشته باشد. می توان آن را به صورت margin: 2px نوشت که برای تمام جهت ها اعمال می شود.

اگر برای حالت بالا و پایین یک مقدار و برای حالت چپ و راست یک مقدار وجود داشته باشد. برای آن که آن ها را خلاصه بنویسیم می توانیم. margin-top و margin-bottom  را بر روی مقدار اول  و margin-right و margin-left را بر روی مقدار دوم تنظیم کنیم. margin: 1px 2px

حال اگر حالت چپ و راست یک مقدار داشته باشد و پایین و بالا دو مقدار مجزا داشته باشند. به عبارت دیگر سه مقدار وجود داشته باشد. بالا بر روی مقدار اول تنظیم می شود سمت چپ و راست بر روی مقدار دوم و پایین بر روی مقدار سوم تنظیم می شود.margin: 1px 2px 3px

مقادیر margin را می توان به چند صورت مشخص کرد. می توان محاسبه ی مقدار margin را برعهده ی مرورگر قرار داد و برای ان مقدار auto درنظر گرفت. می توان مقادیر آن را برحسب px,em,cm,pt و… در نظر گرفت. یا می توان به margin  مقدار درصد داد. که در این صورت اندازه ی margin برحسب اندازه ی صفحه نمایش تغییر خواهد کرد.

خاصیت Padding

این خاصیت از  css برای مشخص کردن فضای خالی  داخل عناصر مورد استفاده قرار می گیرد. به عبارت دیگر با استفاده از این عنصر می توانید فضای خالی بین لبه(border) و محتوای عنصر را تنظیم کنید. بر خلاف خصوصیت padding , margin  نمی تواند مقدار منفی بگیرد. از این خصوصیت برای تنظیم هر چهار جهت بالا , پایین,چپ و راست می توان استفاده کرد. این خصویت را نیز می توان مانند margin مقدار دهی کرد. به هر کدام از مثال های زیر توجه کنید.

padding-top: 25px;

padding-right: 50px;

padding-bottom: 25px;

padding-left: 50px;

در این مثال به هر کدام از جهت های padding به صورت مجزا مقدار داده شده است.

padding: 25px 50px 75px 100px;

 

در این مثال از روش مختصر نویسی استفاده شده است و هر چهار مقدار padding  در یک تعریف تنظیم شده اند.

padding: 25px 50px 75px;

 

در مثال بالا یک مقدار برای جهت بالا یک مقدار برای جهت های چپ و راست و یک مقدار برای جهت پایین تنظیم شده است.

padding: 25px 50px;

در صورتی که برای جهت های بالا و پایین یک مقدار و برای جهت های راست و چپ یک مقدار وجود داشته باشد.  می توان از روش بالا استفاده کرد. مقدار اول برای  padding-topو padding-bottom  و مقدار دوم برای padding-right و padding-left تنظیم شده است.

padding: 25px;

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

Padding را می توان برحسب, pt px, cm , em مشخص کرد و یا می توان به padding  مقدار درصد داد تا اندازه ی آن بر اساس اندازه ی مرورگر تغییر کند.

خاصیت border

با استفاده از این خصوصیت می توان خواص لبه ی عناصر  و نوع نمایش آن ها را مشخص کرد. این خصوصیت مقادیر زیر را دارا می باشد.

خاصیت border-style

Dotted: لبه به صورت مجموعه ای از نقاط به نمایش در می آید.

none: این حالت معادل border-width=0 می باشد و لبه به نمایش در نمی آید.

dashed: به صورت مجموعه ای از خطوط کوتاه به نمایش در می آید.

solid: لبه به صورت یک خط به نمایش در می آید.

Double: با استفاده از این خاصیت می توانید لیه را به صورت دو خطه نمایش دهید.

Groove: لبه در این حالت به نظر می رسد که به صورت سه بعدی است.

Ridge: در این حالت لبه به صورت سه بعدی برجسته می باشد.

Inset: لبه به صورت سه بعدی داخلی نمایش داده می شود.

Outset: لبه به صورت سه بعدی خارجی به نمایش در می اید.

خاصیت border-width

از خاصیت هایی که باید در border تنظیم شود border-width می باشد. این خصوصیت ممکن است یکی از مقادیر زیر را دارا باشد:

thin : یک بوردر نازک

medium : یک بوردر متوسط

thick : یک بوردر ضخیم

همچنین می توان این خصوصیت را بر اساس مقادیر px,pt,cm,em نیز تنظیم کرد .

در صورتی که خاصیت border-style  تنظیم نشده باشد نمی توان از خاصیت border-width استفاده کرد.

خاصیت border-color

از این خاصیت برای مشخص کردن رنگ لبه ها استفاده می شود. به سه حالت می توان به ان مقدار داد. در روش اول می توان رنگ لبه را بر اساس نام آن مشخص کرد. در روش دوم می توان رنگ لبه را بر اساس کد رنگ rgb مشخص کرد در روش سوم می توان رنگ لبه را بر اساس کد هگزا مشخص کرد.

به مثال های زیر توجه کنید

;border-style:solid
;border-color:red

border-style:solid;
border-color:#98bf21;

border-style:solid;
border-color:rgb(170, 50, 220);

در این خاصیت می توان برای هر کدام از لبه ها مقادیر جداگانه تعریف کرد :

 border-top: solid red;

border-right: solid red;

border-bottom: solid red;

border-left: solid red

border-style:dotted solid double dashed;

که به ترتیب مقادیر لبه های بالا, راست, پایین و چپ می باشد

border-style:dotted solid double;

لبه های بالا, راست و چپ و پایین می باشد.

border-style:dotted solid;

لبه های بالا , پایین و راست, چپ می باشد.

border-style:dotted;

در این حالت تمام چهار لبه یک مقدار واحد را می گیرند.

این قوانین خلاصه سازی در مورد border-color  و border-widht نیز برقرار می باشند.

به این صورت نیز می توان مقادیر خصوصیت border را نیز خلاصه نویسی کرد

border-bottom: thick solid red

که در این حالت مقدار اول border-width,  مقدار دوم border-style  و مقدار سوم border-color  می باشد.

 

سخن آخر

در این مقاله سعی بر این شد که با برخی از خصوصیت های css و نحوه ی استفاده از آن ها آشنا شوید. برای آگاهی از آموزش های بیشتر می توانید با تیم طراحی سایت اصفهان همراه باشید.

تنظیم خواص  عناصر Border و Margin و Padding   
5 (100%) 1 vote
درباره نویسنده :
رعنا زارع

مطالب مرتبط

10 افکت css

10 افکت css

معرفی css در این مقاله تیم طراحی سایت وب یار قصد دارد شما را با 10 افکت css آشنا کند. css  یک زبان برای استایل دهی به عناصر html است که به کمک آن می توانید به زیباسازی صفحات وب بپردازید. هنگامی که تگ هایی مانند <font> به  html اضافه شدند، توسعه دهندگان وب را […]

طراح وب حرفه ای در اصفهان

طراح وب سایت خوب و حرفه ای کیست؟

جهت طراحی یک وب سایت شکیل و استاندارد باید یک طراح وب سایت همگام با دانش بروز دنیا را پرورش بدهیم،جهت طراحی یک وب سایت از متخصصین زیادی در شاخه های مختلف از قبیل بازاریاب سایت، طراح و گرافیست سایت،برنامه نویس سایت، سئو کار حرفه ای سایت،پشتیبان سایت و … استفاده میشود،که یکی از این  […]

دانلود قالب فارسی اداری

دانلود قالب فارسی اداری

دانلود قالب  فارسی اداری قالب فارسی اداری دارای کدهای html,css, js که شما به راحتی از روی فایل های موچود کدهای مورد نظر را مشاهده کرده و میتوانید ویرایش مورد نظر در قسمت تصاویر و متون خود داشته باشید و به راحتی براساس این قالب قسمت داینامیک وب سایت خود را به راحتی الگو برداری […]

رفع غلط املایی اشتباهات برنامه نویسی

رفع غلط املایی اشتباهات برنامه نویسی css html jquery php asp

رفع غلط املایی اشتباهات برنامه نویسی css html jquery php asp جهت رفع مشکلات برنامه نویسی و طراحی سایت ارزان و زیبا باید در سایت مشکلات و اشتباهات و غلط های املایی کد های اشتباه در css html jquery php asp در طراحی سایت را برطرف کنید. ابتدا در مرورگر فایر فاکس افزونه FIREBUG را […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را کاملا واضح به همراه اطلاعات تماس ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما کاملا واضح در میان بگذارید

برای گفتگو کلید ENTER را بفشارید