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

آموزش CSS

آموزش CSS

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

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

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

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

🔴 شبه عناصر (pseudo-elements)

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

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

برخی از استفاده های شبه عناصر:

  • از شبه عناصر می توان برای استایل دهی اولین کاراکتر (first-letter) و یا اولین خط (first-line) یک پاراگراف استفاده نمود.
  • می تون از آن برای اضافه کردن یک محتوای دلخواه قبل (before) و یا بعد (after) از یک عنصر استفاده نمود.

⬅️ نحوه استفاده از شبه عناصر :

selector:pseudo-element {property:value;}

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

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

⬅️ شبه عنصر first-line :

این شبه عنصر برای اضافه کردن یک Style خاص بر روی اولین خط یک متن استفاده می شود.

در مثال زیر، خصوصیت color و font-variant روی اولین خط پاراگراف (عنصر p) اعمال می شود:

توجه: شبه عنصر first-line تنها با عناصر block می تواند استفاده شود.

توجه: خصوصات زیر برای شبه عنصر first-line بکار برده می شوند:

  • font
  • float
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

⬅️ شبه عنصر first-letter :

برای اضافه کردن یک style خاص روی اولین حرف یک متن استفاده می شود:

توجه: شبه عنصر first-letter تنها با عناصر block می تواند استفاده شود.

توجه: خصوصات زیر برای شبه عنصر first-letter بکار برده می شوند:

  • font
  • float
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align (اگر خصوصیت font با مقدار none تنظیم شده باشد)
  • text-transform
  • line-height
  • float
  • clear

⬅️ کلاس ها و شبه عناصر :

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

p.article:first-letter {color:#ff0000;}

<p class=”article”>A paragraph in an article</p>

در مثال بالا، حرف اول تمام پاراگراف هایی که کلاس آنها “article” است به رنگ قرمز نمایش داده خواهد شد.

⬅️ اعمال شبه عناصر مختلف روی عنصر p

شبه عناصر می توانند با یکیدگر ترکیب شوند.

در مثال زیر، اولین حرف تمام پاراگراف ها با رنگ قرمز و اندازه آن با مقدار “xx-large” تنظیم شده است، همچنین باقیمانده خط اول، نیز با رنگ آبی و خصوصیت font-variant آنها با مقدار “small-caps” تنظیم شده است:

⬅️ شبه عنصر before :

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

در مثال زیر، قبل از هر تگ <h1> در صفحه HTML ، عکس “smiley.gif” درج می شود:

⬅️ شبه عنصر after :

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

در مثال زیر، بعد از هر تگ <h1> در صفحه HTML ، عکس “smiley.gif” درج می شود:

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

جلسه ۱۵

جلسه ۱۷

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

 برچسب ها: