Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

آموزش انتخابگر های color ، font ، text-align و direction در CSS

در این آموزش می خوام به شما چند تا انتخابگر ساده رو که در css کاربرد بسیار زیادی دارن به شما آموزش بدم.

از selector های ساده مانند color ، direction ، font و text-align شروع می کنیم.

قبل از شروع به این مثال توجه کنید:

مثال


نحوه استفاده از انتخابگر color

همون طور که از اسمش پیداست این کد به شما کمک می کنه که بتونید رنگ متون رو تغییر بدید. به مثال زیر توجه کنید:

div{
    color: blue;
}

چه رنگ هایی وجود دارد؟ چگونه رنگ ها را بنویسیم؟

همون طور که دیدید بعد از color شما می توانید از مقادیری مانند blue , red , black , brown , yellow و ... استفاده کنید که البته اگر در کدنویسی کمی حرفه ای تر شدید دیگر از این مقادیر کمتر استفاده می کنید و بیشتر به دنبال کد هر کدام از آنها می روید که می توانید آموزش مختصری را در این لینک یاد بگیرید. برای مثال به نمونه زیر برای رنگ سیاه توجه کنید:

div{
    color: #000;
}

که البته می توانید به جای 000 از 000000 استفاده کنید. در نوشتن رنگ ها شما می توانید در صورتی که دو عدد کناری مثل هم باشند آن را به صورت مختصر بنویسید. مثلا به جای FF0011 می توانید بنویسید F01

attention
توجه داشته باشید که برای استفاده از این نوع کد ها (مثلا قرمز با کد FF0000) می بایست حتما قبل از آن از کاراکتر # استفاده کنید.

نحوه استفاده از font

همانطور که اسم مشخص است شما می توانید با استفاده از این خاصیت به نوشته های خود جلا دهید و آنها را زیبا و زیبا تر کنید. برای مثال بهترین انتخاب برای یک کدنویسی خبره ایرانی و نوشتن متون فارسی مانند همین متنی که شما می خوانید مثال زیر است:

div{
    font: 11px Tahoma;
}

در مقادیر بالا 11px نشان دهنده اندازه متن و Tahoma نشان دهنده فونت متن می باشد که بهترین فونت و سازگار ترین فونت برای نوشته های ایرانی می باشد. البته فونت های بسیار زیبا تری هم مانند B Yekan یا B Koodak و ... وجود دارند که برای استفاده از آن ها باید بر قالب آن فونت را نصب کرد که کاری حجم گیر و وقت گیر است و اصلا به استفاده از آن پیشنهاد نمی شود.

برخی از زیر دسته های font

منظرور از زیر دسته این است که انتخابگر های دیگری هم مانند font وجود دارند که در واقع همان font هستند ولی به صورتی مجزا از آن هم موجود هستند.

گزينه توضيحات
font-family این در اصل همان فونت هست که نوع فونت (مثلا Tahoma) را مشخص می کند.
font-style این گزینه حالت فونت را مشخص می کند که می تواند مقادیری نظیر italic , normal , oblique , inherit داشته باشد.
font-size این گزینه مقدار بزرگی فونت را مشخص می کند (مثلا 11px)
font-weight این گزینه مقدار توپر بودن (bold) فونت را مشخص می کند و مقادیری نظیر bold , normal , inherit , 100 , 200 , 300 , ... , 900 , lighter , bolder را داشته باشد.
font-kerning
font-language-override
font-size-adjust
font-stretch
font-variant
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
مقادیر دیگر که کاربرد زیادی در کدنویسی ندارند ...

نحوه استفاده از direction

direction در واقع همون dir در html هست که با استفاده از اون شما می تونید متن خودتون رو برای متن های راست چین و یا چپ چین اختصاص بدید.

در استفاده  از direction به دو خاصیت بر می خورید:

  1. ltr : که مخفف Left To Right می باشد و متن شما را چپ چین می کند.
  2. rtl : که مخفف Right To Left می باشد و متن شما را راست چین می کند که برای فارسی زبانان بسیار مفید است.
div{
    direction: rtl;
}

نحوه استفاده از text-align

این خاصیت در واقع همان align درون html می باشد که در CSS هم وجود دارد. شما با استفاده از آن می توانید متن خود را به طرف های راست ، وسط ، چپ و ... منتقل کنید.

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

گزينه توضيحات
left متن را به سمت چپ می برد.
right متن را به سمت راست می برد.
center متن را به وسط صفحه می برد.
justify متن را از اول سطر شروع کرده و دقیقا در آخر سطر به پایان می رساند و متن شما را منظم می کند.
end متن شما را در آخر سطر (بر خلاف direction متن را می برد)
start متن را به اول سطر می آورد.
inherit عمل کردی ندارد و برای خنثی کردن ساخته شده است.


div{
    text-align: center;
}


منبع این آموزش فقط و فقط سایت کدستان می باشد و کپی برداری از آن غیر مجاز است.
محمد ممنون واقعا
بایان که این ها رو بلد بودم ولی یک ذر یک چیز هایی مفید ی اضف براون چیزی که بلد بودم یاد گرفتم ممنون

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

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

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36576
افراد آنلاین : 5
بازدید امروز : 429
بازدید دیروز : 870
گوگل امروز : 13
گوگل دیروز : 126
بازدید هفته : 2,931
بازدید ماه : 14,760
بازدید سال : 297,684
بازدید کلی : 10,692,160