خلاقان جوان

آشنایی با المان های شخصی سازی متن

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

سایز Size

این المان سه واحد به خودش می گیره که عبارت اند از :پیکسل (px)،(em) وrem اما توی این مقاله ما از واحد پیکسل استفاده می کنیم
توی فایل css تون برای اون متنی که می خوایید سایزش رو تغییر بدید کلاسی تعریف کنید و خیلی راحت این المان رو بهش بدید
font-size: #px

Family

font-family برای استفاده کردن از یک فونت خاص به کار میره،خیلی از فونت ها هستن که به صورت پیش فرض روی همه سیستم ها نصب هستند مثل Arial,Courier New,Georgia و…برای استفاده کردن از این فونت ها فقط کافیه المان font-family:fontname رو به فایل css اون کلاس اضافه کنید
علاوه بر فونت های پیش فرض فونت های خیلی زیاد دیگه هم هستن که می تونید به وب سایتتون اضافه کنید و با همین روش به اون ها ارجاع بدید

رنگ Color

تغییر رنگ یک متن توی وب ساییتون کار خیلی راحتی هست فقط کافیه المان color: colorname رو به فایل css تون اضافه کنید،colorname می تونه به شکل های مختلفی باشه،می تونه اسم رنگش باشه(green) می تونه کد hexadecimal اون رنگ باشه (#B5E244) و یا می تونه مقدار RGB اون رنگ باشه (rgb (181,226,68

تراز Alignment

اضافه کردن المان text-align:center ,text-align:left, text-align:right یکی از راحت ترین کارها برای تراز کردن متنتون هست

فاصله ی بین خطوط Line Height

اگه به دنبال این هستید که فاصله ی بین خطوطتون کم یا زیاد کنید می تونید از این المان استفاده کنید
line-height: heightvalue ، مقدار heightvalue می تونه یکی از موارد زیر باشه:
normal یا عادی که به عنوان حالت پیش فرض استفاده میشه
number می تونه یک رقم باشه که با توجه به اندازه فونتتون که چه مقداری بهش دادید می تونید فضای بین لاین هاش رو تغییر بدید

کج نویسی italics

اگه دنبال این هستید که متنتون رو ایتالیک بنویسید اول باید ببینید فونتی که ازش استفاده می کنید از حالت ایتالیک پشتیبانی می کنه یا نه،در هر صورت برای استفاده ازاین المان می تونید این دستور font-style: italic; رو به فایل css تون اضافه کنید

حالت فونت weight

font-weight می تونه مقدار درشت نویسی متنتون رو مشخص کنه
که برای درشت نویسی متنتون می تونید المان font-weight:bold رو به فایل css تون اضافه کنید
می تونید برای میزان اندازه درشت نویسیتون از المان font-weight:100-900 استفاده کنید جوری که هرچی به ۱۰۰ نزدیک باشید کمتر درشت و هرجی بیشتر به ۹۰۰ نزدیک باشین درشتر دیده میشه

بزرگ نویسی Transform

این مورد که بیشتر برای زبان انگلیسی به کار می رود و در فارسی کاربرد خاصی ندارد، ولی در هرحال به این صورت استفاده میشه که text-transform: value که مقدار value می تونه یک از سه مورد زیر باشه:
uppercase: که بزرگ می کنه تمام حروف به کاربرده رو
lowercase:همه حروف به کاربرده رو کوچیک می کنه
capitalize:که حرف اول هر کلمه رو بزرگ نشون میده

Decoration

این المان باعث میشه که یک خط به جمله یا کلمه تون اضافه بشه و می توانید تنظیم کنید که این خط کجا قرار بگیره
text-decoration: value
که value می تونه یکی از ۴ مقدار زیر باشه
none که هیچ خطی رو نشون نمیده،بیشتر برای متن هایی استفاده میشه که لینک شدن و یک خط زیرش کشدیه میشه به صورت پیش فرض، و برای از بین بردن این خط کاربرد داره
underline ببشتر برای مهم کردن یک متن استفاده میشه
overline که یک خط بالای متن کشیده میشه
line-through که یک خط روی متن میکشه

سایه shadow

آخرین المانی که معرفی می کنیم هم text-shadow سایه متن هست که چهار مقدار می گیره، به ترتیب: سایه افقی،سایه ی عمودی،حجم سایه و رنگ سایه که به عنوان یک مثال می تونه اینجوری باشه
text-shadow: 2px 2px 3px blue

تمام این المان ها که معرفی کردیم تنها یک بخش بی نهایت کوچیک از دنیای css هست
برای آشنایی بیشتر با دنیای css می تونید وب سایت و دپارتمان کامپیوتر خلاقان جوان رو دنبال کنید و منتظر مقالات بیشتر باشید

khalaghan

نوشته‌های مرتبط

قوانین ارسال دیدگاه

  • دیدگاه های فینگلیش تایید نخواهند شد.
  • دیدگاه های نامرتبط به مطلب تایید نخواهد شد.
  • از درج دیدگاه های تکراری پرهیز نمایید.
دیدگاه‌ها

*
*