خاصیت های  margin  و padding  در css
21 Dec

خاصیت های margin و padding در css

در این قسمت از آموزش html  به بررسی خاصیت های  margin  و padding  در css  می پردازیم.

خاصیت  margin  در   css :

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

margin-top , margin-right , margin-bottom , margin-left

به چند طریق می توان به margin  مقدار داد.

مقداردهی با پیکسل : واحد  px رایج ترین واحد اندازه گیری در وب می باشد.(10px)

مقداردهی با point : واحد pt  بیشتر برای کارهای چاپی است.(10pt)

مقدار دهی با Ems :  واحد em در طراحی وب سایت برای گوشی ها و اینگونه وسایل می باشد. (10em)

مقداردهی با سانتی متر :  این واحد اندازه گیری در طراحی صفحات وب سایت رایج نیست.(10cm)

مقداردهی درصدی ، این نوع واحد اندازه گیری برای صفحات وب رایج است ولی بیشتر برای طراحی صفحه سایت برای گوشی های موبایل و این گونه وسایل استفاده می شود. (10%)

مقدار دهی autoauto مقداردهی به صورت انوماتیک و خودکار می باشد.

مقدار دهی inherit : inherit مقدار دهی به صورت وراثتی است و از بلاک والد به ارث می برد .

برای مختصر نوشتن خاصیت margin می توان آن را به صورت یک خطی نوشت margin: 150px 140px 130px 120px;

خاصیت  padding  در  css :

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

padding-top , padding-right , padding-bottom , padding-left

برای مختصر نوشتن دستور padding می توان آن را به صورت یک خطی مقدار دهی کرد. padding: 50px 30px 50px 80px;

به بررسی چند مثال از padding می پردازیم.

padding:25px;

یعنی فاصله از هر چهار جهت المنت 25px  است.

padding: 25px 50px;

یعنی در سمت بالا و پایین مقدار padding  برابر 25px  می باشد و در راست و چپ مقدار padding برابر  50px است.

padding: 25px 50px 25px 50px;

مقدار padding در بالا و پایین 25px  و در راست و چپ 50px است.

به پایان خاصیت های  margin  و padding  در css رسیدیم در بخش بعدی آموزش اچ تی ام ال  به بررسی سایر خاصیت ها می پردازیم.

 

css چیست ؟
16 Dec

css چیست ؟

در این بخش آموزش css متوجه می شویم که css چیست و کاربرد آن چگونه است.

css چیست ؟

css مخفف Cascading Style Sheets ، زبانی برای توصیف و زیبا سازی سند  اچ تی ام ال می باشد.css  نحوه نمایش المنت های html  مشخص می کند. یادگیری درست css  می تواند مشخص کننده یک طراح حرفه ای سایت و مبتدی باشد.همچنین می توان سایت را بدون css  و به وسیله  table  طراحی کرد که این روش منسوخ شده است.

css  باعث صرفه جویی در وقت برای طراحی سایت می باشد ، با css تغییرات مجدد روی html  راحت تر است .

به سه روش می توان از  css  در سند html  استفاده کرد.

1) inline

2) داخلی

3) خارجی

روش inline

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

<p style=”color:red;”>…… </p>

روش آدرس دهی داخلی

باعث می شود که استایل ها فقط در همان صفحه اجرا شوند ، این روش باعث بالا رفتن لود سایت می شود که برای استفاده از این روش باید تگ  <style>  را در  <head>  سایت قرار دهیم و کد های  css  در آن بنویسیم.مثال:

<head>
<style>

body{

color:#000;

}
</style>
</head>

روش آدرس دهی خارجی

رایج ترین نوع استفاده css  در سند به صورت خارج از سند است به این ترتیب که فایل  css  به صورت مجرا از فایل html  است و برای ارتباط بین html , css  باید فایل css  را ضمیمه سند کنیم .مثال:

<head>
<link rel=”stylesheet” type=”text/css” href=” stylesheet.css”>
</head>

با این روش می توان یک فایل  css  را در چند سند اضافه نمود.

با توضیحات بالا متوجه شده که سی اس اس چیست و چه کار بردی داردی در بخش های بعدی آموزش css با  نحوه کار با css آشنا می شویم