loading...
وبلاگ آموزشی مهدی
mahdi بازدید : 71 پنجشنبه 26 مرداد 1391 نظرات (0)

صفت Floating


با استفاده از صفت های Floating نحوه قرار گیری عناصر را در صفحه در کنار یکدیگر مشخص می کنیم . 
دو صفت در این قسمت توضیح داده می شود . 1 : Float . 2 .Clear
برای شناور کردن اجسام در کنار هم از صفحه Float استفاده می کنیم . روش کار این صفت به این صورت می باشد که فرض کنید در بالای صفحه شما یک لوگو همراه با یک کادر جستجو دارید و می خواهید هر دو یکی در راست و دیگری در سمت چپ قرار بگیرند . 
CSS به طور پیش فرض یکی را پس از دیگری و در خط بعد قرار میدهد برای اینکه کادر جستجو در کنار لوگو ما در قسمت چپ قرار بگیرد ازصفت Float استفاده می کنیم .

صفت Float دارای 3 ویژگی Right - Left و None  می باشد.
Right : عناصر را به سمت راست شناور می کند .

Left : عناصر را به سمت چپ شناور می کند .

none : تصویر و متن در جایی که متن وجود دارد قرار می گیرد .


ویژگی Right
با توجه به توضیحات بالا می خواهم تصویر را در سمت راست متن قرار بدهم .

 

img
{
float : right ;
}
mahdi بازدید : 108 پنجشنبه 26 مرداد 1391 نظرات (0)

صفت Position


با صفت Position می توانیم تعیین کنیم یک عنصر در صفحه در چه موقعیتی نمایش داده شود . صفت Position دارای ویژگیهای زیر می باشد که به طور مختصر برای شما توضیح میدهم :

Static : این مقدار پیش فرضی است که در صورت تعریف نشدن صفت Position در صفحه استفاده می شود .با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند .

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

Relative : حرکت عنصر نسبت به مکان عادی عنصر دارد . به عنوان مثال Left:20  مقدار 20 پیکسل به موقعیت عادی اضافه می کند.

Fixed : این گزینه به ما اجازه میدهد تا موقعیت عنصر یک صفحه را در پنجره مرورگر مشخص کنیم. در صورتیکه برای یک عنصر از این ویژگی استفاده کنیم موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مروگر را تغییر دهیم به همان صورت قبلی باقی می ماند.البته ویندوز اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند .

با چند مثال ساده با کاربرد ویژگیهای توضیح داده شده بیشتر آشنا می شوید .

 

ویژگی Absolute :

mahdi بازدید : 112 پنجشنبه 26 مرداد 1391 نظرات (0)

صفت Display

 

چگونگی نمایش یک عنصر در صفحه را با صفت Display مشخص می کنیم که دارای ویژگیهای زیر می باشد :

None : عنصر نمایش داده نمی شود

Block : عنصر به صورت یک بلاک نمایش داده می شود و قبل و بعد از عنصر خط شکسته می شود .

Inline : مانند صفت قبل با این تفاوت که خط شکسته نمی شود .
list-item : عنصر به صورت لیست نمایش داده می شود .

run-in : یا به صورت بلاک یا به صورت inline به محتوی بستگی دارد .

compact : مانند صفت قبل می باشد .

table : عنصر را به صورت جدول نمایش می دهد و قبل و بعد عنصر خط شکسته می شود .

inline-table : مانند صفت قبل با این تفاوت که خط شکسته نمی شود .

table-row-group : عنصر را به صورت گروهی از یک یا چند سط نمایش میدهد .

table-header-group : شبیه صفت قبل

table-footer-group : شبیه صفت قبل

mahdi بازدید : 59 پنجشنبه 26 مرداد 1391 نظرات (0)

صفت Dimension

 

با این صفت می توانیم طول و عرض یک عنصر را کنترل کنید. همچنین می توانید فضای بین دو خط را افزایش دهید .

صفت Dimension دارای ویژگیهای زیر می باشد :
height => ارتفاع عنصر را تعیین می کند .
Line-height => فاصله بین خطوط را تعیین می کند . 
max-height => حداکثر ارتفاع یک عنصر را تعیین می کند.

max-width => حداکثر عرض یک عنصر را تعیین می کند.
min-height => حداقل عرض یک عنصر را تعیین می کند .

min-width => حداقل عرض یک عنصر را تعیین می کند .

width => عرض عنصر را تعیین می کند.

ویژگیهای نام برده شده در بالا دارای 4 مقدار هستند :
1. Auto
2. lenght
3. %

تعداد صفحات : 3

اطلاعات کاربری
  • فراموشی رمز عبور؟
  • نظرسنجی
    بیشترین استفاده‌ای که از تلفن همراه‌تان می‌کنید مربوط به چه کاری است؟
    آمار سایت
  • کل مطالب : 1017
  • کل نظرات : 88
  • افراد آنلاین : 3
  • تعداد اعضا : 0
  • آی پی امروز : 147
  • آی پی دیروز : 77
  • بازدید امروز : 206
  • باردید دیروز : 581
  • گوگل امروز : 1
  • گوگل دیروز : 2
  • بازدید هفته : 2,445
  • بازدید ماه : 2,264
  • بازدید سال : 27,317
  • بازدید کلی : 421,341
  • کدهای اختصاصی