کلاس و id در css

کلاس در HTML  :

در این بخش از آموزش html به بحث کلاس در html می رسیم.

کلاس در html چیست و چه کاربردی دارد؟

از کلاس در html بسیار استفاده می شود. کلاس ها یکی از اجزای مهم در طراحی قالب سایت میباشد.

هنگام ساخت یک قالب از کلاس ها به دفعات استفاده می کنیم.

مثلا یک سری از ویژگی ها در css را تعریف می کنیم و سپس به هر عنصر html که دوست داریم می دهیم. اجازه دهید یک مثال عملی بزنیم.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
.p1{
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="p1">sh711.com h1</h1>
<p class="p1">sh711.com paragraph</p>
<span class="p1">sh711.com span</span>
</body>
</html>

درمثال بالا یک کلاس بنام p1 را تعریف کردیم. وظیفه کلاس این است که رنگ متن و رنگ پس زمینه را تغییر دهد.

حال می توانیم این کلاس را به هر عنصر html بدهیم. ما به h1 و p و  span این کلاس را داده ایم و رنگ و پس زمینه همه تغییر کرده است.

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

نحوه تعریف کلاس در html  :

برای تعریف یک کلاس در html کافی است در قسمت class نام کلاس را قرار دهید. اگر کلاسی به ان نام وجود داشته باشد آن ویژگی به عنصر html نسبت داده میشود.

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

Id در html :

در این بخش به سراغ id در html می رویم و با یک مثال کاربرد id را به شما توضیح می دهیم.

بجز کلاس ها که در قالب سایت زیاد استفاده میشود از id نیز زیاد استفاده می کنیم.

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

مثال زیر را ببینید.

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
#ali{
color: red;
}
</style>
</head>
<body>
<h1 id="ali">sh711.com h1</h1>
<p>sh711.com paragraph</p>
<span>sh711.com span</span>
</body>
</html>

در مثال بالا یک id بنام ali معرفی کردیم. این id به هر عنصر نسبت داده شود رنگ متن آن را قرمز می کند.

ما فقط توانستیم این id را به یک عنصر h1 نسبت دهیم.

اگربه عناصر دیگر نسبت دهیم شاید عمل کند اما اشتباه است.

کلاس در css :  

در این بخش از آموزش css به سراغ کلاس در css می رویم.

برای تعریف کلاس در css به چند روش می توانیم این کار را انجام دهیم.

یک روش که در مثال های بالا دیدیم که در بخش style و قسمت head معرفی کردیم.

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

نوشتن کلاس در css :

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

مثال زیر را که در مورد نوشتن کلاس در css است ببینید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
.a1{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h2 class="a1">sh711.com h2</h2>
<h3 class="a1">sh711.com h3</h3>
</body>
</html>

در مثال بالا یک کلاس با نام a1 تعریف کردیم و آن را به دو عنصر html نسبت دادیم.

این کلاس هم رنگ متن و هم سایز متن را تغییر می دهد.

یک کلاس می تواند شامل چندین کد مختلف باشد.

Id در css :

برای تعریف id در css بایستی در بخش head و style آن را تعریف کنیم.

کاربرد id در css زمانی است که می خواهیم یک سری ویژگی را فقط به یک عنصر بدهیم.

مثال زیر را ببینید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
#id123{
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<h4 id="id123">sh711.com</h4>
</body>
</html>

در  مثال بالا ما یک id در css تعریف کردیم.

در این id ما چند ویژگی قرار دادیم. اگر این id در css را به هر عنصر html بدهیم این ویژگی ها روی آن عنصر اعمال می شوند.

ویژگی های id شامل تغییر رنگ و سایز متن است. حال به h4 نسبت دادیم.

کد را در یک فایل html قرار دهید و اجرا کنید و نتیجه را ببینید.

تفاوت id و class در css :

تفاوت id و class در css در این است که یک کلاس را می توان به چندین عنصر مختلف اعمال کرد یا نسبت داد ولی یک id فقط به یک عنصر نسبت داده میشود.

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

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


نویسنده : هدایت عباسی

تگ ها : آموزش css کد css
ثبت نظر