بخش Vip سئو نود

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

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

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

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

سلکتور first-letter در پروژه های طراحی سایت چه نقشی دارد ؟ چگونه از این انتخاب کننده به درستی در پروژه های طراحی سایت استفاده کنیم ؟

0 57
آموزش سلکتور 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 را شاید خودتان حدس زده باشید . وظیفه این انتخاب کننده ، انتخاب اولین حرف از کل پاراگراف است .

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

استفاده از ویژگی first-letter در css

مشاهده می‌کنید که اگر این استایل به درستی استفاده شود می‌توان طراحی جذابی را در اولین حرف از پاراگراف ایجاد کرد . باید توجه داشته باشید که استایل نویسی این قسمت را چگونه انجام دهید . استایل نویسی برای این قسمت حالات مختلفی دارد و باید باتوجه به اینکه قصد دارید روی چه بخشی این استایل اعمال شود ، 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 خط کد ) دست و پنجه نرم کنند .

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

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

امید قدیمی

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

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

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

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

چگونه می‌توان با کمترین دردسر از شر تحریم سایت فری پیک و تمام سایت‌های تحریم شده خلاص شد ؟! در این مقاله روش‌هایی را خدمتتان آموزش خواهیم داد که بصورت قطعی عبور از تحریم را ممکن خواهد کرد .

3 4,213

ساب دامین ، پارک دامین و ادان دامین چیست و چه زمانی باید از آنها استفاده کنیم ؟ توضیح ساده و روان در مورد مفاهیم مربوط به دامنه !

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

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