کلاس و id در html

هدایت عباسی آموزش HTML

آموزش ویدئویی کلاس و id در html

در این فیلم و آموزش ویدئویی با کلاس و id در html با ذکر مثال آشنا می شوید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش html به بحث در مورد کلاس و id می پردازیم.چندین مثال خواهیم زد. تفاوت class و id را خواهیم گفت. نحوه تعریف کلاس و id را خواهیم گفت و نحوه استفاده از آنها را توضیح خواهیم داد.

در این بخش بخش داریم در مورد کلاس ها صحبت کنیم. از کلاس ها در پروژه‌های مختلف طراحی سایت استفاده می شود.

یک کلاس را می توانیم یک بار تعریف کنیم و بارها از آن استفاده کنیم.

مزیت کلاس ها

مزیت کلاس ها در این است که می توانیم یک بار تعریف کنیم و بارها از آن استفاده کنیم

کلاس ها باعث می شوند که کد نویسی بسیار کمتر شود

تعریف کلاس

برای تعریف کلاس در html ‌می توانیم از کلمه کلاس و سپس یک نام مناسب استفاده کنیم.

برای تعریف کلاس در css می بایست ازنقطه و نام کلاس استفاده کنیم.

مثال کلاس در html

در مثال زیر از کلاس ها (class) استفاده کرده‌ایم ابتدا در html یک کلاس را تعریف کرده ایم و سپس در تگ style برای آن استایل مناسب را نوشته ایم.

خروجی این مثال یک باکس می باشد. از کلاس cc می توانیم بارها استفاده کنیم.

کدها را در یک فایل با پسوند html ذخیره کرده و تست نماییدتا نتیجه را ببینید. کدهاهمه تست شده میباشد.

<!DOCTYPE html>
<html>
<head>
<style>
.cc {
background-color: orange;
padding: 20px;
width: 195px;
height: 145px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="cc">
<h2>TopSite98</h2>
<p>border radius</p>
</div>
</body>
</html>

استفاده چندباره از کلاس

استفاده چندباره از کلاس در html را در مثال زیر مشاهده می کنید.

در مثال زیر مشاهده می کنید که ما یک کلاس را تعریف کرده‌ایم و دو بار از آن استفاده کرده ایم.

<!DOCTYPE html>
<html>
<head>
<style>
.cc {
background-color: orange;
padding: 20px;
width: 195px;
height: 145px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="cc">
<h2>TopSite98</h2>
<p>border radius</p>
</div>
<div class="cc">
<p>abbasi</p>
</div>
</body>
</html>

استفاده از چند کلاس

ما میتوانیم همزمان از چندین کلاس استفاده کنیم.

برای این کار کافی است که نام کلاس ها را در کنار هم و با فاصله قرار دهیم.

در مثال زیر ما دو کلاس را تعریف کرده‌ایم حال برای تگ h1 از کلاس a و b استفاده کرده ایم.

همین طور که در خروجی می بینید به رنگ پس زمینه و رنگ متن تغییر کرده است.

<!DOCTYPE html>
<html>
<head>
<style>
.a{
background-color: orangered;
}
.b{
color: blue;
}
</style>
</head>
<body>
<h1 class="a b">TopSite98.com</h1>
</body>
</html>

استفاده از class

در این بخش در مورد استفاده ازclass ( کلاس ) در html صحبت می کنیم.

ما می توانیم یک کلاس را تعریف کنیم و به چندین عنصر مختلف نسبت دهیم.

همین طور که در مثال زیر می بینید ما یک کلاس را تعریف کرده‌ایم و آن را به دو عنصر مختلف نسبت داده ایم.

<!DOCTYPE html>
<html>
<head>
<style>
.a{
background-color: orangered;
}
.b{
color: blue;
}
</style>
</head>
<body>
<h1 class="a b">TopSite98.com</h1>
<p class="b">abbasi</p>
</body>
</html>

استفاده از id در html

در این بخش به سراغ استفاده از id در html می‌رویم.

از هر id فقط یک بار در هر صفحه وب و html می توانیم استفاده کنیم.

تعریف id

برای تعریف id در html کافی است کلمه id را نوشته و سپس یک نام مناسب به آن بدهید.

برای استفاده از id در در سی اس اس (css) کافی است از علامت # استفاده کنید.

از آیدی (id) فقط یکبار می توانیم در هر صفحه html استفاده کنیم.

مثال استفاده از id در html

در این قسمت مثال استفاده از id در html را مشاهده می کنید.

در این مثال ما یک id با نام topsite98 در تگ style ایجاد کرده ایم و سپس از آن در تگ h1 استفاده کرده ایم.

خروجی این مثال تگ h1 با پس زمینه رنگی و عرض 400 پیکسل است.

<!DOCTYPE html>
<html>
<head>
<style>
#topsite98{
width: 400px;
background-color: orange;
}
</style>
</head>
<body>
<h1 id="topsite98">TopSite98.com</h1>
</body>
</html>

تفاوت class و id

تفاوت class و id در html , css در این است که از کلاس در صفحات html می توانیم بارها استفاده کنیم اما از id فقط یکبار می توانیم در هر صفحه استفاده کنیم.

از id و کلاس در پروژه‌های مختلف طراحی قالب سایت استفاده می شود.

نمی توانیم بگوییم کلاس بهتر از id است چون هر کدام در جای خود دارای اهمیت می باشد و از آن استفاده می شود.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید