آموزش CSS بصورت کاملا تصویری از مقدماتی تا پیشرفته – جلسه ۱۵

آموزش CSS

آموزش CSS

مقدمه ای کوتاه بر معرفی CSS : شیوه‌نامهٔ آبشاری یا روی‌انداز آبشاری سَبْک یا سی‌اس‌اس (به انگلیسی: CSS: Cascading Style Sheets) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است.

شیوه‌نامهٔ آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه‌شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره‌ها)، و بسیاری دیگر از عنصرهای ساختار هرصفحه وب را، درون خود جای می‌دهند.

بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.

⬛️ شروع آموزش جلسه ۱۵ یادگیری زبان CSS :

🔴 شبه کلاس ها در CSS :

⬅️ شبه کلاس ها (pseudo-classes) :

شبه کلاس ها در CSS برای اضافه کردن افکت های خاص، به بعضی از Selectorها استفاده می شود.

در واقع از شبه کلاس ها (pseudo-class) برای تعریف یک حالت خاص از یک عنصر استفاده می شود.

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

  • استایل دهی یک عنصر زمانی که موس روی آن قرار می گیرد (hover)
  • تفاوت قائل شدن در ظاهر لینک هایی که مقصد آنها رویت شده و یا نشده است (visited)
  • استایل دهی فیلدهای ورودی، زمانی که مکان نما، برای ورود اطلاعات روی آنها قرار  گرفته است (focus)

⬅️ نحوه استفاده از شبه کلاس ها :

selector:pseudo-class {property:value;}

در CSS همچنین می توان کلاس ها را همراه شبه کلاس ها به کار برد:

selector.class:pseudo-class {property:value;}

⬅️ لینک ها و شبه کلاس ها :

لینک ها را می توان به روش های مختلفی در مرورگرها نمایش داد:

توجه: برای تنظیم Styleهای یک لینک، به موارد زیر توجه فرمایید:

  1. a:hover باید بعد از a:link و a:visited آورده شود.
  2. a:active باید بعد از a:hover آورده شود.
  3. نام شبه کلاس، به حروف کوچک و بزرگ حساس است (case-sensitive).

⬅️ کلاس ها و شبه کلاس ها :

شبه کلاس ها را می توان با کلاس ها ترکیب کرد:

a.red:visited {color:#FF0000;}

<a class=”red” href=”/css_syntax.asp”>CSS Syntax</a>

اگر لینک مثال بالا دیده بشود یا به عبارتی روی آن کلیک شود، رنگ متن آن، قرمز نمایش داده خواهد شد.

⬅️ شبه کلاس first-child :

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

توجه: برای اینکه شبه کلاس first-child: در IE8 و نسخه های قبلتر اجرا شود باید یک <DOCTYPE!> در بالای صفحه HTML اعلان شود.

⬅️ تطبیق اولین عنصر <p>

در مثال زیر گزینشگر، هر تگ <p> که اولین فرزند یک عنصر دیگر باشد را تطبیق می دهد:

⬅️ تطبیق اولین تگ <i>، داخل تمام تگ های <p>

در مثال زیر، گزینشگر، اولین تگ <i> را در تمام تگ های <p> تطبیق می دهد:

⬅️ تطبیق تمام تگ های <i>، داخل اولین تگ <p>

در مثال زیر، گزینشگر، تمام تگ های <i> داخل تگ <p> که اولین فرزند یک عنصر دیگر است را تطبیق می دهد:

کلیه شبه کلاس ها و شبه عناصر در CSS

در جدول زیر کلیه شبه کلاس ها در CSS لیست شده است:

گزینشگر مثال توضیحات مثال CSS
:link a:link تمام لینک هایی که از آن بازدید نشده است را انتخاب می کند. ۱
:visited a:visited .تمام لینک هایی که بازدید شده است را انتخاب می کند ۱
:active a:active .لینک های فعال را انتخاب می کند ۱
:hover a:hover لینک هایی را که موس روی آن حرکت می کند را انتخاب می کند. ۱
:focus input:focus تمام عناصر ورودی که فوکوس شده اند را انتخاب می کند. ۲
:first-child p:first-child تمام عناصر <p> که اولین فرزند پدرشان هستند (فرزند ارشد پدرشان) را انتخاب می کند. ۲
:lang(language) p:lang(it) تمام عناصر <p> را انتخاب می کند که خصوصیت lang آن با “it” (ایتالیایی) تنظیم شده است. ۲
:first-of-type p:first-of-type تمام عناصر <p> را که اولین عنصر <p> پدرشان باشند را انتخاب می کند.

توجه فرمایید که p:first-child باید p اولین فرزند پدرش باشد.

۳
:last-of-type p:last-of-type تمام عناصر <p> که آخرین عنصر <p> پدرشان هستند را انتخاب می کند. ۳
:only-of-type p:only-of-type تمام عناصر <p> که تنها عنصر <p> پدرشان هستند را انتخاب می کند. ۳
:only-child p:only-child تمام عناصر <p> که تنها فرزند پدرشان هستند را انتخاب می کند. (تک فرزند.) ۳
:nth-child(n) p:nth-child(2) تمام عناصر <p> که دومین فرزند پدرشان هستند را انتخاب می کند. ۳
:nth-last-child(n) p:nth-last-child(2) تمام عناصر <p> که از آخر، دومین فرزند پدرشان هستند را انتخاب می کند. ۳
:nth-of-type(n) p:nth-of-type(2) تمام عناصر <p> که دومین فرزند پدرشان هستند را انتخاب می کند. ۳
:nth-last-of-type(n) p:nth-last-of-type(2) تمام عناصر <p> که از آخر، دومین فرزند پدرشان هستند را انتخاب می کند. ۳
:last-child p:last-child تمام عناصر <p> که آخرین فرزند پدرشان هستند را انتخاب می کند. ۳
:root :root عنصر root سند را بر می گرداند. ۳
:empty p:empty تمام عناصر <p> که فرزند ندارند، را انتخاب می کند. ۳
:target #news:target تمام عناصر news# فعال جاری را بر می گرداند. ۳
:enabled input:enabled تمام عناصر <input> را انتخاب می کند که enabled هستند. ۳
:disabled input:disabled تمام عناصر <input> که disabled هستند را انتخاب می کند. ۳
:checked input:checked تمام عناصر <input> که checked هستند را انتخاب می کند. ۳
:not(selector) :not(p) تمام عناصر را به جز عناصر <p> انتخاب می کند. ۳

در جدول زیر کلیه شبه عناصر در CSS لیست شده است:

گزینشگر مثال توضیحات مثال CSS
:first-letter p:first-letter اولین حرف از هر تگ <p> را انتخاب می کند. ۱
:first-line p:first-line اولین خط هر عنصر <p> را انتخاب می کند. ۱
:before p:before محتوایی دلخواه را قبل از محتوای تمام عناصر <p> درج می کند. ۲
:after p:after محتوایی دلخواه را بعد از هر عنصر <p> درج می کند. ۲
::selection ::selection قسمتی از عنصر که توسط کاربر به حالت انتخاب درآمده است را استایل دهی می کند. ۳

 

مشاهده جلسات قبل و بعد یادگیری CSS :

جلسه ۱۴

جلسه ۱۶

بهزاد صحرانورد
۸ دی ۱۳۹۶
207 بازدید

 برچسب ها: