یادداشت کن لذت ببر

آشنایی با کلاس (class) و آی دی (id) در css

یکی از ویژگی ها و قابلیتهای اصلی css استفاده از کلاس و آی دی در تعریف استایل (style) مشخص برای عناصر موجود در صفحات وب (html) است، کلاس و آی دی الگوهایی کلی را تعریف می کنند که از آن الگوها در شکل دهی ظاهری و ایجاد قابلیتهای تگ های html استفاده می شود؛ در ادامه خواهیم گفت که هر کدام از موارد گفته شده (class و id) برای هدف خاصی استفاده می شوند و خواهیم دید که چگونه می توانیم آنها را تعریف و استفاده نمائیم.

تعریف کلاس و آی دی در css

آی دی و کلاس با علائم خاصی در کدهای css شناخته می شوند، برای آی دی از علامت # و برای کلاس از علامت نقطه استفاده می کنیم:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کلاس و آی دی در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#main{
    display:block;
    background-color:#069;
}
.text{
    color:#FFF;
}
</style>
</head>
<body>
<div id="main" class="text">
این یک متن در کلاس text و آی دی main است.
</div>
</body>
</html>

توضیح:
- از آی دی برای عناصر یکتا استفاده می شود (یعنی هر آی دی مخصوص تنها یک تگ است) و استفاده از چند آی دی هم نام در یک صفحه مجاز نیست.
- از کلاس ها می توان به هر اندازه تکرار در صفحه استفاده کرد (هدف از ایجاد کلاس ها نیز همین است تا از یک الگو برای عناصر متعدد بتوان استفاده نمود).

تعریف ویژگی، بدون کلاس و آی دی در css

علاوه بر کلاس و آی دی، برخی از موارد در css به صورت کلی قابل تعریف شدن هستند، مثلا body استایل خود را به تگ body و زیر مجموعه آن اختصاص می دهد یا p به تمام عناصر پاراگرافی استایل خود را اختصاص می دهد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | استایل بدون کلاس و آی دی</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
p,div{
    border:#CCC 1px solid;
    padding:4px;
}
#main{
    display:block;
    background-color:#069;
}
.text{
    color:#FFF;
}
</style>
</head>
<body>
<div id="main" class="text">
<p>
این یک متن در کلاس text و آی دی main است. برخی از ویژگی های کلی از div و p استفاده می کنند.
</p>
</div>
</body>
</html>

در مثال بالا علاوه بر استفاده از آی دی main و کلاس text به صورت کلی استایلی را برای تگ های div و p اختصاص داده ایم، با این کار تمام عناصر پاراگراف و بلاک های div آن ویژگی را خواهند داشت.