بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید آموزش طراحی cms با php و mysql ، مشاهده دوره

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

مقالات طراحی سایت

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

0 49
آموزش سلکتور 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 در css

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

این ویژگی با حالت Full support است یعنی بروی تمامی مرورگرها حتی در نسخه های قدیمی‌تر نیز پشتیبانی می‌شود و از آنجایی که اکثر مرورگرها امروزه بروز هستند ، می‌توان با خیال راحت از آن استفاده کرد .

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

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

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

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

امید قدیمی

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

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

استفاده از سلکتور visited برای استایل نویسی بهتر لینک‌ها در طراحی پروژه های وب ! درست ترین حالت برای تغییر استایل لینک ها در حالت visited .

0 54

چگونه دکمه Desktop Site برای سایت خودمان طراحی کنیم تا بدون نیاز به تنظیمات مرورگر گوشی ، وضعیت نمایش سایت را تغییر دهیم !

0 52
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود