آموزش کلاس و آی دی در css
css یکی از زبان های پرکاربرد در زمینه طراحی صفحات وب است و تقریبا به ندرت می توان یافت که یک سایت از css استفاده نکرده باشد امروز می خواهیم کلاس و آی دی را در css توضیح دهیم
کلاس در css چیست
به کمک کلاس در css توانایی استفاده از کلاس در کلیه کنترل های وب را خواهید داشت. مثلاً اگر شما چندتا دکمه داشته باشید که رنگ همه آنها سبز باشد و اندازه مشخصی می توانید این ویژگی ها را در یک کلاس تعریف کنید وتنها در دکمه این کلاس فرابخوانید
در یک مثال ساده موضوع را بازتر می کنیم:
ابتدا یک فایل html درست کنید و سپس یک فایل متنی با نوت پد بازکنید و آن را فرمت .css ذخیره کنید سپس در فایل css کد زیر را قرار داده و ذخیره کنید
.btnPrime{
width:200px;
height:35px;
color:#fff;
background:#ccc;
border:none;
border-radius:3px;
font-family:tahoma;
font-size:15px;
}نکته:
یک کلاس در css با گذاشتن یک علامت (.) دات و تعیین یک اسم برای آن تعریف می شود
سپس در فایل html با قرار دادن کد زیر داخل تگ body یک دکمه را اضافه کردید و کلمه class کلاس btnPrime را فراخوانی کردیم
<body>
<input type="button" name="btn" value="ورود" class="btnPrime">
</body>نکته
دقت کنید برای اینکه نتیجه کارتان را مشاهده کنید باید فایل css را با قرار دادن کد زیر در داخل تگ head آن را صدا بزنید
<head>
<link href="style.css" rel="stylesheet">
</head>فایل html را اجرا کنید و نتیجه کارتان را بصورت زیر مشاهده کنید.
سپس کد زیر را هم می توانید به فایل خود اضافه کنید این کدزمانی نتیجه خواهد داد که کاربر بخواهد اشاره گر موس را روی دکمه نگه دارد.
.btnPrime:hover{
background:#000;
transition:all .5s;
}تعریف آی دی در css
تعریف آی دی در css بمنظوراستفاده از عناصر یکتا در سایت استفاده می شود از یک آی دی نمی توانید دوبار در صفحه استفاده کنید و در صورت استفاده این مورد اشتباه است به فرض مثال برای هدر سایت آی دی استفاده می کنند
نکته
برای تعریف آی دی در css در ابتدای آن از # استفاده می کنیم و در ادامه اسمی را برای آن تعیین می کنیم
#header{
width:968px;
height:200px;
background:#bbb;
float:auto;
}حال برای استفاده از آن در html آن را داخل تگ div با id صدا می زنیم
<div id="header"></div>شما برای استفاده از بوت استرپ نیز باید حداقل با کلاس ها و آی دی ها در css آشنا باشید و بتوانید از آنها استفاده کنید
دیدگاهتان را بنویسید