۲۰
مهر

جلسه ۱۹ : صفت class در html

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در مطالب آموزشی که تاکنون ارائه گردیده است. در مورد کاربرد صفات در html یا کاربرد صفات کلاس ها در html ، توضیحاتی ارائه شد. در این بخش از آموزش ، قصد داریم به بحث آموزش استفاده از صفت class در html ، بپردازیم. صفت کلاس در html کاربرد بسایر گسترد ه ای مخصوصا در ارتباط عناصر با کدهای css و جاوااسکریپت دارد.

صفت class در واقع یک یا چند نام کلاس را برای یک عنصر html توصیف می کند. که هر کدام از این روشها ، کاربرد متفاوتی دارد.

در ادامه این بحث به آموزش استفاده از صفت class در html ، می پردازیم.

class

آموزش استفاده از صفت class در html

همانطو که اشاره کردیم ، نام صفت class یک عنصر html می تواند در کد های css و جاوا اسکریپت استفاده شود. در css با استفاده از نام class یک عنصر html می توان style آن عنصر در css تغییر داد. و در جاوااسکریپت نیز می توان با استفاده از مشخصه class یک عنصر، یک رفتار خاص را برای آن عنصر تعریف کرد.

در کد زیر از سه <div> استفاده شده که هر سه به یک class اشاره دارند :

مثال : سه div هم class

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color: black;
    color: white;
    margin: 20px;
    padding: 20px;
} 
</style>
</head>
<body>

<div class="cities">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="cities">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="cities">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html

<!DOCTYPE html>

<html>

<head>

<style>

.cities {

background-color: black;

color: white;

margin: 20px;

padding: 20px;

}

</style>

</head>

<body>

<h2>London</h2>

<p>London is the capital of England.</p>

</div>

<h2>Paris</h2>

<p>Paris is the capital of France.</p>

</div>

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

</div>

</body>

</html

خودتان امتحان کنید »

نتیجه ی کد فوق:

کاربرد class

استفاده از class در عناصر inline

مثال : تعریف class در عناصر inline

<!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>

<!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>

خودتان امتحان کنید »

انتخاب عناصر با یک کلاس مشخص

در css برای انتخاب عناصر با استفاده از ویژگی class آن ها قبل از نام class از یک نقطه (.) استفاده کنید.

مثال: استفاده از کدهای css برای تغییر دادن style تمام عناصری که دارای صفت class با نام “city” هستند:

مثال : مثالی از انتخاب عناصر با استفاده از class

<style>
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
} 
</style>

<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>

<style>

.city {

background-color: tomato;

color: white;

padding: 10px;

}

</style>

<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>

خودتان امتحان کنید »

نتیجه ی کد فوق :

انتخاب عنصر با class

استفاده از صفت class در جاوااسکریپت

جاوااسکریپت می تواند به عناصر html با استفاده از صفت class و با استفاده از تابع () getElementsByClassName دسترسی پیدا کند.

مثال: زمانیکه کاربر روی یک button کلیک کند تمام عناصر که دارای صفت class با نام “city” هستند. مخفی شوند:

مثال : صفت کلاس در جاوا اسکریپت

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

function myFunction() {

var x = document.getElementsByClassName("city");

for (var i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

</script>

خودتان امتحان کنید »

صفت class چندگانه

هر کدام از عناصر html می تواند صفت class با بیشتر از یک نام را داشته باشد. در این صورت هر کدام از نام های باید با یک space از نام قبلی جدا شود.

مثال:

مثال : صفات چندگانه

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

<h2 class="city main">London</h2>

<h2 class="city">Paris</h2>

<h2 class="city">Tokyo</h2>

خودتان امتحان کنید »

استفاده از یک نام class ، برای تگ های مختلف

می توانید از یک class برای تگ های گوناگون استفاده کنید.

مثال:

مثال : استفاده از یک نام class در عناصر مختلف

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

1 2	<h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p>

خودتان امتحان کنید »

کلام آخر

از صفت class در html برای مشخص کردن یک عنوان که در عناصر مختلف قابل تکرار باشد استفاده می شود، این عنوان قابلیت انتخاب عناصر html را در جاوا اسکریپت و css و سپس اعمال تغییرات لازم روی آن ها را می دهد.

به اشتراک بگذارید

CSS در HTML ,آموزش css و css3 ,آموزش استفاده از class در html ,جاوااسکریپت در HTML ,کاربرد صفت class ,ویژگی class در html

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۹ : صفت class در html

مقدمه

آموزش استفاده از صفت class در html

استفاده از class در عناصر inline

انتخاب عناصر با یک کلاس مشخص

استفاده از صفت class در جاوااسکریپت

صفت class چندگانه

استفاده از یک نام class ، برای تگ های مختلف

کلام آخر

لیست مطالب دوره

آموزش HTML

فرم در HTML

HTML5

گرافیک در HTML

چند رسانه ای در html

APIs در HTML

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