صفت کلاس class ویژگی
کلاس HTML برای تعیین یک کلاس برای یک عنصر HTML استفاده می شود. چندین
عنصر HTML می توانند یک کلاس را به اشتراک بگذارند. استفاده از ویژگی کلاس ویژگی
class اغلب برای اشاره به نام کلاس در یک شیوه
نامه استفاده می شود. همچنین می تواند توسط جاوا اسکریپت برای دسترسی و دستکاری
عناصر با نام کلاس خاص استفاده شود. در
مثال زیر سه عنصر <div> با ویژگی class با مقدار شهر داریم. هر سه عنصر <div> به طور مساوی مطابق با تعریف سبک شهر در
بخش head استایل بندی می شوند:
مثال
<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html>
در مثال زیر دو عنصر <span> با ویژگی class با مقدار "note" داریم. هر دو عنصر <span> مطابق با تعریف سبک .note در بخش head به یکسان استایل بندی می شوند:
نکته:
ویژگی class را می توان در هر عنصر HTML استفاده کرد. توجه:
نام کلاس به حروف بزرگ و کوچک حساس است! نحو کلاس برای
ایجاد یک کلاس؛ یک کاراکتر نقطه (.) و به دنبال آن نام کلاس بنویسید. سپس، ویژگی
های CSS را در بریس های فرفری {} تعریف کنید: مثال <!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 می توانند به بیش از یک کلاس تعلق داشته
باشند. برای
تعریف چند کلاس، نام کلاس ها را با یک فاصله جدا کنید، به عنوان مثال. <div class="city main">. عنصر مطابق با تمام کلاس های
مشخص شده استایل بندی می شود. در
مثال زیر، اولین عنصر <h2> هم به کلاس شهر و هم به کلاس اصلی تعلق
دارد و سبک های CSS را از هر دو کلاس دریافت می کند: مثال <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } .main
{ text-align: center; </style> </head> <body> <h2 class="city main">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>
عناصر مختلف می توانند یک کلاس را به اشتراک
بگذارند
در
مثال زیر، هر دو <h2> و <p> به کلاس "شهر" اشاره می کنند
و سبک یکسانی دارند:
مثال
<html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h2 class="city">Paris</h2> <p class="city">Paris is the capital of
France.</p> </body> </html>
استفاده از ویژگی کلاس در جاوا اسکریپت
نام کلاس همچنین می تواند توسط جاوا اسکریپت
برای انجام وظایف خاص برای عناصر خاص استفاده شود.
جاوا اسکریپت می تواند با متد getElementsByClassName()به عناصری با نام کلاس خاص
دسترسی پیدا کند:
مثال
<!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> <script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script> </body> </html>
خلاصه ی فصل
ویژگی
کلاس HTMLیک یا چند نام کلاس را برای یک
عنصر مشخص می کندکلاس
ها توسط CSS و JavaScript برای انتخاب و دسترسی به عناصر خاص استفاده می شئ
ویژگی
class را می توان در هر عنصر HTML استفاده کرد
نام
کلاس به حروف بزرگ و کوچک حساس است
عناصر
مختلف HTML می توانند به یک نام کلاس اشاره کنند
جاوا
اسکریپت می تواند با متد getElementsByClassName() به عناصری با نام کلاس خاص دسترسی پیدا
کند
عناصر
مختلف HTML می توانند به یک نام کلاس اشاره کنند.
آکادمی آموزشی پیشرو با مجوز رسمی از سازمان آموزش فنی و حرفه ای کشور
آکادمی آموزشی پیشرو از برترین آموزشگاه های تخصصی در رشته های تعمیرات موبایل، کامپیوتر پایه، برنامه نویسی، طراحی وب سایت، گرافیک، طراحی سه بعدی، عکاسی و هنرهای تجسمی، حسابداری، گردشگری، خدمات آموزشی و هوش مصنوعی، در غرب استان تهران شناخته شده است.که تاکنون این افتخار را داشته است که کارجویان و کارآموزان زیادی را به بازار کار ایران معرفی نماید. اگر شما هم تمایل دارید دوره های آموزشی حرفه ای، تخصصی و ویژه بازار کار در دنیای کسب و کار، یا آموزش های علمی، آکادمیک یا هنری را طی کنید، با ما تماس بگیرید.
شما با گذراندن دوره ها و دریافت مدرک معتبر، می توانید به سادگی وارد بازار کار شوید.
ما همواره و حتی سال ها پس از پایان دوره دانشجویانمان، در کنار آنها هستیم و راهنمایی های لازم را به صورت رایگان انجام خواهیم داد.
آدرس آکادمی آموزشی و ساعات کار:
آدرس آموزشگاه:
شهریار خیابان ولیعصر بعد از بانک کشاورزی انتهای بن بست گلپونه مجتمع تیبا طبقه اول
