کار با خاصیت ها در css
بخش آپدیت های مقاله
آموزش ویدئویی در تاریخ 27 مرداد 98 اضافه شد .

سلام دوباره خدمت همه دوستان در جلسه هشتم از دوره ی آموزشی HTML و CSS خدمت شما هستیم تا مباحث جدید و جذاب تری را به شما آموزش دهیم . عاشقان طراحی وب با ما همراه باشید که امروز میخواهیم در مورد padding ، margin و float صحبت بکنیم و مطمئن باشید که این مباحث امروز تا آخر آموزش های طراحی وب با شما همراه خواهد شد . دوستان عزیز با ما همراه باشید تا این این جلسه رو هم به خوبی تموم کنیم . پس با ما همراه باشید….

خصوصیات margin در CSS :

در همین ابتدا یه تعریف کوچک و مختصر از margin بهتون بگم که فواصل بیرونی هر بخش را margin می گویند و حالا بریم سراغ معرفی مقدار هایی که این خصوصیت میگیرد .

  • margin-top 

با این مقدار شما میتوانید که فاصله از بالا را تنظیم کنید به این صورت که المان شما چقدر از بالا فاصله داشته باشد.

  • margin-right

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

  • margin-bottom

برای شما فاصله از پایین را تنظیم میکند .

  • margin-left 

این مقدار هم به شما فاصله از سمت چپ را هماهنگ میکند .

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

در کد بالا به ترتیب مقادیر به صورت گردش ساعتی کار میکند(بالا ، راست ، پایین ، چپ) کار میکند (در ویدئو کامل کار شده است)

پیشنهاد آیلین وب : آشنایی با رنگ ها و border ها در Html 

حتی به صورت مخفف شده هم میتوانید با margin کار کنید برای مثال:

در margin که سه مقدار دارد به این شکل است که اول بالا و مقدار وسطی چپ و راست را باهم شامل میشود و مقدار آخری پایین را شامل میشود.

خط دوم از margin به ترتیب بالا و پایی مقدار اول و مقدار دوم هم راست و چپ را شامل میشود.

خط سوم از هر چهار طرف 50 پیکسل فاصله میگیرد.

نکته : اگر مقدار Margin را به auto قرار دهید محتوای شما کاملا در وسط قرار میگیرد .

خصوصیات padding در CSS :

با مقدار دهی Padding فواصل داخلی را در نظر میگیرد و به شما این امکان را میدهد که فاصله از داخل محتوا انجام شود . و این خاصیت هم دارای چهار مقدار است که تقریبا شبیه به margin عمل میکند.

padding-top 

padding-right

padding-bottom

padding-left

این مقادیری است که padding میگیرد و مثل margin که در بالا گفتم میتوانید به صورت اختصار هم بنویسید.

file CYKDge2Gej - آموزش HTML - CSS (خاصیت های Margin , padding , display ,float در CSS)
تفاوت margin و padding در css

خاصیت float در CSS :

در این قسمت هم در مورد Float میخواهیم صحبت بکنیم که به المان ها در css خاصیت شناور بودن میدهد به این شکل که تگ های block level را به text level تبدیل میکند در جلسات قبل در مورد این ها صحبت کردیم .

مطلب پیشنهادی :   دوره آموزش HTML و CSS (نحوه ی آدرس دهی ، استفاده از لینک ها ، تصاویر و فرم ها در HTML)

به عنوان مثال شما عملا نمی توانید که دو تگ p را کنار هم قرار دهید ولی با خاصیت float میتوانید این کار را انجام دهید .

مطالعه بیشتر : آشنایی با تگ ها , خصوصیات در html 

float دارای دو مقدار right و left دارد که المان مورد نظر را به چپ یا راست هدایت میکند .

خاصیت clear در css :

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

مثل تکه کد بالا که سمت چپ را clear میکند و حتی شما میتوانید که از مقدار both استفاده کنید تا این که هر دو طرف را clear کنید .

خاصیت display در CSS :

ما در خاصیت float المان هایی که block level  به text level تبدیل کنیم ولی با display میتوانیم تبدیل به block level تبدیل کنیم و حتی آنها را نمایش ندهیم .

که دارای چندین مقدار هست .

امیدوارم که از این آموزش هم تمام استفاده رو برده باشید و حتما مباحثی که گفته میشود تمرین کنید و به تمام ویدئو ها نگاه کنید تا بتوانید سرعت یاد گرفتن خود را افزایش دهید.

اگر هر گونه سوال یا پیشنهادی در رابطه با آموزش ها دارید حتما با ما در میان بگذارید تا و مطمئن باشید که ما در اولین فرصت به سوال های شما جواب خواهیم داد.

6 دیدگاه

  • Author's gravatar
    bm 18th آوریل 2020 , 1:04 ب.ظ

    ببخشید این قسمت آخر اموزش html و css هست؟

    پاسخ
  • Author's gravatar
    علی خوش رفتار 12th می 2020 , 5:13 ق.ظ

    سلام
    امیدوارم که حالتون خوب باشه
    ممنون از آموزش خوبتون
    آسا این 8 قسمت اموزش css و html ما رو از سایر آموزش ها بی نیاز میکنه؟
    مطالب گفته شده برای طراحی قالب یک سایت کافی هست؟

    پاسخ
    • Author's gravatar
      محمود شعبانی 13th می 2020 , 2:34 ق.ظ

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

      پاسخ
  • Author's gravatar
    علی خوش رفتار 13th می 2020 , 5:22 ق.ظ

    ممنون از وقتتون مهندس
    این سری آموزش های css و html و تموم کردم
    باید تمرین کنم.
    شما اموزش مناسب و جامعی سراغ دارید برای جاوا اسکریپت؟

    پاسخ
    • Author's gravatar
      محمود شعبانی 19th می 2020 , 10:15 ق.ظ

      خواهش میکنم
      بله با تمرین و تکرار و ازمون و خطا میتونید یاد بگیرید و بهترین روش هست.
      توی گوگل باید جستجو کنید ولی یوتیوب یادتون نره

      پاسخ

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

مطالب داغ