بخش Vip سئو نود

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

جزئیات بیشتر
آموزش یکبار برای همیشه
بمناسبت عید بزرگ فطر ، 25% تخفیف ویژه با کد : EidFetr

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

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

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

0 30
آموزش سلکتور lang: در css

در دسته انتخاب کننده‌های زبان طراحی css اگر مقالات قبلی را حتی به شکل گذرا مطالعه کرده باشید ، متوجه شدید که اکثر انتخاب کننده‌هایی که بصورت : و یا :: بودند را بررسی کردیم و اکنون به یک گزینه جدید بنام سلکتور lang رسیدیم . اکثر انتخابگر هایی که معرفی شده است تقریبا Full Support هستند و در تمامی نسخه‌های مرورگر ها پشتیبانی می‌شوند . این سلکتور را نیز می‌توانید با خیال راحت برای پروژه‌های طراحی سایت خودتان استفاده کنید .

سلکتور lang کمی نسبت به بقیه متفاوت است اما کاربرد بسیار جالبی دارد . شاید برای شما نیز پروژه هایی وجود داشته باشد که داخل صفحاتی از آن ، هم زبان فارسی وجود داشت باشد و هم زبان انگلیسی ، یا هر نوع دیگری از این مثال ، برای نمونه زبان انگلیسی و زبان فرانسه در یک صفحه استفاده شود . از آنجایی که باید توسط دستور font-face خانواده فونت های لازم را به پروژه خودتان متصل کنید ، در این بخش می‌توان توسط چندین font-face خانواده های فونت مختلف یا همان font-family هایی را به شکل مجزا تعریف کرد . مثلا برای زبان فارسی یک font-family با نام dana و یک فونت انگلیسی با نام Manrope تعریف کنیم . به مثال زیر توجه کنید :

@font-face{
	src: url("fonts/dana.woff") format("woff");
	font-family: "dana";
	font-size: 1rem;
}
@font-face{
	src: url("fonts/Manrope.woff") format("woff");
	font-family: "Manrope";
	font-size: 1rem;
}

برای اینکه از این دو فونت بتوانیم استفاده کنیم ، ساده ترین راه این است که یک کلاس تعریف کنیم و داخل این کلاس ، به font-family مدنظر اشاره کنیم . سپس از نام این کلاس برای تغییر فونت هر بخشی که نیاز داشتیم استفاده کنیم . همانند مثال زیر :

.dana-font{
	font-family:"dana";
}
.Manrope-font{
	font-family:"Manrope";
}

اکنون توسط این دو بخشی که اضافه کردیم ، می‌توانیم یک فونت را بعنوان فونت اصلی در نظر بگیریم ، مثلا فونت دانا را برای کل پروژه به شکل زیر استفاده کنیم :

body , html {
	font-family: "dana";
}

اگر اکنون بخشی در سایت داشتیم که نوشته های آن قسمت انگلیسی بود و نیاز به فونت انگلیسی بود ، می‌توان بسادگی و بدون درگیر شدن با هرچیز دیگری از نام کلاس Manrope-font استفاده کرد ، به شکل زیر :

<p class="Manrope-font">Lorem ipsum dolor sit amet .</p>

خب این روش در حالت اولیه مشکلی ندارد ، اما هنگام داینامیک سازی وب سایت ، امکان قراردادن نام کلاس Manrope-font برای تمامی بخش‌ها وجود ندارد . در حالتی ساده‌تر می‌توان از انتخابگر lang استفاده کرد . یک نمونه از مثال برای این مورد را در ادامه خواهید دید .

چرا و چگونه از انتخابگر lang باید استفاده کنیم ؟

انتخابگر lang باید توسط یک صفت که به تگ‌های html نسبت داده خواهد شد در کدهای css استفاده شود . برای اینکه توسط خاصیت lang بتوانیم font-family و یا حتی سایر ویژگی های یک بخش خاص را کنترل کنیم ، باید ابتدا کد خود را به شکل زیر تغییر دهیم :

<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>

اگر به کدبالا دقت کنید یک صفت به شکل lang اضافه شده است که مقدار داخل آن en تنظیم شده است . توجه کنید که قراردادن کلمه en لزوما به این شکل نیست که حتما بصورت en نوشته شود و en صرفا به منظور رعایت استانداردهای دیداری و کدنویسی است که متوجه شویم این قسمت برای زبان en یا همان انگلیسی است . اکنون اگر قصد داشته باشیم به هریک از المان هایی که صفت lang را با مقدار en داشته باشند استایل دهی کنیم باید به شکل زیر عمل کنیم :

*:lang(en) {
  font-family: "Manrope-font";
  border: 1px solid #414141;
}

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

یک نکته مهم در مورد lang

فعلا زمانی که این مقاله در حال انتشار است ، اگر شما قصد داشته باشید تا به چندین انتخابگر lang به شکل همزمان استایل دهید ؛ مثلا برای تمامی زبان های غیرفارسی مثل انگلیسی و آلمانی و … تنها یک فونت اختصاص دهید ، کدی وجود دارد که به شکل زیر است :

*:lang(en,de) {
  color: green;
}

اما این حالت فعلا در داخل مرورگر Firefox و نسخه 114 به بالا پشتیبانی می‌شود و برای سایر مرورگرها باید از حالت های سینگل استفاده کرده و استایل نویسی کنید . پس حتما به این نکته نیز توجه لازم را داشته باشید . این سلکتور تقریبا از سلکتورهای جدید است و هنوز تا شناخته شدن کامل و جا افتادن در بستر طراحی ، کمی زمان نیاز دارد . امیدواریم این محتوا برای شما مفید بوده باشد . پاینده باشید .

امید قدیمی

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

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

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

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

مزایای سایت شرکتی آیا تاکنون با خود فکرکرده اید که هنگام طراحی یک وب سایت شرکتی چه مزایایی عاید حال شما خواهد شد ؟ و یا اگر بخواهیم این سوال را به گونه ای بهتر مطرح کنیم این خواهد بود که مزایای سایت شرکتی چیست ؟ و پس از اینکه من سایت شرکتی خودم را […]

4 1,183

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

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

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