منو اصلی
  صفحه اصلی
  تبلیغات
  تماس با ما
تبلیغات
تور کیش
ابزار وب مسترها
  ابزار مجله در وبلاگ
  گوگل پلاس در وبلاگ
  شمارنده مطالب
  پازل وبلاگ
  تولبار حرفه ای
  ابزار پرش به بالا
  ذکر ایام هفته
  استخاره آنلاین
  سخنان بزرگان
  نمایش رتبه گوگل
  وضعیت آب و هوا
  اوقات شرعی
  فونت های زیباسازی
  کدهای زیباسازی فلش
  فال روزانه
  فال حافظ
  فال کلیکی
  فال انبیا
  طالع بینی ازدواج
  طالع بینی هندی
  عشق سنج آنلاین
  موسیقی لایت در وبلاگ
  ساخت موسیقی آنلاین
  ساعت های فلش
  ابزار فرم تماس با ما
  چت روم
  تصاویر تصادفی
  تصاویر زیباسازی
  لودینگ وبلاگ
  جستجوگر گوگل
  تعیین وضعیت یاهو
  ساخت ایمیل آیکون
  تقویم رومیزی
  تغییر شکل موس
  نمایشگر آی پی
  تعبیر خواب
  نمایش تاریخ
  بارش برف در وبلاگ
  پرواز بادکنک در وبلاگ
  پرواز حباب در وبلاگ
  قطرات شبنم در وبلاگ
  ابزار مبدل تاریخ ها
  جملات عاشقانه تصادفی
  جملات تصادفی شریعتی
  حدیث تصادفی
  اس ام اس تصادفی
  دانستنی های تصادفی
  مترجم گوگل
  معرفی وبلاگ به دوستان
  سرویس whois دامنه
  ابزار ار اس اس ریدر
  کد آپلود عکس
  دیکشنری آنلاین
  ساخت صفحات پاپ آپ
  ساخت تصاویر ثابت
  روزنما با مناسبت ها
  لحظه شمار غیبت امام زمان
  کدهای کاربردی
آرشیو قالب ها

rss rss rss

همکاران ما

مرجع موسیقی بی کلام  بک لینک

رپورتاژ ها
  خرید اینترنتی پوشک مولفیکس
  انواع پارتیشن اداری دوجداره آلومینیومی ، ام دی اف و شیشه ای
  مرجع دانلود رایگان بازی و برنامه اندروید
  فیلم متری شیش و نیم با لینک مستقیم
  استفاده از دستگاه تسمه کش
  فلزیاب چیست و چه کاربردهایی دارد؟
  فروش بیسیم و واکی تاکی مجاز
  نمایندگی تعمیر یخچال | تعمیرات یخچال فریزر در محل
  سامانه ثبت نام وام ازدواج در کوتاه ترین زمان
  نکات سئو که باید در هنگام طراحی سایت رعایت کرد
  دانلود آهنگ
  اسپیس فریم، فروش اسپیس فرم، اجاره اسپیس فرم
  فروش اسپیس، اجاره اسپیس، اسپیس کارکرده
  اسپیس کار کرده، اسپیس نمایشگاهی، فروش و اجاره اسپیس فرم، اسپیس، قیمت اسپیس فریم
  اسپیس ارزان، اجاره اسپیس فریم، فروش اتصالات اسپیس فریم، اسپیس فرم نمایشگاهی، ساخت ایستگاه صلواتی با اسپیس فریم
  اسپیس فریم اجاره‌ای، اسپیس فرم، فروش اسپیس فریم کارکرده
  بهترین روش کاشت مو کدام روش است؟
  پنل اس ام اس رایگان پرند پیامک



پنل اس م اس رایگان

تعبیر خواب
1 2
وارد کردن CSS در تگهای HTML با استفاده از شناسه Style  موضوع: آموزش CSS

ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است.
برای افزودن استایل به یک تگ باید عبارت ” “=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

<div style=”property:value”

برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

<div style=”color:green”>متن داخل DIV </div>

توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( :
) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین
لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( ” ) قرار دهیم.

ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است.
برای افزودن استایل به یک تگ باید عبارت ” “=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

<div style=”property:value”

برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

<div style=”color:green”>متن داخل DIV </div>

توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( :
) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین
لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( ” ) قرار دهیم. می
توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:

متن داخل DIV

به خاطر داشته باشید که برای اینکه خاصیت این استایل از بین برود باید
تگی را که استایل در آن به کار رفته است ببندید. در اینجا تا زمانی که تگ
DIV بسته نشده باشد متن ما به رنگ قرمز نمایش داده خواهد شد.

این امکان نیز وجود دارد که به یک تگ HTML بیش از یک ویژگی افزوده شود.
تنها کافی است بین ویژگیهای مختلف از یک نقطه ویرگول ( ; ) استفاده کنیم.
برای مثال اگر بخواهیم متنی که در یک DIV قرار دارد به رنگ قرمز و به صورت ایتالیک باشد می توانیم به صورت زیر کد DIV را بنویسیم:

<div style=”color:red; font-style:italic”>این متن قرمز رنگ و ایتالیک است.</div>

نتیجه به صورت زیر خواهد بود:

این متن قرمز رنگ و ایتالیک است.

در این روش می توانیم به هر تعداد که لازم باشد از ویژگیهای مختلف درون یک تگ HTML استفاده کنیم. به مثال زیر توجه کنید:
 

<div style=”color:blue; font-style:italic;
font-weight:bold; font-size:12pt; text-align:center”>متن مورد نظر
اینجا قرار می گیرد.</div>

در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت 12pt و در وسط صفحه خواهیم داشت:

متن مورد نظر اینجا قرار می گیرد.

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



http://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png
استفاده از کلاس و id در طراحی صفحات با CSS  موضوع: آموزش CSS
  • سلکتور کلاس

با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را
تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته
باشیم: یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع
پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت
زیر می نویسیم:

p.black {color: black}
p.red {color:red
{

در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه “class=”black در تگ <p> استفاده کنیم و برای پاراگراف قرمز از شناسه “class=”red.
البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که
مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد.

  • سلکتور کلاس

با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را
تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته
باشیم: یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع
پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت
زیر می نویسیم:

p.black {color: black}
p.red {color:red
{

در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه “class=”black در تگ <p> استفاده کنیم و برای پاراگراف قرمز از شناسه “class=”red.
البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که
مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در
مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML
ملاحظه کنید:

<p class=”black”>این متنی است که به رنگ مشکی نمایش داده می شود</p>
<p class=”red”>این متن به رنگ قرمز نمایش داده می شود.</p>

نکته : شما می توانید بیش از یک کلاس برای یک تگ HTML تعریف کنید اما برای این کار نباید دو بار از شناسه class استفاده کرد. بلکه باید در یک شناسه class
نام دو کلاس مورد نظر را با یک فاصله بین آنها وارد کرد. برای مثال برای
پاراگراف زیر از دو کلاس فرضی red و center استفاده شده است:

<p class=”red center”>این متن پاراگرافی است که تحت تأثیر دو کلاس red و center قرار دارد</p>

در نوشتن استایل می توان از نوشتن نام تگ در سلکتور کلاس چشم پوشی کرد.
در این صورت ویژگیهای تعریف شده در آن کلاس بر هر تگ HTML که از کلاس
مربوطه در شناسه class آن استفاده شده باشد اثر می گذارد. برای مثال در
کلاس زیر ویژگی وسط چین را تعریف می کنیم و از نام تگ در سلکتور کلاس
استفاده نمی کنیم:

.center {text-align: center}

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

<p class=”center”>متن این پاراگراف به صورت وسط چین نمایش داده می شود</p>
<div class=”center”>متن این قسمت به صورت وسط چین نمایش داده می شود</div>
<h2 class=”center”>متن این سرفصل به صورت وسط چین نمایش داده می شود</h2>

تذکر : هیچ وقت نام کلاس را با یک عدد شروع نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن کلاس استفاده کنند.

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

در این مثال از استایل زیر در استفاده می کنیم:

.test { border: #F00 1px double }
.test a { color: green }
.test a:hover { border: yellow 2px solid }

کد HTML زیر برای این مثال مورد استفاده قرار می گیرد:

<div class=”test”>
<a href=”#”>لینک آزمایشی شماره 1</a>
</div>
<a href=”#”>لینک آزمایشی شماره 2</a>

همانطور که در مثال بالا می بینید خواص لینک آزمایشی شماره 1 تحت تأثیر
استایل مورد استفاده برای تگ DIV قرار دارد ولی لینک آزمایشی شماره 2 مانند
سایر لینکهای خارج از DIV نمایش داده می شود.

 


  • افزودن استایل به نوع مشخصی از عناصر

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

  • <“input type=”text>
    کادرهای متنی که در فرمها استفاده می شود.
  • <“input type=”checkbox>
    چک باکس هم با استفاده از تگ <input> به وجود می آید.
  • <“input type=”radio>
    در ساختن دکمه های رادیو هم از همان تگ استفاده می شود.
  • <“input type=”button>
    این تگ در ساختن هم استفاده می شود.
  • <“input type=”submit>
    برای ساختن دکمه ارسال فرم هم از تگ <input> استفاده می شود.

حالا فرض کنید ما در یک صفحه از چند نمونه از عناصر بالا استفاده کرده
ایم ولی فقط می خواهیم ویژگیهای یکی از آنها را تغییر دهیم. دو روش برای
این کار وجود دارد: یکی استفاده از کلاس است که در این روش اگر تعداد زیادی
از عنصر مورد نظر در صفحه وجود داشته باشد باید به همان تعداد از شناسه
class در تگهای آنها استفاده کنیم و ممکن است این کار باعث افزایش حجم صفحه
یا موجب سختی در نوشتن کد شود. روش دوم تعریف کردن سلکتور input برای
عناصر مورد نظر است که به صورت زیر انجام می گیرد:

فرض کنید می خواهیم فقط عرض کادرهای متنی را در صفحه تغییر دهیم. در
صورتی که در استایل از سلکتور input به تنهایی استفاده کنیم عرض همه چک
باکسها ، دکمه ارسال، دکمه های رادیو و سایر عناصری که از تگ <input>
استفاده کرده اند نیز تغییر می کند. برای انجام این کار می توانید سلکتور
را به صورت زیر تعریف کنیم:

input[type=”text”] {
width: 200px
}

کد استایلی که در بالا نوشتیم فقط بر روی کادر های متنی که در آنها از شناسه “type=”text استفاده شده است اثر می گذارد.

البته این روش ممکن است در مرورگر Internet Explorer پشتیبانی نشود اما مرورگرهای Firefox و Opera از آن پشتیبانی می کنند.

 


سلکتور id

روش دیگری که برای تعریف استایل وجود دارد استفاده از id است. شناسه id
احتمالاً در آینده جایگزین شناسه name در تگهای HTML می شود بنا بر این در
هرصفحه نباید بیش از یک بار از هر ID استفاده شود. اگر بیش از یک بار از یک
id استفاده شود کارایی صفحه تغییری نمی کند ولی صفحه اعتبار خود را از دست
می دهد. سلکتور id با علامت # مشخص می شود. با استایل زیر همه عناصر که
شناسه “id=”border دارند با کادری سبز رنگ نمایش داده می شوند:

#border { border: green thin solid }

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

<h3 id=”border”>این یک سرفصل با اندازه 3 است</h3>
<div id=”border”>این قسمت یک div است </div>

در قسمت زیر می توانید نتیجه کد بالا را مشاهده کنید:

این یک سرفصل با اندازه 3 است

این قسمت یک div است

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

p#border { border: green thin solid }

استایل بالا فقط روی پاراگرافی که شناسه “id=”green در آن به کا رفته اثر می گذارد.

نکته : هرگز نام یک id را با یک عدد آغاز نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن استفاده کنند.



http://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png
آموزش کار با استایل (CSS)  موضوع: آموزش CSS

CSS یا همان Cascading Style Sheet
روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه
صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون
استفاده از کدهای HTML.
از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث
مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود
جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک
صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به
کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا
اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن
جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن
استفاده کنیم.

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

در این قسمت به معرفی قابلیتهای مختلف CSS خواهیم پرداخت . چون این قسمت در سایت ما به تازگی راه اندازی شده است هنوز کامل نشده و به مرور زمان سعی می کنیم آنرا کاملتر کنیم.

اگر انتقاد یا پیشنهادی برای بهتر شدن این قسمت دارید می توانید از طریق
«فرم تماس با ما» ما را مطلع کنیم. ما نیز خوشحال می شویم از نظرات شما در
جهت بهبود این بخش استفاده کنیم.

CSS یا همان Cascading Style Sheet
روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه
صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون
استفاده از کدهای HTML.
از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث
مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود
جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک
صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به
کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا
اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن
جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن
استفاده کنیم.

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

در این قسمت به معرفی قابلیتهای مختلف CSS خواهیم پرداخت . چون این قسمت در سایت ما به تازگی راه اندازی شده است هنوز کامل نشده و به مرور زمان سعی می کنیم آنرا کاملتر کنیم.

اگر انتقاد یا پیشنهادی برای بهتر شدن این قسمت دارید می توانید از طریق
«فرم تماس با ما» ما را مطلع کنیم. ما نیز خوشحال می شویم از نظرات شما در
جهت بهبود این بخش استفاده کنیم.



http://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png
نحوه ایجاد کادر برای عناصر صفحه با استفاده از استایل  موضوع: آموزش CSS

کادر (Boder)

border-style

با استفاده از استایل ما می توانیم برای اجزای یک صفحه کادر ایجاد کنیم. با استفاده
از پارامتر border-style می توانیم مشخص کنیم که آیا می خواهیم کادر داشته باشیم یا
نه، و اگر می خواهیم نوع کادری را که می خواهیم ایجاد کنیم مشخص کنیم. در اینجا می
توانید برخی از مقادیری را که می توانیم برای border-style استفاده کنیم را ببینید:

  1. none
    با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی
    که مقداری غیر از none تعیین شود کادر خواهیم داشت.
     
  2. solid
     

    This DIV have a solid border

  3. dashed
     

    This DIV have a dashed border

  4. dotted
     

    This DIV have a dotted border

  5. double
     

    This DIV have a double border

  6. groove
     

    This DIV have a groove border

  7. hidden
     

    This DIV have a hidden border

  8. inset
     

    This DIV have a inset border

  9. outset
     

    This DIV have a outset border

  10. ridge
     

    This DIV have a ridge border

کادر (Boder)

border-style

با استفاده از استایل ما می توانیم برای اجزای یک صفحه کادر ایجاد کنیم. با استفاده
از پارامتر border-style می توانیم مشخص کنیم که آیا می خواهیم کادر داشته باشیم یا
نه، و اگر می خواهیم نوع کادری را که می خواهیم ایجاد کنیم مشخص کنیم. در اینجا می
توانید برخی از مقادیری را که می توانیم برای border-style استفاده کنیم را ببینید:

  1. none
    با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی
    که مقداری غیر از none تعیین شود کادر خواهیم داشت.
     
  2. solid
     

    This DIV have a solid border

  3. dashed
     

    This DIV have a dashed border

  4. dotted
     

    This DIV have a dotted border

  5. double
     

    This DIV have a double border

  6. groove
     

    This DIV have a groove border

  7. hidden
     

    This DIV have a hidden border

  8. inset
     

    This DIV have a inset border

  9. outset
     

    This DIV have a outset border

  10. ridge
     

    This DIV have a ridge border

همانطور که می بینید عرض این کادرها بیش از آن چیزی است که ما نیاز داریم چون ما
برای این کادرها عرضی مشخص نکردیم. اگر بخواهیم عرض این کادرها به اندازه مشخصی باشد
باید از پارامتر width که قبلاً با آن آشنا شدیم استفاده کنیم. به مثال زیر توجه کنید:

<div style=”width:300px; border-style:solid”>برای این کادر
عرض 300 پیکسل تعیین شده است.</div>

نتیجه به این صورت خواهد بود:

برای این کادر عرض 300 پیکسل تعیین شده است.


border-width

این پارامتر به ما اجازه می دهد تا میزان ضخامت کادرها را تعیین کنیم. این پارامتر
می تواند مقادیر زیر را داشته باشد:

  1. مقدار عددی بر حسب پیکسل
    در این روش می توانیم مقدار ضخامت کادر را بر حسب پیکسل تعیین کنیم. به مثال زیر
    توجه کنید:

    <div style=”border-style:solid; border-width:10px”>این
    کادر 10 پیکسل ضخامت دارد</div>

    این هم کادر به دست آمده:
     

    این کادر 10 پیکسل ضخامت دارد

  2. thin
    این مقدار باعث خواهد شد تا کادر ما باریک باشد. مانند زیر:

    <div style=”border-style:solid; border-width:thin”>ضخامت
    این کادر thin در نظر گرفته شده است.</div>

    این هم کادر به دست آمده:
     

    ضخامت این کادر thin در نظر گرفته شده است.

  3. thick
    این مقدار به ما یک کادر ضخیم خواهد داد. به مثال زیر توجه کنید:

    <div style=”border-style:solid; border-width:thick”>ضخامت
    این کادر thick در نظر گرفته شده است.</div>

    نتیجه به صورت زیر خواهد بود:
     

    ضخامت این کادر thick در نظر گرفته شده است.


border-color

شما می توانید در صورت تمایل رنگ کادرهای خود را تغییر دهید. برای این کار باید
از پارامتر border-color استفاده کنید. برای مقدار این پارامتر می توانید از نام رنگها
استفاده کنید. در صورتی که از نام رنگها استفاده کنید فقط می توانید از تعداد کمی از
رنگها استفاده کنید. راه دیگری که برای انتخاب رنگ وجود دارد استفاده از معادل هگزادسیمال
رنگها است که نسبت به نام رنگها انعطاف پذیری بیشتری دارد.
به یک نمونه برای تغییر رنگ کادر توجه کنید:

استفاده از نام رنگها:

<div style=”border-style:solid; border-color:green”>این کادر
به رنگ سبز خواهد بود.</div>
این کادر به رنگ سبز خواهد بود.

استفاده از معادل هگزا دسیمال رنگها:

<div style=”border-style:solid; border-color:#008000″>این کادر
به رنگ سبز خواهد بود.</div>
این کادر به رنگ سبز خواهد بود.



http://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png
تنظیم عرض، ارتفاع، و overflow با CSS  موضوع: آموزش CSS

عرض و ارتفاع

width

این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برای مثال می
توانیم با آن عرض یک DIV را تعیین کنیم. در مثال زیر برای DIV عرضی معادل 200 پیکسل
تعیین می کنیم:

<div style=”width:200px”>این جمله پس از اینکه عرض آن از 200
پیکسل بیشتر شد در سطرهای بعدی ادامه
پیدا می کند.</div>

نتیجه به صورت زیر خواهد بود:

این جمله پس از اینکه عرض آن از 200 پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا
می کند.

مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسل باشد که در
این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن
است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.ض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.

عرض و ارتفاع

width

این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برای مثال می
توانیم با آن عرض یک DIV را تعیین کنیم. در مثال زیر برای DIV عرضی معادل 200 پیکسل
تعیین می کنیم:

<div style=”width:200px”>این جمله پس از اینکه عرض آن از 200
پیکسل بیشتر شد در سطرهای بعدی ادامه
پیدا می کند.</div>

نتیجه به صورت زیر خواهد بود:

این جمله پس از اینکه عرض آن از 200 پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا
می کند.

مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسل باشد که در
این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن
است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.


height

این پارامتر به ما اجازه می دهد تا ارتفاع بخش مشخصی را تعیین کنیم. برای مثال وقتی
که ما این پارامتر را برای یک DIV استفاده می کنیم و مقدار آن را 100 پیکسل قرار می
دهیم تا وقتی که متن موجود در DIV از 100 پیکسل کمتر ارتفاع دارد ارتفاع DIV 100 پیکسل
خواهد بود. ولی وقتی که متن داخل DIV زیاد باشد و از 100 پیکسل بیشتر شود در نتیجه
ارتفاع DVI هم از 100 تجاوز خواهد کرد تا همه متن موجود قابل خواندن باشد. به مثال
زیر توجه کنید:

  1. ابتدا هنگامی که ارتفاع متن از ارتفاع DIV کمتر است:
    <div style=”height:100px”>ارتفاع این متن از 100 پیکسل کمتر
    است.</div>

    ارتفاع این متن از 100 پیکسل کمتر است.
  2. حالا هنگامی که ارتفاع متن از ارتفاع DIV بیشتر است:
    <div style=”height:100px”>ارتفاع<br>این<br>متن از<br>100<br>پیکسل
    <br>کمتر<br>است.</div>

    ارتفاع
    این
    متن از
    100
    پیکسل
    کمتر
    است.

اگر بخواهیم ارتفاع DIV همان 100 پیکسل بماند و تغییر نکند باید از پارامتر overflow
در استایل استفاده کنیم. این پارامتر به ما این امکان را می دهد که تعیین کنیم وقتی
محتویات DIV از عرض یا ارتفاع DIV بزرگتر می شود چگونه نمایش داده شود. در اینجا برای
پارامتر overflow از مقدار hidden استفاده می کنیم که تعیین می کند هر چیزی بزرگتر
از عرض یا ارتفاع DIV نمایش داده نشود. به مثال زیر توجه کنید:

<div style=”height:100px;overflow:hidden”>ارتفاع<br>این<br>متن
از<br>100<br>پیکسل <br>کمتر<br>است.</div>
ارتفاع
این
متن از
100
پیکسل
کمتر
است.

مقادیری که برای پارامتر height قرار می دهید می تواند بر اساس پیکسل باشد که در
این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن
است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.


overflow

وقتی محتویات قسمتی از صفحه طول یا عرضی بزرگتر از آن قسمت در بر گیرنده داشته باشد،
با پارامتر overflow می توانیم مشخص کنیم که آن قسمت زیادی نمایش داده شود یا مخفی
شود. به صورت پیش فرض قسمتهای اضافی نمایش داده می شوند ولی با این پارامتر ما می توانیم
آنها را مخفی کنیم. به مثال زیر توجه کنید:

<div style=”width:200px; overflow:hidden”><nobr>طول این سطر
بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر ز عرض DIV دیده نمی
شوند.</nobr></div>
طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر
از عرض DIV دیده نمی شوند.

به طور کلی چند مقدار را می توانیم برای پارامتر overflow استفاده کنیم:

  1. visible
    یا قرار دادن این مقدار برای overflow همه محتویاتی که طول یا عرض بیش از اندازه
    داشته اند نمایش داده خواهند شد.
  2. hidden
    این مقدار باعث خواهد شد تا محتویات با طول یا عرض بیش از اندازه نمایش داده نشوند.
  3. scroll
    این مقدار باعث خواهد شد تا در صورتی که محتویات اندازه ای بیش از طول و عرض لازم
    دارند با استفاده از اسکرول بار قابل مشاهده باشند.

به یک مثال توجه کنید:

<div style=”width:200px; overflow:scroll; border:dashed 1px #3399FF; white-space:nowrap”>
طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.
</div>

این هم نتیجه:

طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.



http://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png
استفاده از استایل خارجی برای طراحی صفحات HTML  موضوع: آموزش CSS

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

برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یک
فایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:

div { font-family:Arial }
.redtext { color:red }

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر
نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته
باشید که پسوند فایل باید css. باشد. ).

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

برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یک
فایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:

div { font-family:Arial }
.redtext { color:red }

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر
نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته
باشید که پسوند فایل باید css. باشد. ).

برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ
<LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک
نمونه از این تگ را می توانید در اینجا ببینید:

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

شناسه “rel=”stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.

شناسه “type=”text/css مشخص کننده نوع متن فایل برای مرورگر است.

شناسه ” “=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما می
توانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ای
است که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.

حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز
کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن
شوید که آدرس فایل CSS را درست وارد کرده اید:

<link rel=”stylesheet” type=”text/css” href=”http://www.neopersia.org/css/example.css”>

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

حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Arial
خواهد داشت. برای مثال فایل example.css به همین صفحه پیوند شده است و در صورتی که
در این صفحه از DIV استفاده شود محتویات آن با فونت Arial نمایش داده می شوند:

<div>این متن با فونت Arial نمایش داده خواهد شد.</div>

این هم نتیجه:

این متن با فونت Arial نمایش داده خواهد شد.

همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش داده
می شود:

<p class=”redtext”>این متن به رنگ قرمز نمایش داده خواهد شد.<p>

نتیجه به این صورت خواهد بود:

این متن به رنگ قرمز نمایش داده خواهد شد.



http://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png
تعریف کردن استایل در بخش head صفحه HTML  موضوع: آموزش CSS

استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها جلوگیری
کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن HTML خود
تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با <STYLE/> به پایان
می رسد. در قسمت زیر می توانید یک نمونه از استایل را که مشخصاتی را برای تگ <SPAN>
تعریف می کند مشاهده کنید که در بخش HEAD در متن قرار گرفته است.

<head>
<style>
<!–
span { color:red; font-style:italic }
–>
</style>
</head>

همانطور که می بینید استایل با تگ <style> آغاز می شود. سپس یک کامنت را شروع می
کنیم تا مرورگرهایی که از CSS پشتیبانی نمی کنند استایل را نادیده بگیرند و در صفحه
به نمایش در نیاورند. در قسمت بعد این خط را مشاهده می کنید:

span { color:red; font-style:italic }

استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها جلوگیری
کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن HTML خود
تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با <STYLE/> به پایان
می رسد. در قسمت زیر می توانید یک نمونه از استایل را که مشخصاتی را برای تگ <SPAN>
تعریف می کند مشاهده کنید که در بخش HEAD در متن قرار گرفته است.

<head>
<style>
<!–
span { color:red; font-style:italic }
–>
</style>
</head>

همانطور که می بینید استایل با تگ <style> آغاز می شود. سپس یک کامنت را شروع می
کنیم تا مرورگرهایی که از CSS پشتیبانی نمی کنند استایل را نادیده بگیرند و در صفحه
به نمایش در نیاورند. در قسمت بعد این خط را مشاهده می کنید:

span { color:red; font-style:italic }

این خط مشخص می کند که هر بار که در صفحه از تگهای <STYLE> <STYLE/> استفاده می
شود. متن بین آنها به رنگ قرمز و به صورت ایتالیک نمایش داده می شود. در نوشتن
استایل باید در نظر داشته باشید که نباید از علامتهای کوچکتر و بزرگتر ( < و > ) که
در اطراف تگهای HTML استفاده می شود، استفاده کنید. همچنین به جای استفاده از
علامتهای نقل قول ( ” ” ) که در متن HTML استفاده می شود از آکولاد ( { } ) در
اطراف خواص استایل استفاده می کنیم. خواص مختلف یک استایل هم به وسیله یک نقطه
ویرگول ( ; ) از هم جدا می شوند.

وقتی ما استایلی را در بخش HEAD متن خود برای یک تگ خاص تعریف می کنیم برای
محتویات همه تگهایی که استایل برای آن تعریف شده در صفحه مورد استفاده قرار می
گیرد. برای مثال وقتی که ما کد بالا را در HEAD متن خود قرار دادیم، هر تگ <SPAN>
که در صفحه استفاده شود دارای متنی قرمز و ایتالیک است و نیاز ندارید هر بار دوباره
مشخصات متن مورد نظر را تعریف شود.

برای مثال کد زیر را وارد متن HTML خود می کنیم:

<span>این متن قرمز و ایتالیک است،</span> اما این متن خارج
تگ &lt;span&gt; است و مشخصات آنرا ندارد.<br>
<span>این متن نیز قرمز و ایتالیک است.</span>

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

این متن قرمز و ایتالیک است، اما این متن خارج تگ <span> است و
مشخصات آنرا ندارد.
این متن نیز قرمز و ایتالیک است.

با این روش ما می توانیم تقریباً خواص همه تگهای HTML را کنترل کنیم، اما این
کافی نیست. در قسمتهای بعدی روشهایی را معرفی می کنیم که یک استایل مشخص به وسیله
تگهای مختلفی مورد استفاده قرار بگیرد. این کا را با استفاده از CLASS و ID انجام
می دهیم که به آن خواهیم پرداخت.



http://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png
ویژگیهای مربوط به متن در CSS  موضوع: آموزش CSS

در این قسمت به ادامه ویژگیهایی که بر روی متن ها اثر می گذارند می پردازیم.

text-transform

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

در این قسمت به ادامه ویژگیهایی که بر روی متن ها اثر می گذارند می پردازیم.

text-transform

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

به یک مثال در مورد این ویژگی توجه کنید:

<div style=”text-transform: uppercase”>This is an example of uppercase in text-transform property.</div>

این هم نتیجه:

This is an example of uppercase in text-transform property.

همانطور که مشاهده می کنید بدون استفاده از حروف بزرگ در نوشتن کد، متن ما با حروف بزرگ نمایش داده می شود.

این ویژگی چند مقدار دارد که در اینجا مشاهده می کنید:

  • none :
    با انتخاب این گزینه متن به همان صورتی که تایپ شده است نمایش داده می شود.


  • lowercase :
    با انتخاب این گزینه متن با حروف کوچک نمایش داده می شود.


  • uppercase :
    این گزینه متن را با حروف بزرگ نمایش می دهد.


  • capitalize :
    این گزینه حروف اول کلماتی را که با حروف کوچک نوشته شده اند با حروف بزرگ و
    بقیه حروف را با حروف کوچک نمایش می دهد. به مثال زیر توجه کنید:
<div style=”text-transform: capitalize”>this is an example of capitalize value for text-transform propety</div>

متن به صورت زیر نمایش داده می شود:

this is an example of capitalize value for text-transform propety

 


line-height

این ویژگی به ما امکان می دهد تا ارتفاع سطر ها را مشخص کنیم. این
ارتفاع می تواند به صورت درصد یا در مقیاس پیکسل باشد و فاصله بین سطرها را
مشخص می کند.

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

<div style=”line-height: 50px”>بین این سطر و سطر بعدی<br>20 پیکسل فاصله وجود دارد.</div>

نتیجه به صورت زیر خواهد بود:

بین این سطر و سطر بعدی
20 پیکسل فاصله وجود دارد.

 


text-indent

این ویژگی مقدار تو رفتگی متن را در سطر اول هر قسمت (مثلاً سطر اول هر
پاراگراف) مشخص می کند. این مقدار می تواند بر حسب پیکسل یا در صد باشد.

در مثال زیر این مقدار تو رفتگی را 30 پیکسل در نظر می گیریم:

<div style=”text-intend: 30px”>
سطر اول این قسمت با 30 پیکسل تو رفتگی نمایش داده می شود.<br>
در حالی که بقیه سطرها به صورت عادی و<br>
بدون تو رفتگی نمایش داده می شوند.
</div>

این هم نتیجه:

سطر اول این قسمت با 30 پیکسل تو رفتگی نمایش داده می شود.
در حالی که بقیه سطرها به صورت عادی و
بدون تو رفتگی نمایش داده می شوند.



http://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png
ویژگیهای متن در CSS  موضوع: آموزش CSS

در این قسمت برخی از ویژگیهای متن را که در CSS استفاده می شوند به شما
معرفی می کنیم. با کمک این ویژگیها می توانیم نحوه قرار گرفتن متن در صفحه،
فاصله بین حروف و بسیاری از خواص یک متن را تغییر دهیم.

 

letter-spacing

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

فرض کنید می خواهیم از این ویژگی برای متن موجود در یک تگ DIV استفاده کنیم:

<div style=”letter-spacing:5px”>
حروف این متن با فاصله 5 پیکسل از یکدیگر نمایش داده خواهند شد.
</div>

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

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

در این قسمت برخی از ویژگیهای متن را که در CSS استفاده می شوند به شما
معرفی می کنیم. با کمک این ویژگیها می توانیم نحوه قرار گرفتن متن در صفحه،
فاصله بین حروف و بسیاری از خواص یک متن را تغییر دهیم.

 

letter-spacing

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

فرض کنید می خواهیم از این ویژگی برای متن موجود در یک تگ DIV استفاده کنیم:

<div style=”letter-spacing:5px”>
حروف این متن با فاصله 5 پیکسل از یکدیگر نمایش داده خواهند شد.
</div>

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

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

 


text-align

این ویژگی به ما اجازه می دهد تا نحوه قرارگیری قسمتی از متن را از لحاظ راست چین، چپ چین یا وسط چین بودن تنظیم کنیم.

این ویژگی می تواند مقادیر زیر را به مورد استفاده قرار دهد:

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


    right :
    این قدار معین می کند که محتویات یک تگ باید در سمت راست صفحه نمایش داده شوند.


  • center :
    این مقدار محتویات یک تگ را به صورت وسط چین تعریف میکند.

برای مثال اگر می خواهید متنی که در یک DIV قرار دارد به صورت چپ چین
نمایش داده شود می توانیم از این ویژگی به مانند زیر استفاده کنیم:

<div style=”text-align:left; border:thin dashed #00CCFF”>محتویات این DIV در سمت چپ صفحه نمایش داده می شوند.</div>

نتیجه به صورت زیر خواهد بود:

محتویات این DIV در سمت چپ صفحه نمایش داده می شوند.

 


text-decoration

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

<div style=”text-decoration: overline”>به این متن توجه کنید!!</div>

این هم نتیجه:

به این متن توجه کنید!!

این ویژگی چندین مقدار دارد که در اینجا به آنها می پردازیم:

  • none :
    این گزینه به صورت پیش فرض بر روی متن اعمال می شود (البته برای لینکها به
    صورت پیش فرض underline اعمال می شود) و در نتیجه آن متنها به صورت ساده و
    معمولی نمایش داده می شوند. در صورتی که بخواهیم لینکهایی در متن ما بدون
    زیر خط نشان داده شوند می توانیم از این گزینه برای تگ لینک استفاده کنیم.


  • underline :
    از این گزینه می توان برای زیر خط دار کردن متنها استفاده کرد.


  • overline :
    این گزینه برای نمایش خط بالای متن استفاده می شود.


  • line-through :
    این گزینه یک خط را در میانه متن ایجاد می کند و آنرا به صورت خط خورده نشان می دهد.


  • blink :
    از این گزینه می توانیم برای چشمک زن کردن متن استفاده کنیم. البته این
    گزینه توسط مرورگر اینترنت اکسپلورر حمایت نمی شود و فقط در مرورگرهای
    Netscape نمایش داده می شود.

در اینجا یک لینک را می بینید که با استفاده از ویژگی بالا بدون زیر خط نمایش داده می شود:

<a href=”#example” style=”text-decoration:none>متن مورد استفاده در لینک</a>


http://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png
تغییر موقعیت عناصر صفحه با استفاده از CSS  موضوع: آموزش CSS

position

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

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


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


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

position

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

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


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


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

static

این ویژگی در حقیقت مشخص می کند که عنصر مربوطه باید در محلی که کد آن
نوشته شده نمایش داده شود. وقتی که از این ویژگی استفاده می کنیم ویژگیهای
top, left, bottom, right کاربردی ندارند.

این ویژگی به صورت پیش فرض از طرف مرورگر برای صفحه مورد استفاده قرار می گیرد.


fixed

چون اینترنت اکسپلورر بیشتر از سایر مرورگرها مورد استفاده قرار می گیرد
و از ویژگی fixed در CSS پشتیبانی نمی کند زیاد به این ویژگی نمی پردازیم.
اما در هر صورت ویژگی جالبی است. در اینجا فقط به ذکر یک مثال بسنده می
کنیم:

در این مثال از ویژگی position:fixed برای تعیین موقعیت یک DIV استفاده می کنیم:

<div style=”position:fixed; top:50%;
float:right”>اگر با مرورگر netscape یا مرورگرهایی مثل firefox و opera
از این صفحه بازدید کنید محتویات این div در میانه صفحه و سمت راست آن به
نمایش در می آیند.</div>

absolute

ویژگی position:absolute مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است.

در اینجا می توانید یک مثال را در مورد استفاده از ویژگی position:absolute در صفحه ببینید:

<div style=”position:absolute; top:65px;
right:20px; border:double #0033cc; width:350px; color:#ffff00;
background-color:#33cccc; height: 40px;”>این div در موقعیت تعیین شده
در کد آن نمایش داده می شود.</div>

همانطور که در کد بالا می بینید برای DIV موقعیتی با فاصله 65 پیکسل از
بالای صفحه و 20 پیکسل از سمت راست صفحه تعیین کرده ایم.


top

این ویژگی موقعیت یک عنصر را از بالای صفحه تعیین می کند.( ویژگیهای
top, left, bottom, right بیشتر زمانی مورد استفاده قرار می گیرند که برای
یک عنصر ویژگی position تعیین شده باشد. )

در مثال قبل همانطور که ملاحظه می کنید از ویژگی top:65px استفاده شده
است که این ویژگی معین می کند که DIV با فاصله 65 پیکسل از بالای پنجره
مرورگر به نمایش در می آید.

مقداری که برای ویژگیهای top, bottom, left, right در نظر گرفته می شود
به صورت می تواند باشد. یا به صورت عددی در واحد پیکسل که در این صورت باید
پس از عدد مربوطه از حروف اختصاری px استفاده شود یا به صورت درصد که پس
از عدد با ید از علامت درصد (%) استفاده شود.


bottom

کاربردی همانند ویژگی بالا دارد با این تفاوت که میزان فاصله عناصر را
از پایین پنجره مرورگر مشخص می کند.در مثال بعدی از این ویژگی استفاده
خواهیم کرد.


right

این ویژگی فاصله عناصر را از سمت راست صفحه تعیین می کند. همانطور که در
مثال قبل می بینید، از این ویژگی به صورت right:20px استفاده شده است یعنی
DIV مربوطه با فاصله 20 پیکسل از سمت راست پنجره مرورگر قرار خواهد گرفت.


left

این ویژگی موقعیت عنصر را از سمت چپ پنجره مرورگر تعیین می کند.

در مثال زیر از ویژگیهای bottom و left برای همان DIV مثال قبل استفاده می کنیم:

<div style=”position:absolute; bottom:65px;
left:20px; border:double #0033cc; width:350px; color:#ffff00;
background-color:#33cccc; height: 40px;”>این div در موقعیت تعیین شده
در کد آن نمایش داده می شود.</div>

در مثال ذکر شده DIV به اندازه 65 پیکسل از پایین و 20 پیکسل از سمت چپ پنجره مرورگر فاصله دارد.



http://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png
1 2

 

دسترسی سریع
قالب های 3 ستونه
قالب های 2 ستونه
ابزار وبلاگ نویسان
آموزش وبلاگ نویسی
گالری عکس
آپلود عکس
بازی آنلاین
موسیقی لایت
بازی آنلاین

بازی آنلاین 660 بازی
بازی های دخترانه 16 بازی
بازی های ورزشی 97 بازی
بازی های تیراندازی 124 بازی
بازی های فکری 209 بازی
بازی های اکشن 126 بازی
بازی های مسابقه ای 50 بازی
بازی های متفرقه 38 بازی
بازی های محبوب

لینک ها
بک لینک شما در این مکان
کلیه حقوق متعلق به سایت نایت اسکین می باشد © Night-Skin.com 2004-2011