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

rss rss rss

لوگو اسپانسر
رپورتاژ ها
  علل اصلی خرابی گیربکس s5 چیست؟
  بروکر آلپاری
  دانستنی های مهاجرت به قبرس شمالی و اروپایی
  خشکسالی کشاورزی در ایران
  استخراج ارز دیجیتال چیست و چگونه انجام می‌شود؟
  پارمیس تولید کننده نرم افزارهای مالی و اداری در ایران
  با بررسی تخصصی دوربین آیفون 15 پرو شناخت کاملی از آن خواهید داشت!
  مهاجرت به قبرس شمالی از طریق خرید ملک
  رفع ارور خطا در بازی خدای جنگ یک
  5 مرحله ایجاد کسب و کار آنلاین
  قبرس، مقصدی ایده آل برای مهاجرت
  كامپوزيت ونير
  فستیوال های قشم
  معرفی نرم افزارهای مالی و حسابداری پارمیس



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

تعبیر خواب
استفاده از کلاس و id در طراحی صفحات با 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=”#”>لینک آزمایشی شماره ۱</a>
</div>
<a href=”#”>لینک آزمایشی شماره ۲</a>

همانطور که در مثال بالا می بینید خواص لینک آزمایشی شماره ۱ تحت تأثیر
استایل مورد استفاده برای تگ DIV قرار دارد ولی لینک آزمایشی شماره ۲ مانند
سایر لینکهای خارج از 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”>این یک سرفصل با اندازه ۳ است</h3>
<div id=”border”>این قسمت یک div است </div>

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

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

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

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

p#border { border: green thin solid }

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

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



 

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

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

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