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

در زبان طراحی css سلکتورها یا انتخاب کننده‌های مختلفی وجود دارد که معروف‌ترین آنها کلاس و آیدی ( class , id ) است که اکثر طراحان سایت و بخصوص css کاران با آنها آشنایی دارند  . در این بین انتخاب کننده‌هایی وجود دارند که به اندازه برخی سلکتورها معروف نیستند اما واقعا ویژگی های جذابی را در صفحه ایجاد می‌کنند که یادگرفتن این موارد خالی از لطف نیست .

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

نقش first-line در css چیست ؟

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

تمامی استایل هایی که روی متون قابل اجرا هستند مثل font-size و font-weight و color و font-style و … همگی داخل دستور first-line قابل استفاده هستند ، تمامی حالت های ممکن که می‌توان داخل دستور first-line استفاده کرد ، دستورات زیر هستند :

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

تمامی این دستورات به کمک مشتقات آنها داخل دستور first-line قابل استفاده هستند و شما می‌توانید تمامی گزینه‌ها درمورد مثلا font را ازجمله weight و style و … استفاده کنید .

چگونه از دستور first-line استفاده کنیم ؟

برای اینکه از این بخش استفاده کنیم ، می‌توانیم بخش مدنظر خود را ابتدا انتخاب کنیم ( به عبارتی اگر یک بخش متنی دارید که در داخل آن قصد دارید تا اولین تگ p را انتخاب کرده و از first-line استفاده کنید ، ابتدا این بخش را select خواهیم کرد ) . پس انتخاب بخش مدنظر داخل قالب با خود شماست ، اکنون کدی که باید به ادامه کد خودتان متصل کنید می‌تواند به شکل زیر باشد :

p::first-line {
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: underline;
}

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

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

پس اگر قصد داشتید تا از دستور first-line استفاده کنید ، باید مدنظر داشته باشید که نهایتا چه خروجی برای شما خواهد داشت . توجه داشته باشید که استفاده از تمامی دستورات باید کاملا هوشمندانه انجام شود . اگر شما در استفاده از دسورات زبان سی اس اس زیاده روی کنید ، طرح شما جذابیت لازم را نخواهد داشت .

تاکید روی متون باید در بخش های خاصی از سایت انجام شود ، اگر شما در تمامی بخش های سایت خودتان از این ویژگی استفاده کنید ، ممکن است کاربر شما از این کار خسته شود ، و بهتر است این ویژگی را در صفحات اصلی سایت یا بخش هایی همچون صفحات فرود استفاده کرد .

دستور first-line یکی از دستورات جذاب در سی اس اس است که بسیاری از افراد از وجود آن بی‌خبر هستند اما بدنیست تا شما بعنوان یک css کار از این دستورات اطلاع داشته باشید چراکه وجود اینگونه دستورات و انتخاب کننده‌ها داخل Css مسبب این خواهد شد که شما نیاز کمتری به جاوا اسکریپت یا کتابخانه جی کوئری داشته باشید . حقیقتا انجام این موارد توسط دستورات زبان جاوا اسکریپت بسیار سخت است اما به کمک انتخاب کننده first-line تنها کافیست تا داخل همان فایل Style.css بسادگی آب خوردن تغییرات خود را در خط اول متن مدنظر اعمال کنید .

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