آموزش سلکتور first-letter:: در css

در زبان طراحی css انتخاب کننده‌های جالبی وجود دارد که برخی از آنها کمتر استفاده دارند اما همین استفاده کم ممکن است توسط طراحان حرفه‌ای و طراحانی که اشراف کامل به خصوصیات زبان css و قابلیت‌های کنترلی آن دارند استفاده شود . در 3 مقاله قبلی ( 3 مقاله قبل از این مقاله ) در مورد 3 انتخاب کننده جالب و بسیار مهم تحت نام های placeholder و selection و first-line صحبت کردیم و اگر این مقالات را مطالعه کرده باشید ، متوجه شدید که کنترل برخی بخش هایی که فکر می‌کردید باید با زبان جاوا اسکریپت انجام شود ، توسط زبان css و تنها با چندخط کد ساده ، قابل اجرا است .

موضوعی که در این مقاله پیرامون آن صحبت خواهبم کرد در رابطه با یک انتخاب کننده دیگر از خانواده انتخاب کننده‌هایی است که به شکل :: علامت گذاری می‎‌شوند . انتخاب کننده‌هایی که در بالاتر از آنها نام بردیم در کدهای css به شکل زیر کاربرد دارند :

::selection
::placeholder
::first-line

انتخاب کننده‌های بالا هرکدام در طراحی پروژه های شما وظیفه خاصی دارند . انتخاب کننده first-line که در مقاله قبلی معرفی شد جهت انتخاب سطر اول از یک متن کاربرد دارد که مفصل راجب آن صحبت شد .

وظیفه سلکتور first-letter چیست و چگونه از آن استفاده کنیم ؟

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

انتخاب کننده first-letter نیز دقیقا روی متون کار خواهد کرد اما وظیفه first-letter را شاید خودتان حدس زده باشید . وظیفه این انتخاب کننده ، انتخاب اولین حرف از کل پاراگراف است .

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

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

p::first-letter {
  font-size: 1.5rem;
  font-weight: bold;
  color: brown;
}

توجه داشته باشید که دقیقا همانند دستور first-line ، تمامی ویژگی های مربوط به قسمت اصلاح متن را می‌توان در بخش first-letter نیز استفاده کرد به عبارتی تمامی دستورات زیر را می‌توان داخل دستور first-letter استفاده کرد :

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

استفاده از این بخش شاید در تمامی پروژه های طراحی سایت نیاز نباشد و اکثرا در پروژه هایی همچون سایت های طراحی دکوراسیون داخلی یا سایت های هنری و متنی ممکن است استفاده شود .

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

این دسته محتواهای آموزشی که داخل سایت منتشر شده است به شما طراحان عزیز کمک خواهد کرد تا برای طراحی‌های خودتان انعطاف بیشتری به کار گرفته و تمامی استایل‌های خود را داخل فایل style.css نوشته و حجم کلی پروژه را سنگین نکنید . امیدواریم این مقاله برای شما کارآمد باشد . نظرات و سئوالات خود را در بخش دیدگاه‌ها با ما مطرح کنید . موفق باشید .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا