آموزش ساخت کلاس در html

سلام دوستان ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه ساخت کلاس در html با من همراه باشید.

نحوه ساخت کلاس در HTML

شاید تا به الان اسم کلاس رو شنیده باشید، به مجموعه ای از چندین اشیاء در کنار همدیگر با ویژگی های مشترک را کلاس می گوییم ، ما در زبان های برنامه نویسی همچون سی شارپ نیز میتوانیم کلاس ها را ایجاد و از آنها استفاده نماییم.

در HTML هم همین گونه است، فرض کنید ما چندین تگ مثلا یک تگ پاراگراف یک تگ تیتر و چندین تگ دیگر داریم که میخواهیم همه ی این تگ ها رنگ شون آبی و اندازه شون ۱۳ پیکسل باشد، خب بهترین و بهینه ترین کار اینه که همه ی این تگ هارو درون یک کلاس گذاشته سپس در CSS برای این کلاس ویژگی های مورد نظرمون رو تعریف نماییم.

کلاس ها میتونن استفاده بسیار زیادی برای ما داشته باشند، بفرض مثال ما میتونیم با استفاده از کلاس ها تگ های HTML رو بصورت دسته ای ایجاد و سپس با استفاده از دستورات CSS برای آنها ویژگی های مشترکی را تعریف کرد.

شکل کلی برای استفاده یا ایجاد کلاس در عناصر / تگ های HTML بصورت زیر می باشد :

<element class="class_name">

که element همان عنصر یا تگ ما در HTML می باشد و بجای (class_name) نیز باید نام کلاس مورد نظرمون رو وارد نماییم. که میتوانیم به دلخواه این نام را انتخاب نماییم.

شکل کلی برای فراخوانی یک کلاس در CSS بصورت زیر می باشد :

.ClassName
{
CSS_Properties
}

برای فراخوانی یک کلاس در CSS باید اول یک نقطه گذاشته سپس نام کلاس را مینویسیم و در نهایت دستورات سی اس اس را مینویسیم.

نحوه ایجاد کلاس در تگ های HTML

روش ایجاد کلاس در تگ های HTML همانند یکدیگر می باشد، یعنی در واقع ما در تمامی تگ های HTML بصورت زیر میتوانیم کلاس ایجاد/تعریف نماییم.

برای مثال لطفا به مثال های زیر توجه نمایید تا نحوه ی ایجاد کلاس در انواع تگ های HTML را یاد بگیرید.

<body>
<p class="free-learn">
Salam Khobi? Man Sadegh Hastam.
</p>
</body>
امتحان کنید


مثال شماره 2 :

<body>
<h3 class="free-learn">
Salam Khobi? Man Sadegh Hastam.
</h3>
</body>
امتحان کنید
منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.