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

وردپرسی | طراحی سایت با وردپرس

وردپرسی فیدخوان سایت های مرتبط با سیستم مدیریت محتوای وردپرس می باشد. مطالبی شامل قالب های وردپرس، افزونه های وردپرس، هک های وردپرس و اخبار دنیای وردپرس. تمام مطالب برای رعایت حقوق نویسندگان دارای لینک منبع می باشد. سایت های مرتبط با وردپرس نیز که تمایل به ثبت فید خود در سایت وردپرسی دارند نیز می توانند از بخش ثبت سایت به ما اطلاع رسانی کنند. توجه داشته باشید که لازمه این کار داشتن فید مخصوص مطالب وردپرس می باشد.

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

  • 103 بازدید
  • ۰۸ بهمن, ۱۳۹۲
گروه بندی کردن ویژگیهای css

گاهی می خواهید چندین تگ مختلف ، مجموعه مشابهی از ویژگیهای css را داشته باشند

مثلا محتوای همه تگ های p , h1 , h2 , i به رنگ قرمز  باشند

یک روش اینه که همه رو جدا جدا در تگ style و انهم درون تگ head بنویسیم :

<head>

<style>

h1
{
color:green;

}
h2
{
color:green;

}
p
{
color:green;

}

</style>

</head>

روش بهتر اینه که به جای کد نویسی زیاد ، یک بار ویژگیهای مشترک را برای همه تگ های مورد نظر بنویسیم :

 

<head>
<style>

h1,p,h2,i

{

color:red;

}

</style>

</head>

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

تعریف کلاس برای ویژگیهای سی اس اس

در تعریف کلاس ، ما مشخص نمی کنیم که این ویزگیها را برای کدام تگ تعریف می کنیم بلکه فقط یک نام به مجموعه ویژگیها می دهیم

قبل از اسم مورد نظر یک نقطه می گذاریم

و بعد در هر تگی که بخواهیم از این نام که همان کلاس است ، استفاده می کنیم

مثال

کلاسی به نام t1 تعریف کنید که شامل ویژگیهای رنگ متن قرمز و اندازه قلم ۳۰ باشد

<head>

<style>

.t1

{

color:red;

font-size:30;

}

</style>

</head>

حال از کلاس t1 ، در تگ های p و i استفاده کنید:

<body>

<p>

    this is a test

</p>

<i>

    this is a test

</i>

</body>

 

 مثال: کلاسی به نام t1 دارای ویژگیهای رنگ سبز برای تگ p و کلاسی به نام t2 دارای ویژگی رنگ قرمز برای تگ p تعریف کنید

<head>

<style>

p.t1

{

color:red;

}

p.t2

{

color:red;

}

</style>

</head>

حال در دو تگ مختلف p از این دو کلاس استفاده کنید

<body>

<p>

    this is a test

</p>

<p>

    this is a test

</p>

</body>

 نکات مهم :

اگر ویژگیهای سی اس اس را به همراه نام تگ تعریف کنید ، بدون استثنا تمام تگ های مشخص شده تحت تاثیر این ویژگیها قرار می گیرد

مثلا :

p

{

color:red;

}

یعنی محتوای تمام تگ های p بدون استثنا به رنگ قرمز نوشته می شوند

اما وقتی برای تگ خاصی کلاس تعریف می کنیم ، تا زمانی که درون  تگ ان ،کلاس را صدا نزنید محتوای تگ تحت تاثیر ویزگیهای سی اس اس قرار نمی گیرد

مثلا اگر کلاس t1 برای تگ های p را بصورت زیر تعریف کنیم :

p.t1

{

color : red;

}

حال در تگ body ، تگ p تعریف می کنیم اما کلاسش که نامش t1 بود در ان صدا نمی زنیم :

<p>

    this is a test

</p>

محتوای این تگ به هیچ وجه تحت تاثیر کلاس t1 نیست چون انرا صدا نزدیم

اما در تگ p که کلاس را صدا بزنید ، .ویژگیهای سی اس اس اعمال می شود

<p>

    this is a test

</p>

وقتی کلاس را برای تگ خاصی تعریف می کنید دیگر نمی توانید از ای کلاس در تگ های دیگر استفاده کنید . مثلا در مثال بالا چون کلاس t1 بای تگ p  تعریف شده است فقط می توان از این کلاس در تگ های p استفاه کرد

اما اگر بخواهید کلاس مشترک باشد یعنی بتوان در تمام تگ ها از ان استفاده کردباید قبل از نقطه نام کلاس نام تگ را مشخص نکنیم  . همان طور که در اول این صفحه مشاهده کردید

ادامه مطلب: آموزش طراحی سایت




ارسال نظر