آموزش CSS بخش پنجم

خب تا الان با شکل کلی دستورات CSS و چگونگی اون آشنا شدید. از الان سعی می کنم کلیه دستورات مربوط به یک خاصیت رو بذارم.

از خاصیت border شروع می کنیم. border یا همون کادر می تونه دور پاراگراف ها و بخش ها بیاد. border چند خاصیت رو می تونه بپذیره :

border-top, border-left, border-right, border-bottom

برای تعیین خواص مربوط به کادر بالا و پایین و چپ و راست هست که هر کدوم خواص دیگه ای به شرح زیر می گیرن :

style, width, color

خاصیت style به صورت زیر مقادیری رو می پذیره :

This is a none border style sample in css

This is a solid border sample style in css

This is a dashed border sample style in css

This is a dotted border sample style in css

This is a double border sample style in css

This is a groove border sample style in css

This is a hidden border sample style in css

This is a inset border sample style in css

This is a outset border sample style in css

This is a ridge border sample style in css

none کادر نمایش داده نمیشه.

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

dashed به صورت نقطه چین بزرگ نمایش میده.

dotted به صورت نقطه چین کوچک نمایش میده.

double به صورت 2کادری یا 2 خطی نمایش میده.

groove به صورت شیار نمایش میده.

hidden مثل none هست و نمایش داده نمیشه.

inset به صورت گودی و تو رفته نمایش میده.

outset به صورت برجسته با سایه زیاد تر نمایش میده.

ridge به صورت برجسته با سایه کمتر نشون میده.

<p style="border-style:none">This is a none border style sample in css</p>
<p style="border-style:solid">This is a solid border sample style  in css</p>
<p style="border-style:dashed">This is a dashed border sample style  in css</p>
<p style="border-style:dotted">This is a dotted border sample style  in css</p>
<p style="border-style:double">This is a double border sample style  in css</p>
<p style="border-style:groove">This is a groove border sample style  in css</p>
<p style="border-style:hidden">This is a hidden border sample style  in css</p>
<p style="border-style:inset">This is a inset border sample style  in css</p>
<p style="border-style:outset">This is a outset border sample style  in css</p>
<p style="border-style:ridge">This is a ridge border sample style  in css</p>

خاصیت width مقادیر ی رو به صورت زیر می پذیره :

This is a usual solid border style sample in css

This is a thin solid border sample style in css

This is a medium solid border sample style in css

This is a thick solid border sample style in css

This is a 10px width solid border sample style in css

thin کادر رو بصورت نازک نمایش میده.

medium متوسط و thick ضخیم و همچنین می تونید خودتون برحسب پیکسل عرض کادرتون رو مشخص کنید.

<p style="border-style:solid">This is a usual solid border style sample in css</p>
<p style="border-style:solid;border-width:thin;">This is a thin solid border sample style  in css</p>
<p style="border-style:solid;border-width:medium;">This is a medium solid border sample style  in css</p>
<p style="border-style:solid;border-width:thick;">This is a thick solid border sample style  in css</p>
<p style="border-style:solid;border-width:10px;">This is a 10px width solid border sample style  in css</p>

خاصیت color که رنگ ها رو بر اساس rgb به صورت هگزادسیمال یا مبنای 16 می پذیره و رنگ کادر رو تعیین می کنه :

This is a green solid border sample style in css

<p style="border-color:#0f0;">This is a green border sample style in css</p>

شما می تونید مثل کد زیر برای هر کدوم از خطوط کادرتون یک خاصیت جداگانه به کار ببرید:

This is a customize border sample style in css

  <p style="border-style:solid;
  border-left-style:hidden;
  border-right-style:hidden;
  border-top-style:solid;
  border-top-color:#0f0;
  border-bottom-color:#00f;
  border-bottom-width:5px;">This is a customize border sample style in css</p>

لوگوی گوگل برای فینال جام جهانی ۲۰۱۰

آموزش SilverLight 4

لینک زیر آموزش SilverLight 4 هست که خود مایکروسافت اون رو درست کرده. حجمش یکم زیاده اما ارزش دانلود کردن داره.

توش تمام کارایی های جدید SilverLight 4 تویح داده شده. مثال هایی از کارکرد های مختلف اون همراه سورس کد ها رو داره مثل کار با وب کم و ضبط صدا و ...

لینک دانلود SilverLight 4 Training

FireFox 4 Beta

فایرفکس رو نصب کردم. ظاهر جالبی داشت.ساده اما راحت و چشم نواز.

بالا بودن سرعت ش واقعا محسوس هست. من نسخه 3.6.6 رو که استفاده می کردم سرعت اجرای جاوا و لودینگ صفخات بالاتره.

چند تا صفحه سنگین رو که قبلا ریاد می رفتم باز کردم مدت زمان لودش کمتر شده بود.

سرعت اجرای جاوا بالا بود.

توی لود قالب صفحات مشکلی نداشت.

یه جا خوندم از html5 هم پشتیبانی می کنه.

منوش رفته سمت راست روی نوار بالا.

گوگل به عنوان موتور جستجوی پیش فرضش هست.

در کل سریع عادت می کنید بهش.

بلاخره FireFox4 Beta هم اومد

تقریبا بعد از 2 سال موزیلا این روباه آتشین محبوب رو با نسخه 4 بتا منتشر کرد. احتمال داشتن باگ توی نسخه بتا هست. اما باز من لینک دانلودش رو میذارم تا دوستانی که می خوان دانلود کنن. خودمم دارم دانلود می کنم. تصاویرش رو که دیدم از نظر ظاهری یه جورایی مثله کروم شده. تا ببینیم چی میشه نصبش کردم حتما براتون می نویسم ازش.

لینک دانلود FireFox4 Beta