بخش Vip سئو نود

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

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید " شاهکار تولید محتوا " برای علاقمندان به سئو ، جزئیات دوره

آموزش سلکتور marker:: در css

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

انتخاب کننده marker چیست و برای چه مواردی کاربرد دارد ؟ تغییر آیتم های مارکر پیشفرض در لیست های غیرترتیبی به کمک Css !

0 13
آموزش سلکتور marker:: در css

در css سلکتورهایی وجود دارند که حالت خاصی را باید برای آنها داخل کد نوشت . برای مثال انتخاب کننده marker یکی از این انتخاب کننده‌ها است که در داخل پروژه های طراحی سایت ممکن است به آن نیاز داشته باشید اما هنوز از وجود چنین انتخاب کننده‌ای در طراحی سایت خبر ندارید . مطمئنا همه شما لیست‌ها را در یک وب‌سایت می‌شناسید که عموما ظاهری به شکل زیر دارند :

آیتم های لیست با ul و li

بخش marker در داخل پروژه‌های طراحی سایت جهت ایجاد تغییر برای قسمت list style های تگ های li کاربرد دارد . زمانی که شما استایل خاصی را برای قسمت list style در مورد تگ های li تغییر نداده باشید ، به شکل پیشفرض ، یک علامت دایره مشکی کنار آیتم های لیست نمایش داده می‌شود . در بسیاری از وب سایت‌ها به این دلیل که آیتم های دایره در کنار آیتم های لیست نمای خوبی ندارد آن را توسط دستور زیر حذف می‌کنند :

li{
	list-style:none;
}

زمانی که این دستور برای تمامی تگ های li در سایت اعمال شود و زمانی که از li استفاده کنید ، دیگر دایره های کوچک در کنار لیست آیتم ها نمایش داده نمی‌شود و اگر احیانا در جای دیگری نیاز بود که این دایره‌ها به عبارتی marker ها که گاها به آنها بولت نیز گفته می‌شود مجدد نمایش داده شود باید دستور زیر را بنویسید ( مثلا برای li هایی که داخل یک div با کلاس خاص هستند ) :

.first-div li {
	list-style:circle;
}

توجه داشته باشید که قسمت marker برای لیست های غیرترتیبی ( ul ) اعمال می‌شود به این دلیل که در لیست های ترتیبی ( ol ) ، شماره های هر آیتم در کنار آن قرار دارد و به نوعی ترتیب خاصی در این لیست‌ها مدنظر است و یا برای شمارش آیتم ها ، باید شماره هر آیتم در کنار آن باشد ، لذا امکان استایل دهی به بخش مارکر در لیست های ترتیبی عملا وجود ندارد .

اما در لیست های غیرترتیبی که ساختار آنها در زبان html بصورت ul و li است ، شماره‌های هر آیتم درکنار آنها چاپ نمی‌شود و به همین دلیل بجای این شماره‌ها ، marker هایی در کنار li های شما قرار خواهد گرفت .

ویژگی marker به چه بخش هایی استایل خواهد داد ؟

همانطور که خودتان تاکنون متوجه شدید ، ویژگی marker برای تغییر در استایل همان marker ها یا بولت های دایره شکلی است که کنار لیست آیتم ها نمایش داده می‌شود . شاید اینگونه تصور می‌کردید که این قسمت به شکل پیشفرض توسط خود مرورگر اضافه می‌شود و تنها می‌توان شکل و شمایل آن را توسط دستور list-style تغییر داد . برای تغییر مارکر های li یک نمونه دستور می‌تواند به شکل زیر باشد :

li::marker {
  content: '✝';
  font-size: 1.2em;
}

دقت داشته باشید که در این کد وجود بخش content بسیار مهم است و باید این قسمت را داخل کدخودتان به درستی تنظیم کنید . از تصاویر نیز می‌توانید برای این بخش به کمک قرار دادن دستور url در داخل بخش content استفاده کنید .

مواردی که میتوان داخل دستور marker استفاده کرد به شرح زیر است :

All font properties
The white-space property
color
text-combine-upright, unicode-bidi, and direction properties
The content property
All animation and transition properties

به عبارتی می‌توان از ویژگی‌های مربوط به font ، ویژگی های مربوط به بخش white-space ، ویژگی های بخش color یا همان رنگ ، ویژگی های قسمت direction ، ویژگی content و حتی بخش های انیمیشن و transation استفاده کرد . در حال حاضر این موارد توسط دستور marker پشتیبانی می‌شود و احتمال اضافه شدن دستورات دیگری نیز در آینده به این بخش وجود دارد .

توجه داشته باشید که این ویژگی توسط تمامی مرورگرهای بروز پشتیبانی می‌شود . برای مثال در مرورگر chrome و Edge از نسخه 86 به بالا و در فایرفاکس از نسخه 68 به بالا پشتیبانی می‌شود . لذا باید دقت کرد که اگر در مرورگرهای قدیمی و بخصوص IE این ویژگی را تست کنید شاید در استایل های خود با مشکل روبرو شوید .

شناخت این قسمت به شکل درست ، باعث خواهد شد تا کنترل بیشتری بروی طراحی‌های خودتان داشته باشید . این قسمت‌ها که مربوط به انتخاب کننده هایی با حالت :: هستند ، عموما توسط طراحان حرفه‌ای به شکل بجا استفاده می‌شوند . همانند بخش هایی همچون first-line و first-letter و … باید ظرافت بسیار زیادی در بکار گرقتن این بخش‌ها داشته باشیم چراکه تک تک این موارد مسبب ایجاد زیبایی بیشتر در طرح شما هستند . مقالات بیشتر را در قسمت دسته بندی ” مقالات طراحی سایت ” مطالعه کنید .

امید قدیمی

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

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

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

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

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

2 1,172

چگونه به کمک دستور backdrop می‌توان پس زمینه سیاه رنگ در پشت ویدیوها یا المان های مشابه آن را تغییر داد ؟ این محتوا ممکن است برای شما بسیار جالب باشد !!!

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