0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی 09133886881 احمدپور

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 526
تاریخ بروزرسانی 25 ژوئن 2019

خواص عناصر 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 و نحوه ی استفاده از آن ها آشنا شوید. برای آگاهی از آموزش های بیشتر می توانید با تیم طراحی سایت اصفهان همراه باشید.

مطالب مرتبط
مطالعه :

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

آموزش بازاریاب
مطالعه :

آموزش افزایش فروش و درآمد آموزش بازاریابی طراحی سایت با آموزش افزایش فروش و درآمد طبق تحقیقات انجام شده, در تجارت وکسب و کارهای ما رقابت فراوانی به وجود آمده درنتیجه ارتباط برقرار کردن با مشتریان و البته ارتباطی موثر از اهمیت زیادی برخوردار است. در این موقعیت از بین شیوه های متفاوت ارتباط با مشتری بازاریابی بسیار موثر و مهم واقع شده است. در مقاله ای که تیم طراحی سایت اصفهان برای شما آماده کرده اند هدف آموزش بازاریاب و آموزش افزایش فروش و درآمد و… می باشد. این مقاله آموزشی است و برای بهره مند شدن از این مقاله تا پایان با ما همراه باشید.     هدف ما آموزش بازاریاب و آموزش افزایش فروش و درآمد و در نتیجه جذب مشتری است. ولی ابتدا تعاریفی بیان می کنیم تا پله پله متوجه بشوید. تعاریف اولیه آموزش بازاریاب تعریف فروش: فروش یکی از عوامل زیرمجموعه بازاریابی است و به عبارتی فروش انتهایی ترین عملیات بازاریابی در یک معامله است و در عین حال شروع یک رابطه بلند مدت با مشتریان می باشد. تعریف فروشنده: فروشنده کسی است که نیاز مشتری را درک نموده، به منظور انتخاب صحیح، مشتری را صادقانه راهنمایی می کند و سرانجام قادر باشد توافق و اعتماد مشتری را برای خرید جلب نماید. مهندسی فروش: در یک تعریف ساده مهندس فروش کسی است که اطلاعات […]

طراحی سایت خدماتی خرید بازیافت
مطالعه :

طراحی سایت خدماتی خرید بازیافت طراحی سایت خدماتی خرید بازیافت با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت اصفهان و سئو سایت وب یار است. این سایت در زمینه ی خرید و فروش ضایعات مانند ضایعات لوازم دست دوم, آلومینیوم, برنج, مس و… فعالیت دارد. طراحی سایت خدماتی خرید بازیافت برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف خرید و فروش ضایعات، نمایش محصولات و سایر حوزه های خدماتی می باشد بسیار مناسب است. آدرس سایت جهت مشاهده تمامی امکانات داخلی و گرافیکی سایت kharidbazyaft.com طراحی سایت های این چنینی، منجر به افزایش فروش و درآمد افراد در حوزه های مختلف کسب و کار می شود. در ادامه با هم امکانات این سایت که به تازگی توسط تیم طراحی سایت وب یار طراحی شده است را بررسی می کنیم. اگر شما هم نیاز به سایت خدماتی دارید، بهتر است این سایت را ببینید تا انتخاب آگاهانه تری در مورد انتخاب امکانات سایت خود داشته باشید؛ چرا که ممکن است در میان انتخاب امکانات سایت خود برخی از نیازهای سایت از خاطر شما دور مانده باشد. ویژگی ها از ویژگی های بارز طراحی این سایت خدماتی، طراحی سایت اختصاصی، طراحی سایت ارزان قیمت با حجم امکانات بالا در مقایسه با طراحی سایت های ارزان قیمت شرکت های غیر معتبر که برگرفته از قالب های […]

آموزش بازاریاب
مطالعه :

