آموزش ۱۱ تکنیک پرکاربرد متن در css

سلام.در این آموزش با استفاده از عکس به شما نشان میدهیم که چطور میتوانید  از 11 تکنیک اساسی و ساده css استفاده کنید.دانستن این تکنیک ها برای طراحان و مدیران وبسایت ها ضروری است و به آن ها کمک میکند تا ظاهر نوشته های سایت خود را اصولی تر و زیباتر درست کنند.حال به توضیح تک تک این 11 تکنیک میپردازیم.

1-Font Size

با استفاده از کد زیر میتوانید سایز فونت مورد نظر را تغییر دهید

font-size: 12px;

برای تغییر اندازه فونت،عدد 12 را تغییر دهید(مقیاس آن پیکسل میباشد)

2-Font Family

با استفاده از کد زیر میتوانید تعریف کنید که در متن شما از چه فونت هایی استفاده شود

font-family: verdana,sans-serif;

به جای فونت vernada یا sans-serif میتوانید نام فونت مورد نظرتان را بنویسید،مثلا فونت Tahoma که یکی از پرکاربردترین و پر طرفدارترین  فونت ها به زبان فارسی است

3-Font Color

با استفاده از این کد میتوانید رنگ متن مورد نظر را تغییر دهید

color: #C43737;

برای عوض کردن و به دست آوردن کد رنگ مورد نظر،کافیست از نرم افزار فتوشاپ یا Eye Dropper استفاده کنید و کد های به دست آمده را بعد از # وارد کنید تا رنگ متن به رنگ مورد نظر شما تغییر کند.برای نمونه ما 5 کد رنگ را در تصویر بالا برای شما نمایش داده ایم.

4-Letter Spacing

برای فاصله دادن بین حروف استفاده میشود

letter-spacing: 1.5pt;

نکته:برای تغییر میزان فاصله،مقدار 1.5 را تغییر دهید

5-Word Spacing

برای فاصله بین دو کلمه استفاده میشود

word-spacing: 1.2pt;

نکته:برای تغییر میزان فاصله،مقدار 1.2 را تغییر دهید

6-Line Height

برای تغییر میزان فاصله خط ها از هم استفاده میشود

line-height: 1.4;

نکته:برای تغییر میزان فاصله،مقدار 1.4 را تغییر دهید

7-Text-Decoration

برای ایجاد خطی در زیر متن،روی متن،وسط متن و یا حالت چشمک زن  استفاده میشود

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

text-decoration:none;

اگر میخواهید خطی زیر نوشته شما ایجاد شود از کد زیر استفاده کنید

text-decoration:underline;

اگر میخواهید خطی بالای نوشته شما ایجاد شود از کد زیر استفاده کنید

text-decoration:overline;

اگر میخواهید خطی روی(وسط) نوشته شما ایجاد شود از کد زیر استفاده کنید

text-decoration:line-through;

اگر میخواهید متن شما به صورت چشمک زن ایجاد شود از کد زیر ایجاد کنید

text-decoration:blink;

8-Font Weight

برای ایجاد حالت bold به کار میرود(بیشترین کارایی را در ایجاد حالت bold دارد)

برای ایجاد حالت bold از کد زیر استفاده کنید:

font-weight: bold;

برای ایجاد حالت عادی از کد زیر استفاده کنید:

font-weight: normal;

9-Font Style

برای ایجاد حالت های مختلف متن از جمله حالت پرکاربرد Italic استفاده میشود

برای ایجاد حالت Italic از کد زیر استفاده کنید:

font-style:italic;

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

font-style:oblique;

برای ایجاد حالت عادی از کد زیر استفاده کنید:

font-style:normal;

10-Text Transform

از این تکنیک برای تبدیل خودکار حروف متن به حروف بزرگ و حروف کوچک و اصولی کردن نوشته لاتین استفاده میشود

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

text-transform:uppercase;

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

text-transform:capitalize;

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

text-transform:lowercase;

11-Text Align

برای ایجاد حالت چپ چین،راست چین،و وسط چین استفاده میشود

برای راست چین کردن متن از کد زیر استفاده کنید:

text-align:right;

برای چپ چین کردن متن از کد زیر استفاده کنید:

text-align:left;

برای وسط چین کردن متن از کد زیر استفاده کنید:

text-align:center;

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

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