نوشته های من !

راجع به تجربه های شخصی از دنیای برنامه نویسی می نویسم، یا از روزمرگی هام …
CSS حرفه ای – آموزش استفاده از Pseudo-Elements
نویسنده:
۲۱ اسفند ۹۲

مقدمه : ( شبه عنصر چیست ؟ )

Pseudo-Element یا شبه عنصر قابلیتی داخل CSS هست برای اضافه کردن قابلیت های خاص به عناصر HTML . در جدول زیر لیستی از این selector ها ( انتخاب کننده ها ) میبینید. ( این لیست کامل نیست، امکان داره در آینده این مطلب رو ادامه بدم .)

توضیح کوتاه

مثال از استفاده

انتخاب کننده

(selector)

استایل دادن به حرف اول یک پاراگراف.

p:first-letter

:first-letter

استایل دادن به خط اول یک پاراگراف.

p:first-line

:first-line

قرار دادن متن بعد از پاراگراف.

p:after

:after

قرار دادن متن قبل از پاراگراف.

p:before

:before

دادن استایل خاص به پاراگراف هایی با زبان های خاص.

p:lang(fa)

:lang(language)

جدول(۱) – لیست شبه عناصر

کاری که این عناصر انجام میدن از اسمشون پیداست، این عناصر در واقع مجازی هستند، به این معنی که در سورس برنامه قابل مشاهده نیستند و فقط در استایل وب سایت ( css ) و برای کاربران قابل مشاهده هستند.

در این آموزش راجع به این selector ها صحبت میکنیم و برای درک راحت تر موضوع مثال عملی هم راجع به هر قسمت اضافه می کنم که میتونید از فایل تمرینات آخر همین پست دانلود کنید.

یک ) first-letter:

با استفاده از این selector میتونین به حرف اول پاراگراف ( یا هر عنصری که وظیفه بخش بندی اطلاعات رو داره ) استایل خاصی بدین. توجه داشته باشین صفت هایی که برای first-letter قابل تعریف هستن به شرح زیر می باشد ( برگرفته شده از سایت w3schools‌ ) :

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align (only if float is ‘none’)
  • text-transform
  • line-height
  • float
  • clear

سازگاری این selector با مرورگرهای اصلی کامل هست.

برای روشن تر شدن توضیحات داده شده به مثال زیر توجه کنید‌ :

<html>
<head>
<style>
.content:first-letter
{
font-size:3em;
color:#900;
}
</style>
</head>
<body>

<div class="content">
Quick brown fox jumped over the lazy dog.
<br />
Quick brown fox jumped over the lazy dog.
</div>
<div class="content">
Quick brown fox jumped over the lazy dog.
</div>

</body>
</html>

و نتیجه ی کد بالا عکس زیر هست .

نحوه عملکرد انتخاب کننده firstletter css

دو ) first-line:

اگر بخش قبل رو خوندین و مثال رو مشاهده کردین، باید بگم این selector نیز عملی مشابه بخش قبل انجام میده‌ با این فرق که استایل های نوشته شده بر روی اولین خط از نوشته ها اعمال میشه. همچنین صفت هایی که این selector پشتیبانی می کند به شرح زیر است ( برگرفته از سایت w3schools‌ ) :

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

این selector نیز دارای پشتیبانی کامل در مرورگرهای اصلی می باشد.

اکنون برای روشن تر شدن توضیحات به مثال زیر توجه کنید :

<html>
<head>
<style>
.content:first-line
{
font-size:3em;
color:#900;
}
</style>
</head>
<body>

<div class="content">
Quick brown fox jumped over the lazy dog.
<br />
Quick brown fox jumped over the lazy dog.
</div>
<div class="content">
Quick brown fox jumped over the lazy dog.
</div>

</body>
</html>

و نتیجه کد بالا :

نحوه عملکرد first-line css

این دستور در طراحی های واکنش گرا نیز قابل استفاده است.

سه و چهار ) before: و after:

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

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

.class:after
{
	content: “.”;
}
.class:before
{
	content: “-”;
}

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

پشتیبانی از این selector در مرورگرهای اصلی کامل هست و همچنین بر خلاف first-letter و first-line محدودیتی در استفاده از صفت های css نداره.

پنج ) lang:

کاربرد این دستور برای مواقعی هست که شما نیاز دارید برای هر زبان،‌ یک استایل متفاوت در نظر بگیرید،‌ برای مثال در طراحی یک قالب دو زبانه، نوشته های فارسی راست به چپ و نوشته های انگیلیسی چپ به راست نشون داده بشن .

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

p:lang(fa)
{
	direction: rtl;
}

معنی این دستور این هست که در هر جای صفحه اگر پاراگرافی تعریف شد که خاصیت زبان اون برابر fa بود، استایل اون عنصر راست به چپ نمایش داده بشه، نحوه تعریف زبان به شکل زیر هست :

<p lang=”fa”>نوشته ی آزمایشی</div>

توجه داشته باشید برای اینکه این selector بر روی اینترنت اکسپلورر ورژن ۸ کار کنه باید حتما <!DOCTYPE> برای فایل مورد نظرتون تعریف کنید.

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

دانلود فایل تمرینات – css حرفه ای

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *