18 Jan 2017 - چهارشنبه ۲۹ دی ۱۳۹۵
کد :44 ۱۲ آبان ۱۳۹۵ 116 views دسته : Css3 , دسته‌بندی نشده همیار تم کد
تعریف کلاس در css و آی دی در css

زبان CSS یکی از زبانهای مهم و پر کاربرد در برنامه نویسی است . یکی از ویژگی های مهم زبان  css کلاس در css و آی دی در تعریف استایل (style) مشخص برای عناصر موجود در صفحات وب (html) می باشد.

طبق بررسی های بدست امده کلاس در css و آی دی الگوهایی کلی را تعریف می کنند که از آن الگوها در شکل دهی ظاهری و ایجاد قابلیتهای تگ های html استفاده می شود.

با کمک کلاس درواقع شما میتوانید یک بسته ای را تولید کنید. سپس با کلاس اشیایی را با ویژگیهای یکسان (صفت و متدها) تولید کنید. و دیگر جدا جدا لازم نیست برنامه نویسی را انجام دهید.

در این بخش از سایت تم کد اطلاعاتی را درباره کلاس در css و آی دی id در css در اختیارتان می گذاریم.

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

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

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

آی دی و کلاس نشانه ها و علامت خاصی در کدهای 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>

– از قدیم الایام id در هر چیزی یکتا بوده و وجود دو id امکان پذیر نیست. اینجا هم همین است. از آی دی برای عناصر یکتا استفاده می شود و هر آی دی  برای یک تگ است . استفاده از چند آی دی هم نام در یک صفحه اشتباه است.

– ولی برعکس از کلاس ها می توان به هر اندازه تکرار در صفحه استفاده کرد (هدف از ایجاد کلاس ها نیز همین است تا از یک الگو برای عناصر متعدد استفاده شود).

تعریف ویژگی ، بدون کلاس و آی دی در 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 آن ویژگی را پیدا میکنند.

نظرات