cssblog.ir logo
S

first-letter

انتخاب حرف اول از طریق CSS

حرف اول متن را می‌توان از طریق این سلکتور انتخاب نمود و جلوه‌هایی مانند drop cap در زبان انگلیسی را بوسیله آن بوجود آورد

احتمالا در متون انگلیسی (بخصوص کتب و روزنامه‌ها) بارها مشاهده نموده‌اید که حرف اول یک پاراگراف بسیار بزرگتر از سایر حروف آن است و به نوعی بیانگر آغاز متن می باشد. به این حرف drop cap گفته می شود.

در CSS برای ایجاد این چنین استایل ها، سلکتور مخصوصی بنام ::first-letter وجود دارد که با استفاده از آن می توانیم حرف اول یک متن را انتخاب کنیم و به آن استایل‌های دلخواه را بدهیم. 

 

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

۱- از این سلکتور فقط روی عناصری می‌توانیم استفاده کنیم که حالت block دارند (یعنی روی عناصرinline نمی توانیم) 

همانطور که در مثال فوق مشاهده می‌کنید، سلکتور ::first-letter روی تگ <‌span‌> اعمال نشده است. 

۲- اگر روی یک عنصر هم first-letter و هم first-line استفاده شده باشد حرف اول از خصوصیات خط اول آن ارث می برد اما استایل هایی که برای first-letter نوشته شده بر استایل های first-line غلبه خواهد نمود. مثلا:

 ۳- اگر با استفاده از :before محتوایی به عنصر اضافه شده باشد، آن محتوا هم جزئی از متن کلی خواهد بود و first-letter اولین حرف از آن متن را انتخاب خواهد کرد.

 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند