استفاده از کلاس و ID در HTML

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

کاربرد کلاس در HTML :

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

با استفاده از کلاس می توان به یک بخش از صفحه وب ، ویژگی هایی داد.

از یک کلاس ( CLASS ) در html بارها می توان استفاده کرد.

هر کلاس دارای یک نام می باشد .

برای استفاده از کلاس کافی است که در جلوی تگ بنویسید CLASS=”” و نام کلاس را درآن قرار دهید.

مثلا اگر در یک کلاس با نام A رنگ متن را آبی کنیم هر جا که آن کلاس را استفاده کنیم رنگ متن آبی می شود فرقی نمی کند که برای تگ P باشد یا تگ SPAN یا تگ H1 . در همه تگ ها رنگ متن ابی می شود.

یا مثلا اگر به یک DIV چندین ویژگی را بدهیم کافی است که نام کلاس را در هر DIV استفاده کنیم تا ان ویژگی ها روی DIV اعمال شود.

<html>
<head>
<meta charset="utf8">
<title>شیرازلرن</title>
<style>
.sh711{
border-radius: 50%;
border: 6px solid red;
padding: 3px;
}
</style>
</head>
<body>
<img src="sh.png" class="sh711">
<br>
<img src="sh.png" class="sh711">
</body>
</html>

خروجی را در تصویر زیر می بینید.

استفاده از کلاس و ID در HTML

کاربرد ID در HTML :

 

ID و کلاس هر دو در طراحی صفحات وب کاربرد دارند.

از ID برای بخش بندی صفحات وب می توان استفاده کرد.

بهتر از ID فقط یک بار در صفحات وب استفاده شود.

وقتی از ID استفاده کنیم می توانیم راحت به ان بخش استایل دهیم.

برای استفاده ازID در HTML بایستی در تگ ها بنویسیم id=” ” و نامی به ان دهیم . در هنگام استایل دادن نیز بایستی قبل از نام id از علامت # استفاده کنیم.

<html>
<head>
<meta charset="utf8">
<title>شیرازلرن</title>
<style>
#sh711{
border-radius: 50%;
border: 6px solid red;
padding: 3px;
}
</style>
</head>
<body>
<img src="sh.png" id="sh711">
</body>
</html>

خروجی را در تصویر زیر می بینید.

استفاده از کلاس و ID در HTML

بر خلاف کلاس که می توانستیم به چندین عنصر نسبت دهیم ID فقط یک باردر یک صفحه وب استفاده می شود و نمی توانیم از ID بیشتر از یکبار در صفحه استفاده کنیم.

برای استایل دادن به کلاس در CSS از نقطه استفاده می شود اما برای ID از علامت # استفاده می شود.

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
#dd p{
color:blue;
}
</style>
</head>
<body>
<h1>My site is <span class="note">sh711.com</span></h1>
<p>This is some <span class="note">important</span> text.</p>
<div id='dd'>
<p>sh711.com</p>
</div>
</body>
</html>

خروجی را در تصویر زیر می بینید.

استفاده از کلاس و ID در HTML


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

تگ ها : آموزش html
ثبت نظر