جلسه هشتم : پر کاربرد ترین کد های CSS

جلسه هشتم : پر کاربرد ترین کد های CSS

یک سلام دوباره به شما دوستان عزیز میهن آکادمی ، طبق قرار همیشه اول نوشیدنی خود را بنوشیم و بعد از آن یک موزیک ملایم برای خود قرار دهیم تا بتوانیم ذهن خود را از این دنیا پرهیاهو کمی ساکت نگهداریم و شما را آماده کنیم که بریم و یک سری از کد های پرکاربرد CSS را به شما آموزش دهیم با استفاده از این کد ها شما می توانید کمی تغییر اساسی به سایت خود دهید

همانطور اگر که یادتان باشد در جلسه قبلی تگ های پرکاربرد HTML را نیز با یک دیگر کار کردیم و همانطور که دیدید تعداد آنها زیاد نبود و از این جلسه می خواهید تعدادی از کد های شیرین CSS را با یک دیگر تمرین و تکرار کنیم ، پس بیاید که بریم تو دلش …

ای راستی ! یک نکته ای هست که قبل از هر چیزی باید بهتون بگم در CSS یک موردی وجود داره به عنوان CSS Reset که بهتره از همین حالا این موضوع را به شما توضیح دهم پس بیاید تا بهتون بگم …

CSS Reset چیست

همانطور که می دانید ما ممکن برای استفاده از یک سایت از هر مرورگری استفاده می کنیم و استایل های پیشفرض و مختص به خود را دارد و یعنی اگر یک استایل برای همه مرورگر ها در نظر نگیریم سایتمان در هر مرورگر به نوعی نمایش داده می شود پس ما باید یک استایل پیشفرض را برای سایت خود در تمامی مرورگر ها در نظر داشته باشیم که به یک صورت نمایش داده می شود و به این گفته می شود CSS Reset گفته می شود ! تمام

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

فواید color :

<div class="box">
    .این متن تستی است.
</div>
.box {
    color: red;
}

با استفاده از این کد بالا شما می توانید به راحتی رنگ متن خود را تغییر دهید ، برای مثال اگر که می خواهید رنگ متن خود را به شکل قرمز نمایش دهید باید کد نویسی color استفاده کنید کد داخل box. مربوط به تغییر رنگ می باشد

فواید Background :

<div class="box">
    .این متن نسبی است.
</div>
.box {
    color: white;
    background: red;
}

با استفاده از این کد می توانیم برای سایت خود پشت زمینه قرار دهیم حالا ، چه تصویر باشد و یا چه بکگراند طیفی باشد یا هر چیز دیگری که می خواهیم کد را می توانید در قسمت بالا مشاهده کنید و در سایت خود استفاده کنید و در ضمن این کد خاصیت های دیگر هم مانند background-position ، background-attachment ، background-repeat داشته باشد که برای اطلاعات بیشتر می توانید دوره جامع وبمستران برتر تهیه کنید.

فواید margin :

margin: 5px 6px 7px 8px;

با استفاده از کد margin شما می توانید به المنت های سایت خود فاصله ایجاد کنید و فاصله ای از نوع فاصله های خارجی و این یاد بگیرید بهتره : margin که g دارد میشود فاصله خارجی 😜

نکات کاربردی که باید استفاده کنید :

اگر به margin فقط یک مقدار بدهیم : فاصله داده شده به تمام جهت ها اعمال می شود

اگر به margin فقط دو مقدار بدهیم : اولین مقدار بالا و پایین می باشد و دومین مقدار چپ و راست می باشد

اگر به margin فقط سه مقدار بدهیم : اولین مقدار بالا و پایین می باشد و دومین مقدار راست و چپ و سومین مقدار پایین می باشد

اگر به margin فقط چهار مقدار بدهیم : مانند کد بالا می باشد

نکته : خاصیت margin مقدار های منفی و auto هم در خود می گیرد.

فواید Padding :

padding: 5px 6px 7px 8px;

همانطور که می دانید با استفاده از کد padding می توانیم برای المان های مورد نظر خود فاصله های داخلی ایجاد کنیم و به عبارتی با استفاده از padding می توان المنت های مورد نظر را گسترش داد ، این طوری یاد بگیرید بهتره : padding که d دارد می شود فاصله داخلی !

تمامی نکته های که بالا در مورد padding هم می باشد و جز این مورد padding مقدار های منفی و auto نمی گیرند مانند کد بالا

نکات کاربردی که باید استفاده کنید :

اگر به padding فقط یک مقدار بدهیم : فاصله داده شده به تمام جهت ها اعمال می شود

اگر به padding فقط دو مقدار بدهیم : اولین مقدار بالا و پایین می باشد و دومین مقدار چپ و راست می باشد

اگر به padding فقط سه مقدار بدهیم : اولین مقدار بالا و پایین می باشد و دومین مقدار راست و چپ و سومین مقدار پایین می باشد

اگر به padding فقط چهار مقدار بدهیم : مانند کد بالا می باشد

خب این هم جلسه هشتم طراحی سایت با کد نویسی ، شما فعلا با این چند کد کار کنید تا کار با این کد ها را نیز یاد بگیرید و در ادامه با من همراه باشید …

فعلا خوش باشید 😎