منوی اصلی

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

4101 بازدید

15 مرداد 1399 12:57:00

با ورود 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>

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

حالت 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>

<tr>

</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>

<tr>

</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 بیایند را خاکستری میکند.

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

برچسب ها

نظرات کاربران