راهمايي در مورد css

[farhad6169 125]

با سلام

 

تو css وقتي ميخاهيم به يك كلاس خصلت هاور رو اضافه كنيم بصورت زير مي نويسيم

 

.classname:hover{}

 

در واقع بعد از اسم كلاس يك علامت دو نقطه قرار ميديم و كدها رو اضافه مي كنيم

 

اما به غير از هاور دستورات ديگري نيز مي توان بعد از هاور قرار داد از جمله

 

1-   :nor

2-   :nth-child

3-   :after

4-   :before

5-   :first-child

6-   :last-child

7-    :only-child

8-    :active

9-    :cheked

10-  :focus

11-  :hover

12-  :selection

13-  :disabled

14-  :empty

15-  : enabled

 

از دوستاني كه ميتونن در مورد اين 15 مرود توضيح خوبي بدن ممنون ميشم راهنمايي بفرمايند.

 

با تشكر

[musio 346]

با سلام

به ترتیب حضور ذهن ندارم، اونهایی که یادم هست رو میگم

بقیه مطالب رو تو یک مقاله آماده میکنم و ارایه میکنم

Active , focuse , hoverd مربوط به حالت های مختلف لینک ها هستند

که به ترتیب لینکی که موس روش هست ، لینکی که با تب فعال شده، و آخری مربوط به لینک دیده شده

Selection مربوط به فرم هست و گزینه انتخاب شده رو مدنظر داره

First-child , last child , nth مربوط به لیست ها است که به ترتیب به اولین فرزند و آخرین فرزند

اگه خدا عمری بده فردا صبح توضیحات کامل رو درج میکنم که مفید واقع بشه

یاعلی

[farhad6169 125]

با تشكر

 

همانطور كه بنده مرتب نوشته ام لطفا دوستان هم مرتب بنويسن لطفا

 

با تشكر فراوان

[musio 346]

با سلام

همونطوری که قول دادم

این هم از توضیحات مربوط  به کلاس های کاذب، مفید و مختصر و صد البته مرتب.

ببخشید که یکم دیر شد ومنتظر موندین.. 

اول یه پیش زمینه ای درمورد selector ها در css بدم شاید یکسری ها ندونن..

 

در css برای اینکه بخواهیم خصوصیتی رو برای فایل html خود تعریف کنیم از selector ها استفاده می شود.

selector ها به 4 دسته تقسیم میشوند

1. type selector: همون نام تگ html است که استفاده می کنیم 

style تعریف شده در این حالت برروی تمامی عناصر از این نوع اعمال میشود.

