حالت های مختلف برای تعیین ویژگی های عنصرهای یک صفحه، به صورت ترکیب سه مورد ((تمامی عنصرهای از آن نوع در صفحه))، ((عنصری از آن نوع با یک id خاص)) و ((عنصرهای از آن نوع و متعلق به یک کلاس (class)))، در CSS
در مباحث قبلی، چگونگی تعیین (تغییر) ویژگی های یک عنصر در صفحه را به صورت 3 مورد زیر شرح دادیم :
1- تغییرات به تمامی عنصرهای از آن نوع اعمال شود.
2- تغییرات تنها به عنصری از آن نوع که دارای یک id خاص است، اعمال شود.
3- تغییرات تنها به عنصرهایی از آن نوع که متعلق به یک کلاس (class) خاص هستند، اعمال شود.
اکنون قصد داریم که شیوه به کار بردن ترکیبی این سه مورد را شرح بدهیم.
به عنوان مثال، عنصر را برابر عنصر p ، یعنی همان تگ p که برای نمایش یک پاراگراف (paragraph) به کار می رود، در نظر می گیریم (البته عنصر div را هم در مثال به کار می بریم زیرا یک عنصر ساختاری و مهم است). اکنون برای هر سه مورد، شیوه کلی کدنویسی را دوباره یادآوری می کنیم و همچنین نحوه به کار بردن ترکیب آنها را هم شرح خواهیم داد.
برای این منظور، ابتدا کدهای صفحه را به صورت زیر در نظر بگیرید :
<head>
<style type="text/css">
/* your CSS code */
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
دقت شود که بنده عمدا دو بار id با نام myID_1 را به کار برده ام و به دلیل نمایش بهتر کلیه حالت ها به شما است، در صورتی که نباید دو id با نام یکسان داشته باشیم (id ها را به صورت منحصربفرد انتخاب می کنند).
در کدهای بالا، باید به جای عبارت /* your CSS code */ ، کدهای CSS مورد نظر خود را بنویسید.
اکنون در ادامه شرح می دهیم که برای حالت های مختلف، کدهای CSS باید به چه صورت نوشته شوند (نتیجه هر حالت، در انتهای مبحث نمایش داده شده است) :
1- متن درون همه پاراگراف ها (عنصر p - تگ p)، به رنگ قرمز (یعنی رنگ معادل کد #F00) نمایش داده شود :
color:#F00;
}
2- متن درون همه عنصرهای div ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
3- متن درون عنصر (هر نوع عنصر) با id برابر myID_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
4- متن درون همه عنصرهای (هر نوع عنصر) با کلاس (class) برابر myClass_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
5- متن درون عنصر div با id برابر myID_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
6- متن درون همه عنصرهای div با کلاس (class) برابر myClass_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
7- متن درون عنصر p با id برابر myID_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
8- متن درون همه عنصرهای p با کلاس (class) برابر myClass_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
9- متن درون همه عنصرهای p قرار گرفته درون عنصر (هر نوع عنصر) با id برابر myID_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
10- متن درون همه عنصرهای p قرار گرفته درون عنصرهای (هر نوع عنصر) با کلاس (class) برابر myClass_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
11- متن درون همه عنصرهای p قرار گرفته درون عنصر div با id برابر myID_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
12- متن درون همه عنصرهای p قرار گرفته درون عنصرهای div با کلاس (class) برابر myClass_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل و نتیجه :
اکنون همان حالت هایی که ذکر کردیم را به صورت کد کامل می نویسیم و نتیجه را هم به شما نمایش می دهیم تا نحوه عملکرد آنها را به خوبی درک کنید :
1- متن درون همه پاراگراف ها (عنصر p - تگ p)، به رنگ قرمز (یعنی رنگ معادل کد #F00) نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
p {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
2- متن درون همه عنصرهای div ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
div {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
3- متن درون عنصر (هر نوع عنصر) با id برابر myID_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
#myID_1 {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
4- متن درون همه عنصرهای (هر نوع عنصر) با کلاس (class) برابر myClass_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
.myClass_1 {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
5- متن درون عنصر div با id برابر myID_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
div#myID_1 {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
6- متن درون همه عنصرهای div با کلاس (class) برابر myClass_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
div.myClass_1 {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
7- متن درون عنصر p با id برابر myID_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
p#myID_2 {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
8- متن درون همه عنصرهای p با کلاس (class) برابر myClass_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
p.myClass_2 {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
9- متن درون همه عنصرهای p قرار گرفته درون عنصر (هر نوع عنصر) با id برابر myID_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
#myID_1 p {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
10- متن درون همه عنصرهای p قرار گرفته درون عنصرهای (هر نوع عنصر) با کلاس (class) برابر myClass_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
.myClass_1 p {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
11- متن درون همه عنصرهای p قرار گرفته درون عنصر div با id برابر myID_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
div#myID_1 p {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
12- متن درون همه عنصرهای p قرار گرفته درون عنصرهای div با کلاس (class) برابر myClass_1 ، به رنگ قرمز نمایش داده شود :
color:#F00;
}
کد کامل :
<head>
<style type="text/css">
div.myClass_1 p {
color:#F00;
}
</style>
</head>
<body>
<div>
<p>paragraph number 1.</p>
<p>paragraph number 2.</p>
<span>span number 1.</span>
</div>
<div id="myID_1">
<p id="myID_2">paragraph number 3.</p>
<p id="myID_3">paragraph number 4.</p>
<span>span number 2.</span>
</div>
<div class="myClass_1">
<p class="myClass_2">paragraph number 5.</p>
<p class="myClass_3">paragraph number 6.</p>
<span>span number 3.</span>
</div>
<span id="myID_1">span number 4.</span>
<br />
<span class="myClass_1">span number 5.</span>
</body>
</html>
نتیجه :
