صفت Margin در Css

css-icon

صفت Margin در CSS
این صفت یا خاصیت فضای اطراف عناصر را تعریف می کند . اگر مقدار منفی داشته باشد باعث روی هم افتادن حاشیه می شود. با این صفت می توان حاشیه بالا ، پایین ، راست و چپ را مستقل از جداکننده تغییر داد. صفتmargin نیز مانند بقیه صفتها یا خواص CSS دارای ویژگیهای دیگری می باشد که در ادامه به طور کامل برای شما توضیح میدهم اما خود Margin یک صفت تند نویس می باشد که می توانید تمام ویژگیها را یکجا وارد کنید .


به طور کلی صفت Margin سه مقدار را می پذیرد :
Auto : مرورگر به طور خودکار حاشیه گذاری می کند.
lenght : اندازه حاضیه با یک مقدار ثابت تعیین می گردد.
% : اندازه حاشیه با درصدی از اندازه قالب تعیین می گردد.
اگر نخواهید از صفت تند نویس margin استفاده کنید می توانید دقیق مشخص نمایید که فاصله از چه طرفی اعمال شود به عنوان مثال فرض کنید می خواهید پاراگراف اول 20پیکسل از پاراگراف پایین یا دوم فاصله داشته باشد .
به این مثال توجه کنید هر 4 حالت را توضیح داده ام

صفت Border در Css

css-icon
صفت Border
برای ایجاد کادر دور تصاویر و لبه های اطراف یک عنصر از صفت  Borderاستفاده می شود . در HTML برای ساختن کادراز تگ table استفاده می شود ولی با Css می توانیم کادرهای زیبا برای هر عنصر ایجاد کنیم .
طبق آموزشهای قبل ابتدا خاصیت های صفت Border را معرفی میکنم و بعد هر کدام را با مثال برای شما توضیح میدهم .
border-color : تغییر رنگ خط ها
border-style : نوع شکل خطها را تعیین میکند
border-width : عرض و ضخامت خطها را تعیین میکند
border-top : برای قسمت بالای کادر کشیده شده یا تصویر یک خط در نظر می گیرد
border-bottom : برای قسمت پایین کادر کشیده شده یا تصویر یک خط در نظر می گیرد
border-right: برای قسمت راست کادر کشیده شده یا تصویر یک خط در نظر می گیرد
border-left برای قسمت چپ کادر کشیده شده یا تصویر یک خط در نظر می گیرد
 

صفت FONT در Css

css-icon
صفت FONT
با این صفت می توانید ویژگیهای قلم ، نوع قلم ، اندازه ، رنگ و استایل متن را تغییر دهید . صفت font هم دارای نوع های متفاوتی از لحاظ کاربرد می باشد که در ادامه به طور کامل برای شما توضیح میدهم .

شما در فایل css خود می توانید فقط با نوشتن font تمام ویژگیهای آن مانند اندازه ، نوع قلم ، رنگ و ... را تعیین کنید اما اینکار پیشنهاد نمی شود بدلیل اینکه خوانایی کدهای css شما را تا حد قابل ملاحضه ای کم می کند به همین دلیل انواع صفت font را برای شما توضیح می دهم .

تغییر ظاهر متن با Css

css-icon

با صفت text می توانیم تغییر ظاهری متن ها را در فایل html تعیین کنیم. تغییراتی مانند تغییر رنگ ، افزایش یا کاهش فاصله بین حروف ، تراز نوشته و ... را می شود اعمال کرد. در ادامه به طور کامل برای شما ویژگیهای این صفت را توضیح میدهم .
صفت text دارای ویژگیهای :
Color:برای تغییر رنگ نوشته به کار می رود
Direction : چپ به راست یا راست به چپ نوشته را تعیین می کند
Letter-spacing : افزایش یا کاهش فاصله بین حروف را تعیین می کند
text-align : تراز نوشته از سمت چپ و راست را تعیین می کند
text-decoration :تعیین میکند لینک دارای زیر خط دار باشد یا خیر
text-indent : میزان تو رفتگی نوشته از خط را تعیین می کند
text-shadow : تعیین می کند متن شما دارای سایه باشد یا خیر
text-transform : تغییر شکل متن را تعیین می کند
white-space : فضای خالی کنار یک عنصر را تعیین می کند
word-spacing : افزایش یا کاهش فاصله بین کلمات را تعیین می کند
من ویژگیها هم به اسم صفت برای شما در پایین می نویسم .

تغییر ظاهر پس زمینه با Css

css-icon
 

برای تغییر ظاهر پس زمینه از صفت background استفاده می کنیم .
جاداره اینجا به یک موضوع مهم و کاربردی اشاره کنم و آن هم استفاده از بعضی از صفاتcss هست که مرورگر اکسپلورر از آن پشتیبانی نمی کنه و همیشه برای طراح های وب سایت دردسر ساز هست .
به همین دلیل من برای هر صفت مرورگرهای پشتیبانی کننده را می نویسم .

مرورگرهای پشتیبانی کننده : تمام مرورگرها
 

آموزش CSS | مقدمه ای بر CSS | CSS چیست؟

css-icon

آموزش CSS | مقدمه ای بر CSS | CSS چیست؟
آموزش کامل css | آموزش css همراه با مثال
در این بخش آموزش CSS به طور کاملا تصویری و با مثال های مختلف برای درک بهتر آموزش داده می شود

CSS روشی است برای تغییر ظاهری اسناد HTML یا صفحات وب . به این صورت که شما به راحتی می توانید با استفاده از دستوراتی که در ادامه به طور کامل برای شما توضیح میدهم ظاهر یک صفحه وب را تغییر بدهید .
به عنوان مثال رنگ فونت ، خط دور تصاویر ، رنگ پس زمینه ، رنگ لینکها و ... را می توانید با استفاده از دستورات CSS تغییر بدهید . دستوراتی که در فایل CSS استفاده می شود می تواند به طور مستقیم در خود کدهای Html هم تایپ شوند اما به چند دلیل این روش پیشنهاد نمی شود :
1. تکرار و دوباره نویسی دستورهای CSS
2. کند شدن سرعت بارگذاری صفحه

3. مشکل شدن کد نویسی و خوانایی کدها
Css هم مانند جاوا اسکریپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین ظاهر بخش های مختلف یک صفحه استفاده کنیم. به این صورت که با استفاده از یک لینک در بین تگ head فایل css را فراخوانی کرده و با توجه به دستورات مورد نظری که در فایل css وجود دارد شکل ظاهری تغییر می کند .

مشترک این خوارک خبری شوید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»