آموزش بازاریاب طراحی سایت این مقاله ادامه ی مقاله ی آموزش بازاریابی طراحی سایت می باشد که برای آموزش بازاریاب و آموزش افزایش فروش و درآمد نوشته شده است. اگر مقاله ی نخست را مطالعه کرده اید، برای خواندن ادامه ی مقاله و اتمام آموزش بازاریابی اصفهان تا پایان با تیم طراحی سایت اصفهان همراه باشید. پس از مواردی که در مقاله پیشین بیان شد و آخرین مطلب (نه نشنیدن را به عنوان بخشی از حرفه خود بپذیرید) بود به موارد زیر می پردازیم. آموزش بازاریاب طراحی سایت 1- از هر فرصتی برای مشتری یابی استفاده کند: یک کارشناس فروش حرفه ای هر فرصتی را غنیمت شمرده و به هر کس به عنوان مشتری بالقوه نگاه می کند. یک کارشناس فروش حرفه ای خود را محدود به دفتر کارش نمی کند؛ بلکه از هر فرصت ایجاد شده برای ارتباط با مشتریان به بهترین شکل ممکن استفاده می کند. برای مثال: شاید زمانی که در صف نانوایی و یا کارواش هستید فرصتی پیش بیاید تا یک مشتری را به سیستم کسب و کارتان اضافه کنید. 2- حرفه بازاریابی و فروش را دوست داشته باشید: یک بازاریاب به هیچ وجه از سر اجبار این شغل را انتخاب نمی کند، کسی که وارد این حرفه می شود باید با تمام وجودش شغلش را دوست داشته باشد وگرنه رشد و پیشرفتی در کار نخواهد […]

13تکنیک نوشتن عنوان جذاب برای محتوا
مطالعه :

ماجرا از آن جایی شروع می شود که کاربران اینترنتی با جستجوی عبارت مورد نظر خود در موتورهای جستجو با صفحه ای از نتایج به رو می شوند که این نتایج همان عناوین محتوای سایت های مختلف است. اکنون ادامه ماجرا به این عناوین بستگی دارد که تا چه حد می تواند کاربر را راضی کند که بر روی آن کلیک کرده و وارد سایت شود. جالب است بدانید از هر 10 نفر  ، 8 نفر عنوان محتوای شما را می خوانند ولی تنها 2 نفر بر روی آن کلیک می کنند! دلیل آن می تواند به مسائل زیادی برگردد که مهم ترین دلیل آن جذاب و تاثیرگذار نبودن عنوان محتوای شما است. عنوان محتوا در واقع اولین پل ارتباطی مخاطب با یک محتوا است. ممکن است محتوایی ضعیف‌تر از محتوای تولیدی شما به واسطه داشتن عنوان جذاب و تاثیر گذار بیشتر از محتوای شما دیده شود و کاربران زیادتری را به سمت خود جذب کند. نوشتن عناوین تاثیر گذار به هوش و یا استعداد خاصی نیاز ندارد ، بلکه فقط به دانستن نیاز دارد. دانستن یک سری نکات و تکنیک ها ! وقتی یک نفر توانسته چرا شما نتوانید؟ تنها کافی است به دو امتیاز دانش و تمرین مجهز شوید تا بتوانید عناوینی تاثیرگذار و جذاب خلق کنید. در این مقاله قصد داریم شما را به یکی از این […]

کلاس های آموزشی سئو در اصفهان
مطالعه : 2 دقیقه

کلاس های آموزشی سئو در اصفهان کلاس های آموزشی سئو در اصفهان بهترین راه برای یاد گیری علوم سئو و استاندارد های طراحی سایت از صفر است زیرا بدون خطا و در کنار متخصصین سئو سایت در اصفهان سایت خود را با آسودگی تحلیل و آموزش های مربوط به آنالیز، بهینه سازی و روش های سئو گوگل یاد خواهید گرفت. طراحی سایت وب یار کلاس های آموزشی کامل سئو با ۳۰ سرفصل آموزشی، هم چنین دوره ی کامل تر آن با ۵۰ سرفصل آموزشی برای علاقمندان در شهر اصفهان و شهرهای حومه اصفهان برگزار می کند.     چرا سئو و اهمیت سئو: خیلی از مدیران زمانی که با شرکت ما تماس می گیرند، از ما می پرسند که سایت آنان همانند خیلی از شرکت های رقبایشان در صفحات اول گوگل نمایش داده نمی شود؟ یا درخواست طراحی سایتی را دارند که وقتی کاربران، مطلبی مرتبط با سایت آن ها را جستجو می کنند سایت آن ها در صفحه ی اول و دوم گوگل نمایش داده بشود، این همان سئو است که شاید بارها افراد از آن استفاده بکنند. اما شاید نام تخصصی آن را نداند، یا اینکه چه اتفاقاتی افتاده که یک وب سایت در صفحات اول گوگل قرار گرفته است؟ سئو کردن سایت یعنی تولید کردن صفحات وبی که برای موتورهای جستجو جالب هستند و باعث شود که […]

دیدگاه ها

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *