Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
آشنایی با کلاس (class) و آی دی (id) در css
کی از ویژگی ها و قابلیتهای اصلی css استفاده از کلاس و آی دی در تعریف استایل (style) مشخص برای عناصر موجود در صفحات وب (html) است، کلاس و آی دی الگوهایی کلی را تعریف می کنند که از آن الگوها در شکل دهی ظاهری و ایجاد قابلیتهای تگ های html استفاده می شود

تعریف کلاس و آی دی در 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 آن ویژگی را خواهند داشت.



1394/05/30 4:37:53 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما