آموزش خصوصیت class در HTML
از خصوصیت class در HTML برای تعریف استایل هایی برای عناصری که از نام استایل مشابهی استفاده می کنند، استفاده می شود. بنابراین ، تمام عناصر HTML که از نام کلاس های یکسانی در خصوصیت class خود استفاده کنند، استایل های مشابهی را دریافت می کنند. در اینجا، ما سه عنصر <div> دایم که از نام کلاس های یکسانی استفاده می کنند.
مثال شماره 1
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>شیراز</h2>
<p>خوشا شیراز و وضع بی مثالش</p>
</div>
<div class="cities">
<h2>شیراز</h2>
<p>خوشا شیراز و وضع بی مثالش</p>
</div>
<div class="cities">
<h2>شیراز</h2>
<p>خوشا شیراز و وضع بی مثالش</p>
</div>
</body>
</html>
استفاده از خصوصیت class در عناصر درون خطی(Inline)
از خصوصیت class در HTML می توانیم در عناصر درون خطی نیز استفاده کنیم.
مثال شماره 2
<!DOCTYPE html>
<html>
<head>
<style>
span.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 استفاده کنیم.
نکته: خصوصیت class به حروف بزرگ و کوچک حساس است.
نکته: در آموزش CSS در آموزشگاه مجازی سینا، چیزهای بیشتری در این مورد خواهید آموخت.
انتخاب عناصر با یک کلاس خاص
در CSS، برای انتخاب(گزینش) عناصری که یک کلاس خاص دارند، از یک نقطه و سپس نام آن کلاس استفاده می کنیم.
مثال شماره 3
استفاده از CSS برای استایل دهی با استفاده از نام کلاس city:
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">شیراز</h2>
<p>خوشا شیراز و وضع بی مثالش</p>
<h2 class="city">شیراز</h2>
<p>خوشا شیراز و وضع بی مثالش</p>
<h2 class="city">شیراز</h2>
<p>خوشا شیراز و وضع بی مثالش</p>استفاده از چند کلاس
عناصر HTML می توانند بیش از یک نام کلاس داشته باشند، هر کلاس بای با استفاده از یک فاصله ی خالی، از دیگر کلاس ها جدا شود.
مثال شماره 4
در کد زیر، عنصر اول، هم از کلاس city و هم از کلاس main استفاده می کند:
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>در مثال بالا، اولین عنصر <h2> هم از کلاس city و هم از کلاس main استفاده می کند.
تگ های مختلف می توانند کلاس های یکسانی را به اشتراک بگذارند
تگ های مختلف مانند <h2> و <p> می توانند نام کلاس یکسانی داشته باشند و بدین ترتیب استایل های یکسانی را به اشتراک بگذارند:
استفاده از خصوصیت class در جاوا اسکریپت
از نام کلاس، همچنین می توانیم در جاوا اسکریپت برای انجام برخی کارها روی عناصری که یک نام کلاس مشخص دارند استفاده کنیم. جاوا اسکریپت می تواند به این عناصر با یک نام کلاس با استفاده از متد getElementsByClassName() دسترسی داشته باشد:
مثال شماره 6
وقتی که یک کاربر بر روی یک دکمه کلیک می کند، تمام عناصری که کلاس city دارند محو می شوند:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
اگر کدهای مثال بالا را درک نمی کنید، نگران نباشید. در آموزش های جاوا اسکریپت، چیزهای بیشتری در مورد آنها خواهید آموخت.
- بازدید: 419
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.