تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

یکشنبه 12 آبان 1392

آموزش تخصصی css قسمت سوم

نویسنده: امیر حسینی   


22. جوییه 2010 11:28

دور قاب CSS (CSS Box Model)

تمامی عناصر HTML را می توان box در نظر گرفت. در CSS، عبارت "box model" هنگام صحبت در مورد design و layout استفاده می شود.

CSS Box Model، الزاماً یک box است که دور عناصر HTML را می گیرد، و تشکیل شده است از: حاشیه ها، قاب ها (border)، padding، و محتوای واقعی.

box model، به ما اجازه می دهد قابی را اطراف عناصر و فضای عناصر در رابطه با عناصر دیگر قرار دهیم.

تصویر زیر، box model را تشریح می کند:

clip_image001

توضیح بخش های مختلف:

margin: نواحی اطراف border را پاک می کند. margin رنگ پیش زمینه ندارد، و کاملا شفاف است

border: یک border اطراف padding و content را می پوشاند. border، از رنگ پیش زمینه box تاثیر می گیرد

padding: نواحی اطراف content را پاک می کند. padding از رنگ پیش زمینه box تاثیر می گیرد

content: محتوای box، یعنی جاییکه متن و تصاویر ظاهر می شوند

به منظور تنظیم صحیح پهنا و ارتفاع عنصر در همه مرورگرها، باید بدانید box model چگونه کار می کند.

پهنا و ارتفاع عنصر

نکته مهم: هنگامی که پراپرتی پهنا و ارتفاع عنصر با CSS را تعیین می کنید، فقط پهنا و ارتفاع ناحیه content را تعیین می کنید. به منظور درک اندازه عنصر، همچنین باید padding، border، و margin را نیز اضافه کنید.

کل پهنای عنصر در مثال زیر، 300px است:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

بیایید محاسبه ریاضی اش را هم انجام دهیم:

250px (پهنا)
+ 20px (چپ و راست padding )
+ 10px (چپ و راست border )
+ 20px (چپ و راست margin )
= 300px

تصور کنید فقط 250px فضا دارید. بیایید عنصری با پهنای کل بسازیم:

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

 

کل پهنای عنصر همیشه باید بصورت زیر برگزار شود:

کل پهنای عنصر = پهنا + padding چپ + padding راست + border چپ + border راست + margin چپ + margin راست

کل ارتفاع عنصر نیز باید بصورا زیر محاسبه شود:

کل ارتفاع عنصر = ارتفاع + padding بالا + padding پایین + border بالا + border پایین + margin بالا + margin پایین

مبحث سازگاری مرورگرها

اگر مثال قبلی را در Internet Explorer امتحان کرده باشید، دیده اید که کل ارتفاع دقیقاً 250px نبود.

IE، هنگام تعیین پراپرتی پهنا، padding و border را در پهنا محاسبه می کند، مگر اینکه یک DOCTYPE تعریف شود.

برای حل این مشکل، کافیست یک DOCTYPE به کد اضافه کنید:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

 

CSS Border

پراپرتی های CSS border، به شما اجازه تعیین استایل و رنگ border عنصر را می دهند.

استایل border

پراپرتی border-style، تعیین می کند چه نوع borderیی نمایش داده شود.

clip_image001[12] هیچ یک ازپراپرتی های border تا وقتی که پراپرتی border-style تنظیم نشوند، تاثیری نخواهند داشت!

valueهای border-style

none: بدون border

dotted: یک border نقطه چین تعریف می کند

dashed: یک border خط چین تعریف می کند

solid: یک border با خط صاف تعریف می کند

double: دو border تعریف می کند. پهنای این دو border، اندازه valueی border-width است

groove: یک border سه بعدی تعریف می کند. ابن افکت بستگی به valueی border-color دارد

پهنای border

پراپرتی border-width برای تنظیم پهنای border استفاده می شود.

پهنا به صورت پیکسل، یا با استفاده از یکی از valueی از پیش تعریف شده نازک، متوسط، و ضخیم تنظیم می شود.

نکته: پراپرتی border-width در صورتی که به تنهایی استفاده شود، موثر نخواهد بود. ابتدا از پراپرتی border-width برای تنظیم borderها استفاده کنید.

 

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

 

رنگ border

پراپرتی border-color برای تنظیم border استفاده می شود. رنگ را می توان به طرق زیر تنظیم کرد:

  • نام – نام یک رنگ، مثلاً "قرمز"
  • RGB – مقدار RGB، مثلاً "rgb(255,0,0)"
  • Hex – مقدار Hex، مثلاً ""#ff0000

همچنین می توان رنگ border را به صورت "شفاف" نیز تنظیم کرد.

نکته: پراپرتی "border-color" در صورتی که به تنهایی استفاده شود، کار نمی کند. ابتدااز پراپرتی "border-style" جهت تنظیم borderها استفاده کنید.

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

 

Border – ضلع های مجزا

در CSS، ایجاد borderهای مختلف برای ضلع های مختلف ممکن است.

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

مثال بالا را با یک پراپرتی واحد نیز می توان تنظیم کرد:

border-style:dotted solid;

 