tabla{ border: 1px solid #000;}

 

2. class selector : این دسته از selector ها میتوانند روی تمامی عناصر html که صفت کلاس آنها برابر با نام کلاس مورد نظر باشند استفاده شوند و اثر بگذارند 

class selector ها با یک نقطه شروع میشوند و در ادامه نام کلاس قرار میگیرد

.m1{color: #000;}

برای استفاده بصورت زیر عمل میکنیم :

<div class="m1"> سلام </div>

 

3. id selector: این دسته از selector ها فقط برروی یک عنصر منحصر به فرد در html که نام id آنها برابر با آن باشد عمل میکند.

برای تعریف مثل class selector ها عمل میکنیم و فقط بجای نقطه (.) از # استفاده می کنیم.

 

#musio {border: 1px solid #000;}

برای استفاده بصورت زیر عمل میکنیم :

<div id="musio"> سلام </div>

 

4. universal selector: این selector ها به صورت عمومی هستند و برای تمامی عناصر html اعمال میشوند.

*{font-family: tahoma,arial;}

 

5. pseudo class یا کلاس های کاذب : این selector ها برای نمایش رویداد های پویا استفاده میشوند مثل تغییر وضعیت یا شرایط عمومی تری که نمیتوان به راحتی کنترل کرد

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

برخلاف کلاس های معمولی ، کلاس های کاذب با یک (  قبل از اسم خصوصیت تعریف میشوند.

 

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

 

کلاس های کاذب که در css به صورت معمول استفاده میشوند: 

 

1-    :link  --> اشاره به لینک های دیده نشده دارد

 

2-    :visited  --> اشاره به لینک های دیده (بازدید) شده است

 

3-  :hover  --> اشاره به عنصری داره که در حال حاضر موس کاربر روی اون قرار دارد

 

4-  :focus  --> عنصری که هم اکنون focus روی اون عنصر قرار دارد

 

5-  :active  --> عنصر جاری که کاربر روی اون کلیک کرده است و نگه داشته است

 

نکته:

برای کلاس های link , visited باید style های جداگانه ای تعریف شود ، لازمه که بگم این دو تا کلاس قط برروی لینک ها عمل میکنند یعنی تک <a>

اگر کلاس کاذب link بعد از کلاس focus تعری بشه در اولویت بالاتری قرار میگیره ، کلاسی ک5 آخر از همه قرار بگیره اولویت بالاتری داره

 

-----------------------------------------------------------------------

خوب حالا کلاس های کاذبی که در css3 معرفی شدند و استفاده میشوند.

-----------------------------------------------------------------------

6-   :after  --> این کلاس برای ایجاد محتوای دلخواه  بعد از عنصری مشخص است

 

7-   :before  --> این کلاس برای ایجاد محتوای دلخواه قبل از عنصری مشخص است

 

در این کلاس ها با خصوصیت content میتوان متن دلخواه را اضافه کرد. به مثال زیر توجه کنید.

p{margin-bottom: 12px;}

 

p:before {

content:'* ';

color: red;

font-weight: bold;

display: inline-block;

line-height: 24px;

background: blue;

margin-left: 7px;

border-radius: 100%;

width: 24px;

height: 24px;

text-align: center;

}

 

P:after{ content:'.';}

 

<p>این یک متن تستی است</p>

<p>این یک متن تستی است</p>

 

نکته: محتوای تولید شده توسط این کلاس ها قابلیت انتخاب ندارند و هایلایت نمیشوند ، چون جز محتوای صحه به حساب نمی آیند.

-----------------------------------------------------------------------

کلاس های کاذب توارثی (ارثی):  این کلاس ها مربوط به انتخاب عناصر فرزند از یک عنصر پدر هستند.

این کد html رو در نظر بگیرید..

<ul>

 <li>Lang

 <ul>

 <li>HTML</li>

 <li>CSS</li>

 <li>Javascript</li>

 </ul>

 </li>

 

<li>CMS

 <ul>

 <li>Wordpress</li>

 <li>Joomla</li>

 <li>Drupal</li>

 </ul>

 </li>

</ul>

حالا اکه بخواهیم روی تک تک اینها دسترسی داشته باشیم و خصوصیات رو تعریف کنیم باید برای همه آنها کلاس تعریف کنیم که کار سخت و ناپسندی هست

در عوض میتونیم از این کلاس ها استفاده کنیم

 

8-   :nth-child(n)  --> با استفاده از این کلاس برای تک تک المانت های موجود در صفحه وب میتونیم بدون استفاده از id , class استایل تعریف کنیم

حرف n توی پرانتز یک عدد طبیعی هست که تعیین کننده چندمین فرزند از عنصر پدر است.

 

حالا به css زیر دقت کنید تا متوجه شید که چطور میتونیم به هر یک از li ها یک استایل جداگانه اختصاص دهیم

ul li {

 color: blue;

 font: 24px tahoma;

 text-shadow: -1px 1px 1px #333;

}

 

ul li:nth-child(1){color: red;}

ul li:nth-child(2){color: green;}

ul li:nth-child(1) li:nth-child(1){color: orange;}

ul li:nth-child(1) li:nth-child(2){color: brown;}

ul li:nth-child(1) li:nth-child(3){color: pink;}

ul li:nth-child(2) li:nth-child(1){color: gray;}

ul li:nth-child(2) li:nth-child(2){color: silver;}

ul li:nth-child(2) li:nth-child(3){color: yellow;}

 

9-   :nth-last-child(n)  --> این کلاس برعکس کلاس nth-child(n) عمل میکند، یعنی از آخر به اول شمارش رو انجام میدهد.

 

10-   :first-child  --> خوب ، این کلاس با توجه به توضیحات بالا کارش مشخصه .. این کلاس به اولین عنصر فرزند از یک عنصر پدر اشاره میکند.

 

11-   :last-child  --> این کلاس هم به آخرین عنصر فرزند از یک عنصر پدر اشاره میکند.

 

12-    :only-child  --> این کلاس هم برای عناصر پدری هست که فقط یک فرزند دارند.. یعنی روی عناصری که بیش از یک فرزند دارند کار نمیکند.

<style>

div p:only-child

{

color: red;

}

</style>

<body>

<div><p>musio</p></div>

<div><p>joomina</p><p>joomina.ir</p></div>

</body>

---------------------------------------------------------------------

13-  : enabled  --> اين كلاس تگ هايي را تحت تأثير قرار مي دهد كه اصطلاحاً Enable  يا فعال هستند. تگ هاي فعال تگ هايي هستند كه مي توان بر روي آن ها فوكوس یا كليك كرد يا متني را در آن ها درج نمود.

 

مثال زیر به تمامي تگ هايي از نوع input  ( همانند TextBox ،  Button  و و . . . ) كه فعال هستند اعمال مي شوند :

 

Input:enabled  {}

 

 

14-  :disabled  --> 

اين كلاس برعکس كلاس قبل رفتار مي كند. تگ هايي را تحت تأثير قرار مي دهد كه اصطلاحاً Disable يا غيرفعال هستند. تگ هاي غيرفعال تگ هايي هستند كه نمي توان بر روي آن ها فوكوس یا كليك كرد يا متني را در آنها درج نمود.

 

مثال زیر به تمامي تگ هايي از نوع input  ( همانند TextBox ، Buttom و . . . ) كه فعال نيستند اعمال مي شوند :

 

Input:enabled  {}

 

 

15-  :cheked  --> 

اين كلاس فقط روی عناصری اعمال مي شود كه حالت تيك خوردن دارند. عناصری مانند CheckBox و RedioButton . كلاً تگ هايي كه خاصيت Selected يا Checked دارند توسط اين كلاس 

 

تحت تأثير قرار مي گيرند.

توجه داشته باشید  كه تنها در صورت تيك خوردن آن عنصر قواعد اين كلاس بر روي آن اعمال مي شود.

 

مثال زیر روی  تگی اعمال مي شود كه نام آن confirm است. اين تگ مي تواند يك CheckBox يا RadioButton باشد و حتماً بايد تيك خورده باشد :

 

#confirm:checked  {}

 

 

16-   :not  --> 

 

اين كلاس پارامتري را كه مي پذيرد نقض مي كند. عبارت simple selector در سينتكس اين كلاس مي تواند يك Selector ساده يا كلاس كاذب باشد اما نمي توان از خود اين كلاس در پارامترش 

 

استفده كرد. به عنوان مثال، Selector اي مانند "input:not([type="submit:])  تمامي تگ هاي صفحه به جز تگ هاي از نوع input را كه از نوع submit هستند تحت تأثير قرار 

 

مي دهد.

 

مثال زیر، بر روي تمامي تگ هاي صفحه به جز تگ هاي table اعمال مي شوند :

 

:not(table)  {}

---------------------------------------------------------------------

17-  :selection  --> خوب این کلاس کاذب استایل عنصری را موقعی که انتخاب شده است تعیین میکند.

 مثلا موقعی که یک عنصر را هایلایت میکنیم یا  ctrl+a در مرورگر که همه صفحه را آبی میکند..

میتوان با این کلاس این رنگ را تغییر داد.

 

18-  :empty  --> اين كلاس عناصری را كه هيچ  فرزندي ندارند تحت تأثير قرار مي دهد. توجه داشته باشيد كه متن بين يك تگ يك نوع تگ متني محسوب و موجب مي شود كه اين كلاس بر روي چنين عناصری  

 

تأثير نداشته باشد. كامنت بين تگ ها شامل این قاعده نمیشود . حتي يك فاصله بين تگ آغاز و تگ پايان نيز از اعمال اين كلاس به تگ جلوگيري مي كند.

Selector اي مانند "p:empty" باعث مي شود كه در كدهاي HTML زیر فقط اولين تگ p تحت تأثير قرار بگيره و روی دو تا تگ بعدی هیچ اثری ندارد

<p></p>

<p>  </p>

<p>Hello,  world!</p>

 

 

در آخر هم باید بگم که کلی کلاس کاذب دیگه هم وجود داره که دیگه در این مقاله نمیگنجید.

 

امیدوارم که مفید واقع بشه

مصطفی شعاع

 

یاعلی