اخبار سایت
بزرگترین لذت در زندگی انجام کاریست که دیگران میگویند: تو نمیتوانی! - رومن پولانسکی
مجموعه آموزش های ویدیویی به زبان فارسی
خانه / آموزش CSS / آموزش ۱۱ تکنیک پرکاربرد متن در css

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

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

1-Font Size

css-fontsize

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

font-size: 12px;

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

2-Font Family

css-fontfamily

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

font-family: verdana,sans-serif;

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

3-Font Color

css-fontcolor

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

color: #C43737;

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

4-Letter Spacing

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

css-letterspacing

letter-spacing: 1.5pt;

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

5-Word Spacing

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

css-wordspacing

word-spacing: 1.2pt;

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

6-Line Height

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

css-lineheight

line-height: 1.4;

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

7-Text-Decoration

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

css-textdecoration

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

text-decoration:none;

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

text-decoration:underline;

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

text-decoration:overline;

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

text-decoration:line-through;

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

text-decoration:blink;

8-Font Weight

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

css-font-weight

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

font-weight: bold;

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

font-weight: normal;

9-Font Style

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

css-fontstyle

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

font-style:italic;

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

font-style:oblique;

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

font-style:normal;

10-Text Transform

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

css-texttransform

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

text-transform:uppercase;

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

text-transform:capitalize;

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

text-transform:lowercase;

11-Text Align

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

css-textalign

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

text-align:right;

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

text-align:left;

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

text-align:center;

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

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

درباره محمدرضا مقدم

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

۹ دیدگاه

  1. man daram saite ba php tarahi mikonam nemidona css cheto benvisam komak mikonid?????

  2. خیلی ساده و عاالی توضیح دادین
    ممنون

  3. با سلام
    سایتتون و مطالبش خیلی خوب و کاربردی هستند ان شاالله که موفق باشید. یه سوال داشتم خدمتتون یه سایت با ASPطراحی کردم از css هم استفاده کردم حالا می خوام قالب سایت یه جوری باشه که با تغییر اندازه صفحه, قالب هم تغییر کنه ولی فرمش بهم نریزه همون جوری ثابت بمونه به نظرتون باید چیکار کنم؟

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

    • widthبجایpx از درصد استفاده کنیدmargin را صفر auto
      کنید سایت شما با کوچک یا بزرگ شدن فرم شما بهم نمیریزد

  4. عالی بود مرسی. فقط یه سوال
    من یک سری قالب آماده دارم که می خوام برای وب سایت خودم کار کنم
    style رو در نرم افزار دریم باز میکنم اما قسمت دیزاین اون خاموشه
    کد هارو کپی می کنم و یه صفحه جدید html باز میکنم و پیست هم می کنم اما هیچ تغییریایجاد نمیشه. این در صورتیکه می خوام فایلم css خروجیش باشه و روی همه صفحاتم اعمال بشه کمکم کنید خیلی گیرم . ممنون

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شدبخش های مورد نیاز علامت گذاری شده است *

*