آکادمی آموزشی پیشرو
>
65221138 - 65266959 - 09122610233
شهریار خ ولیعصر بعد از بانک کشاورزی انتهای بن بست گلپونه مجتمع تیبا

صفحه اصلیمقالات / آموزش کلاس ها در HTML

آموزش کلاس ها در HTML


آموزش کلاس ها در HTML

آموزش کلاس ها در HTML
  1. صفت کلاس class
    ویژگی کلاس HTML برای تعیین یک کلاس برای یک عنصر HTML استفاده می شود.
    چندین عنصر HTML می توانند یک کلاس را به اشتراک بگذارند.
    استفاده از ویژگی کلاس
    ویژگی class اغلب برای اشاره به نام کلاس در یک شیوه نامه استفاده می شود. همچنین می تواند توسط جاوا اسکریپت برای دسترسی و دستکاری عناصر با نام کلاس خاص استفاده شود.
    در مثال زیر سه عنصر <div> با ویژگی class با مقدار شهر داریم. هر سه عنصر <div> به طور مساوی مطابق با تعریف سبک شهر در بخش head استایل بندی می شوند:
  2. مثال

<!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 به یکسان استایل بندی می شوند:

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>


نکته: ویژگی 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 می توانند به یک نام کلاس اشاره کنند.


آکادمی آموزشی پیشرو با مجوز رسمی از سازمان آموزش فنی و حرفه ای کشور

درباره آکادمی آموزشی پیشرو

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

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

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

آدرس آکادمی آموزشی و ساعات کار:

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


ساعت ثبت نام آموزشگاه :

همه روزه از ساعت 14 الی 20


شماره تماس آکادمی آموزشی:
65221138 - 65266959 - 09122610233
ایمیل آکادمی آموزشی

info@pishro-computer.com


پروتنه تاسیس آموزشگاه پیشرو رایانه نماد اعتماد الکترونیکی Sample image
آکادمی آموزشی پیشرو را در شبکه های اجتماعی دنبال کنید:
واتساپ پیشرو رایانه
© مجتمع آموزشی پیشرو رایانه  1385 - 1400