ورود

~~moeinansari~~

با استفاده کردن از کلاس ها میتوانیم برای تگ 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>

**Mansouri** · 94-3-7، 09:04 صبح

نتونستم کامل بخونم فقط یه نکته :
مرورگر های موزیلا و فایرفاکس نیست ! یه مرورگر به نام موزیلافایرفاکس هستش که موتور رندرینگش اعداد رو نمیپذریره .
موفق باشید

ورود
نام کاربری:
گذرواژه‌:	گذرواژه‌تان را فراموش کرده‌اید؟
	مرا به خاطر بسپار

بک لینک