راپرتی border-style ممکن است از یک تا چهار value داشته باشد.

  • border-style: dotted solid double dashed
    • border بالا، نقطه چین است
    • border سمت راست، خط صاف است
    • border پایین، دوبل است
    • border سمت چپ، خط چین است
  • border-style: dotted solid double
    • border بالا، نقطه چین است
    • border های سمت راست و چپ، خط صاف هستند
    • border پایین، دوبل است
  • border-style: dotted solid
    • border های سمت بالا و پایین، نقطه چین هستند
    • border های سمت راست و چپ، خط صاف هستند
  • border-style: dotted
    • همه borderها، خط صاف هستند

در مثلا بالا، از پراپرتی border-style استفاده شده است؛ اما با border-width و border-color نیز کار می کند.

Border – پراپرتی سریع نویسی (Shorthand property)

همانطور که در مثال بالا می بینید، هنگام کارکردن با borderها، پراپرتی های زیادی وجودی دارند.

برای کوتاه کردن کد، می توان همه پراپرتی های border را می توان در یک پراپرتی خلاصه کرد. این پراپرتی، shorthand property نامیده می شود.

پراپرتی سریع نویسی برای پراپرتی بردر، "border" است:

border:5px solid red;

 

هنگام استفاده از پراپرتی border، ترتیب valueها عبارت است از:

  • border-width
  • border-style
  • border-color

اگر یکی از valueهای بالا وجود نداشته باشد، تا وقتی که valueهای دیگر در ترتیب خود باشند، مشکلی پیش نمی آید.

outlineهای CSS

outline، خطی است که اطراف عناصر و بیرون از لبه border کشیده می شود تا عنصر را برجسته تر کند.

پراپرتی outline، استایل، رنگ، و پهنای outline را تنظیم می کند.

مثال زیر چگونگی رسم یک outline را در اطراف عنصر نشان می دهد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p
{
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>

<body>
<p><b>Note:</b> Internet Explorer 8 (and higher) supports the outline property
if a !DOCTYPE is specified.</p>
</body>
</html>

 

Margin در CSS

پراپرتی margin، فضای اطراف عناصر را تعریف می کند.

margin، فضای اطراف عنصر (بیرون border) را پاک می کند. margin، رنگ پیش زمینه ندارد، و کاملا شفاف است.

margin بالا، راست، پایین، و چپ را می توان با استفاده از پراپرتی های جداگانه، بطور مستقل تغییر داد. برای تغییر همه marginها بطور همزمان، می توان از پراپرتی shorthand margin استفاده کرد.

Valueهای ممکن

image

Margin- ضلع های مجزا

در CSS، ایجاد borderهای مختلف برای ضلع های مختلف ممکن است.

 


margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

 

Margin – پراپرتی سریع نویسی ((Shorthand property

برای کوتاه کردن کد، می توان همه پراپرتی های border را می توان در یک پراپرتی خلاصه کرد. این پراپرتی، shorthand property نامیده می شود.

پراپرتی سریع نویسی برای همه پراپرتی های مارجین، "margin" است:

margin:100px 50px;

 

پراپرتی مارجین ممکن است از یک تا چهار value داشته باشد:

margin: 25px 50px 75px 100px

  •  
    • margin بالا، 25px است
    • margin سمت راست، 50pxاست
    • margin پایین، 75px است
    • margin سمت چپ، 100px است

margin: 25px 50px 75px

  •  
    • margin بالا، 25px است
    • margin های سمت راست و چپ، 50px هستند
    • margin پایین، 75px است

margin: 25px 50px

  •  
    • margin های سمت بالا و پایین، 25px هستند
    • margin های سمت راست و چپ، 50px هستند

margin: 25px

  •  
    • همه marginها، 25px هستند

Padding در CSS

پراپرتی CSS padding، فضای بین border عنصر و محتوای عنصر را تعریف می کند.

Padding

padding، فضای اطراف محتوا (درون border) عنصر را پاک می کند. padding تحت تاثیر رنگ پیش زمینه عنصر است.

padding بالا، راست، پایین، و چپ را می توان با استفاده از پراپرتی های جداگانه، بطور مستقل تغییر داد. برای تغییر همه paddingها بطور همزمان، می توان از پراپرتی shorthand padding استفاده کرد.

Valueهای ممکن

image

 

Padding- ضلع های مجزا

در CSS، ایجاد paddingهای مختلف برای ضلع های مختلف ممکن است.

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

 

Padding – پراپرتی سریع نویسی ((Shorthand property

برای کوتاه کردن کد، می توان همه پراپرتی های margin را می توان در یک پراپرتی خلاصه کرد. این پراپرتی، shorthand property نامیده می شود.

پراپرتی سریع نویسی برای همه پراپرتی های پدینگ، "padding" است:

padding:25px 50px;

 

پراپرتی پدینگ ممکن است از یک تا چهار value داشته باشد:

padding: 25px 50px 75px 100px

  •  
    • padding بالا، 25px است
    • padding سمت راست، 50pxاست
    • padding پایین، 75px است
    • padding سمت چپ، 100px است

padding: 25px 50px 75px

  •  
    • padding بالا، 25px است
    • padding های سمت راست و چپ، 50px هستند
    • padding پایین، 75px است

padding: 25px 50px

  •  
    • padding های سمت بالا و پایین، 25px هستند
    • padding های سمت راست و چپ، 50px هستند

padding: 25px

  •  
    • همه paddingها، 25px هستند

نظرات() 
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com