0

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

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

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

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

مطالب مرتبط
فروش دامنه
مطالعه :

حراج دامنه و فروش دامنه زیبا و دامنه رند برای راه اندازی سایت و فروشگاه اینترنتی همیشه دقدقه مشتریان و صاحبین کسب و کار های اینترنتی بوده است. همیشه داشتن نام دامنه زیبا در بازدید کننده تاثیر مثبت میزاره مثلاً اگر شما اسم سایتتون WEB-YAR-NET-IR بود چقدر فرق میکرد تا سایت شما WEBYAR.NET باشه تعداد حروف کاراکتر ها معنی کلمات هماهنگی شوند آهنگ اسم دامنه تاثیر بسیار زیادی بر روی خود سایت و کاربران سایت و برندینگ سایت داره وقتی نام سایت زیبا باشه کاربران سایت به راحتی اون رو به خاطر می سپارند ولی وقتی نام دامنه طولانی باشه بی معنی باشه یا از حروف مختصر بی معنی درست شده باشه به سختی می شوند جستجو کرد یا آن را به حافظه سپرد مگر اینکه از تعداد حروف خیلی کمی درست کرده باشن اصلاً ۳-۴ حرف تا به راحتی بشه اون رو در ذهن سپرد.   اگر دامنه ای برای فروش دارید در نظرات با قیمت اعلام کنین. مثال: دامنه WEBYAR.NET  به قیمت 200 میلیون تومان 09133886881  فروش دامنه  خرید دامنه  دامنه ارزان  دامنه زیبا خرید و فروش دامنه   وقتی سایتی نام دامنه بسیار با ارزشی داره اون برند و اون سایت خودش خود به خود با ارزش و قوی به حساب میاد حتماً دامن های زیبایی را برای سایتتون انتخاب کنید و در خرید دامنه زیبا برای […]

مطالعه :

خرید و فروش دامنه زیبا برای راه اندازی سایت و فروشگاه اینترنتی یکی از خدمات با ارزش مجموعه وب یار است که کار راه اندازی سایت و انتخاب نام دامنه را بسیار راحت تر کرده و مدیران سایت با خرید و فروش دامنه به راحتی میتوانند دامنه با ارزش مد نظر خود را خرید کنند. همیشه داشتن نام دامنه زیبا در بازدید کننده تاثیر مثبت می گذارد. مثلاً اگر شما اسم سایتتون web-yar-net ir باشه خیلی فرق میکنه تا اینکه نام سایتتون WEBYAR.NET کوتاه و زیبا باشه . تعداد حروف و کاراکتر ها، معنی کلمات، و هماهنگی آهنگ اسم دامنه تاثیر بسیار زیادی بر روی خود سایت و کاربران سایت و برندینگ سایت دارد. وقتی نام سایت زیبا باشد کاربران سایت به راحتی اون رو به خاطر می سپارند ولی وقتی نام دامنه طولانی باشدیا  بی معنی باشد یا از حروف مختصر بی معنی طولانی تشکیل شده باشد. به سختی می شوند جستجو کرد یا آن را به حافظه سپرد مگر اینکه از تعداد حروف خیلی کمی درست شده باشد . مثلا فروش دامنه 3 حرفی تا به راحتی بشود ان را در ذهن سپرد.   وقتی سایتی نام دامنه بسیار با ارزشی دارد، ان برند و ان سایت خود به خود با ارزش و قوی به حساب میاد .پس حتماً دامنه ای زیبا برای سایتتون انتخاب کنید و در […]

سئو فروشگاه اینترنتی
مطالعه : 8 دقیقه

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

طراحی سایت حرفه ای
مطالعه : 15 دقیقه

طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت تیم طراحی سایت و سئو سایت وب یار به آدرس https://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت سرور

طراحی فروشگاه اینترنتی
مطالعه : 10 دقیقه

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

افزایش فروش طراحی سایت
مطالعه : 10 دقیقه

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

دیدگاه ها

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

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