wait لطفا صبر کنید
صفحه اصلی  » مقالات
1395/12/08
1647
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 بیایند را خاکستری میکند.

تماس با ما

ایمـیل : I N F O @ D E P N A . C O M
 دفتر تهران : خیابان کارگر شمالی - بعد از مسجد النبی - خیابان ابراهیمی (17) - پلاک 140
تلفن:88019001-021
 دفتر قم : خیابان 45 متری صدوقی - 20 متری فجر - خیابان دانش - کوی 14 - پلاک 10
تلفن:32906868-025