wait لطفا صبر کنید
05 بهمن 1395
صفحه اصلی  » مقالات
1393/11/12
1490
00

انتخاب کنترل در CSSها

با ورود Css3 انقلابی در طراحی وب بوجود آمده، به طوری که خیلی ها بر این باورند که Css3 میتواند جایگزین ابزاری مثل Jquery و Mootools شود. در این پست میخواهیم برای شما در خصوص ویژگی مهم نحوه شناسایی کنترل در CSS توضیح دهیم.
با ورود Css3 انقلابي در طراحي وب بوجود آمده، به طوري كه خيلي ها بر اين باورند كه Css3 ميتواند جايگزين ابزاري مثل Jquery و Mootools شود. در اين پست ميخواهيم براي شما در خصوص ويژگي مهم نحوه شناسايي كنترل در CSS توضيح دهيم. در اين قسمت به توضيح روش هاي مورد استفاده در مرورگرها براي شناسايي تگ هايي كه style به آنها بايد تخصيص يابد مي پردازيم.

تگ هايي كه style به صورت inline براي آنها تعريف مي شود براي مرورگر مشخص است كه style مربوط به چه tagي مي باشد اما اگر style به صورت inline نباشد مرورگر از تعاريف selector ها براي شناسايي تگ مرتبط به هر style استفاده مي نمايد.

 

Css1
حالت1: تعريف كلاس(Class selector)

براي اين كار از . در ابتداي نام كلاس مورد نظر به صورت زير استفاده مي شود:

 

<style>

.modal

{

border:2px solid #FF0000;

}

</style>

نحوه استفاده:

<img class="modal">

 

حالت 2: تگ عمومي (Type selectors)

و يا به صورت زير به تمام تگ هاي از يك نوع اعمال مي شود

<style>

div

{

        margin: 0;

        padding: 0;

        border: 0;

        outline: 0;

        font-size: 100%;

        vertical-align: baseline;

        background: transparent;

}

</style>

حالت 3: استفاده براي يك id خاص(ID selectors)

براي اين كار از # در ابتداي شناسه(id) تگ مورد نظر به صورت زير استفاده مي شود.

 

<style>

#tabs ياtable#tabs

{

z-index:111;

}

<style>

 

<table id="tabs">

<tr>

<td></td>

</tr>

</table>

حالت 4: سلسله مراتب

قابل استفاده براي سه حالت قبل مي باشد. در اين حالت وقتي به عنوان مثال به يك تگ بالاتر مانند table، style تعيين نموده ايم و مي خواهيم براي تگ هاي داخلي آن مانند tr و td نيز style تعيين كنيم.

 

<style>

.tabs

{

z-index:111;

}

 

.tabs td

{

width: 100px;

}

.tabs tr

{

height: 29px;

background-image: url(../images/Login/tab.png);

background-repeat:repeat-x;

}

<style>

 

<table class="tabs">

<tr>

<td></td>

</tr>

</table>

 

حالت 5: تگ هاي داراي حالت

به عنوان مثال tag، لينك (a) داراي حالت هاي link,visited,hover,active است براي اين كه به حالت هاي مختلف يك تگ بتوان style تعيين نمود

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active { color: lime }   /* active links    */

 

به عنوان مثال تمام تگ هاي قابل انتخاب داري حالت focus مي باشند

a:focus { background-color: lime }   
input:focus { background-color: blue }   
 
نمونه خروجي تغيير رنگ زمينه يك كنترل هنگام focus :
 
 

 

Css2

شناساييAttribute (ويژگي):

به كمك اين ويژگي مي توان تشخيص داد كه آيا تگ ها از Attribute مورنظر استفاده ميكنند يا خير. به مثال زير توجه كنيد:

<style>

Img[alt=picture]

{

        border:2px solid #FF0000;

}

 </style>

 

در كد بالا فقط IMG هايي كه ويژگي ALT با متن “picture” دارند، Border قرمز ميگيرند و بقيه عكس ها تغيير نميكنند.

 

Css 3

اكثر كد هاي CSS3 فقط در نسخه هاي آخر مرورگر كار ميكند.

 

شرط بر روي ويژگي tag
حالت1: شرط در ابتدا

<style>

a[href^="ftp:"]

{color:#00FF00;}

</style>

نمونه كاربرد:

<a href="ftp://www.Depna.com/files/html_learning.doc">…

 


در كد بالا فقط لينكهايي كه در ابتداي آن ftp: باشد  سبزرنگ شوند.

 حالت2: شرط در انتها

 

<style>

a[href$=".com"]{color:#FF00FF;}

</style>

 

<a href="http://www.Depna.com">…

 


در كد بالا فقط لينكهايي كه در انتهايشان پسوند .comباشد صورتي رنگ شوند.

 شرط بر روي ويژگي

 

<style>

[alt*=picture]

{border:2px solid #FFFF00;}

</style>

 
در كد بالا تمام تگ هايي كه در Alt آن ها عبارت picture داشته باشند حاشيه زرد مي گيرند.

شرط بر روي عناصر تكرار شونده

 <style>

p:first-child{background-color:#FF6600;}

</style>

 

<p>paragraph1</p>

<p>paragraph2</p>

<p>paragraph3</p>

 


كد بالا باعث ميشود كه اگه چند پاراگراف داشته باشيم اولين پاراگراف نارنجي شود همچنين با تغيير عبارت first-child  به last-child آخرين پاراگراف نارنجي ميشود.

 

مثال:

<html>

<body>

<div>

<p>paragraph1</p>

<p> paragraph2</p>

<p> paragraph3</p>

</div>

<style>

p:last-child{background-color:#FF6600;}

</style>

 

</body>

</html>

خروجي:



نقيض: NOT

<style>

div:not([class=style1]){background-color:#FF0000;}

</style>

 

كد بالا باعث ميشود تگ هاي div كه class ي غير از style1 داشته باشند، رنگ حاشيه آن ها قرمز شود .

 

ساير امكانات شناسايي تگ

h1 ~ h2{background:#666666;}


كد بالا رنگ پس زمينه  H2هايي كه بعد از H1 بيايند را خاكستري مي كند

 h1 + h2{background:#666666;}

كد بالا رنگ پس زمينه  H2هايي كه بلافاصله بعد از H1 بيايند را خاكستري ميكند.