ويژگي كلاسHTML براي مشخص كردن كلاس عناصرHTML مورد استفاده قرار ميگيرد.
چند عنصر ازHTML ميتوانند از يك كلاس مشترك استفاده نمايند .
ويژگيclass اغلب به نام معرفي شده در استايل شيت اشاره مي نمايد .با اين نام ميتوان با جاوا اسكريپت ويژگي هاي مرتبط با عناصررا تغيير يا تنظيم نمود .ويژگيclass در تگ شروع عنصر استفاده ميشود.
مثال ـ استفاده از ويژگي كلاس
<!DOCTYPE html> <html> <head> <style>.city { background-color: tomato; color: white; padding: 10px; } </style></head> <body> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </body> </html>
در مثال زير دو عنصر<span> وجود دارد كه از ويژگيclass با مقدار"note"استفاده مي نمايند . هر دو آنها ازاستايل كد مشابهي كه در بخشhead تعريف شده، استفاده ميكند.استايل كدبا.note{} تعريف شده است. .
مثال ـ استفاده از كلاس مشترك
<!DOCTYPE html> <html> <head> <style>.note { font-size: 120%; color: red; } </style></head> <body> <h1>My class="note">Important Heading</h1> <p>This is some class="note">important text.</p> </body> </html>
نكته ـ ويژگيclass را ميتوان درهر عنصري ازHTML استفاده كرد.
توجه ـ نام كلاس به حروف كوچك وبزرگ حساس ميباشد.
نكته ـ مطالب بيشتري ميتوانيد در بخشهاي آموزشCSS دريافت كنيد.
براي ايجاد يك كلاس با كراكتر نقطه"." شروع وبدنبال نام كلاس وسپس براي آن ويژگيهايCSS درداخل براكت({ }) معرفي ميشوند.
مثال ـ ايجاد كلاس با نام"city"
<!DOCTYPE html> <html> <head> <style>.city { background-color: tomato; color: white; padding: 10px; } </style></head> <body> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </body> </html>
عناصرHTML ميتوانند هر كدام بچند كلاس تعلق داشته يا ازآنها استفاده نمايند .يعني چند كلاس در يك ويژگيclass معرفي ميشوند.
براي تعريف چند كلاسه در ويژگيclass نام كلاسها با يك فاصله اعلام ميشوند .
بعنوان مثال
مثال ـ در مثال زير ابتدا عنصر<h2> از دو كلاسcityوmain استفاده مي نمايد.
<h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2>
عناصر مختلفHTML ميتوانند بيك نام كلاس اشاره نمايند .
در مثال زيرهر دو عنصر<p> و <h2> به كلاس "city"اشاره ميگنند .اين كلاس دراستايل شيت يك جا تعريف گرديده است.
مثال ـ كلاس مشترك عناصر مختلف
<h2 class="city">Paris</h2> <p class="city">Paris is the capital of France.</p>
بانام كلاس همچنين مي توان در جاوا براي انجام موارد خاص روي عناصر استفاده كرد .با تابع getElementsByClassName( )در جاوااسكريپت با نام كلاس ميتوان به عنصر دسترسي داشت.
مثال ـ روي كليد پيش بيني شده كليك كنيد تاعنصريكه از كلاس"city"استفاده ميكند، پنهان شود.
<script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script >
توجه ـ توابع جاوا اسكريپت به حروف حساس هستند، در استفاده از آنها دقت كنيد. براي اطلاعات بيشتر جاوا اسكريپت را مطالعه فرمائيد.