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

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » آموزش انتخابگر ID و Class ( کلاس ) در فیلم آموزش CSS به زبان فارسی
آموزش انتخابگر ID و Class ( کلاس ) در فیلم آموزش CSS به زبان فارسی

آموزش انتخابگر ID و Class ( کلاس ) در فیلم آموزش CSS به زبان فارسی

در جلسه قبل با خاصیت های Color و Background آشنا شدید و در این قسمت از فیلم آموزش CSS با مبحث انتخابگر Id و Class آشنا خواهید شد .


انتخابگر ID :

این انتخابگر ( Selector ) را زمانی استفاده می کنیم که بخواهیم به یک عنصر منحصر به فرد از سند HTML یک استایل خاصی بدهیم .

در HTML به صورت زیر از Id استفاده می کنیم :

<!doctype html>
<html>
	<head>
		<title>Web30ty.com</title>
		<link rel="stylesheet" type="text/css" href="style.css" />

	</head>
	<body>
		<h1 id="header">web30ty</h1>
	</body>
</html>

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

برای فراخوانی این id در CSS  اول باید از علامت # استفاده کنیم و بعد اسم Id مربوطه را بنویسیم ، مانند کد زیر :

#header{
	background: red;
	color: #fff;
	font-size: 23px;
}

انتخابگر Class :

این انتخابگر هم خیلی شبیه Id هست اما با کمی تفاوت ، از انتخابگر کلاس می توان برای استایل دهی به چندین عنصر که هم نام هستند استفاده کرد . در واقع با استفاده از این انتخابگر ها تگ مورد نظر خودمان را انتخاب می کنیم و یک اسمی برای آن می نویسیم و بر اساس آن به تگ استایل می دهیم .

نحوه استفاده از Class در HTML :

<!doctype html>
<html>
	<head>
		<title>Web30ty.com</title>
		<link rel="stylesheet" type="text/css" href="style.css" />

	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

در کد بالا به تگ div کلاسی با اسم box نوشته ایم حالا برای استفاده از کلاس در CSS اول باید از علامت ” . ” استفاده می کنیم و بعد اسم کلاس را می نویسیم ، همانند کد زیر :

.box{
	width: 500px;
	height: 500px;
	background: red;
	color:#fff;
}

فرقی که بین ID و Class هست اینه که نمی توان چند تگ با Id یکسان نوشت یعنی اسم Id ها یکی باشه . ولی می توان چندین تگ با Class یکسان داشت .

فیلم آموزش Id و Class را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *