ثبت نام کنید

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ آدرس ایمیل خود را وارد کنید، یک ایمیل حاوی لینک بازیابی رمز عبور برای شما ارسال می شود.

پرسیدن سوال

برای پرسیدن سوال، باید وارد حساب کاربری خود در سایت شوید.
در بین 778 آموزش و 1522 پرسش به دنبال چه هستید؟

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


آموزش css – قسمت دوازدهم(متن)

سلام

در آموزش دوازدهم از سری آموزش های CSS می پردازیم به کار با متن(Text) و اینکه برای متن ها چه خاصیت هایی داریم و چگونه می توانیم از آن ها استفاده کنیم، در ادامه همراه بپرسم باشید.

ویژگی متن:

قالب بندی متن

این متن بوسیله چند خصوصیت مربوط به متن، قالب بندی شده است، در عنوان، از خصوصیت text-align و color و text-transform استفاده شده است، البته خصوصیت text-transform برای حروف فارسی کارایی ندارد. برای این پاراگراف نیز، تورفتگی خط ابتدایی ، ترازبندی متن و فاصله بین حروف تنظیم شده است. همچنین underline از لینک روبرو حذف شده است.“خودتان امتحان کنید”



رنگ متن:

در Css برای تعیین رنگ متن از خصوصیت color استفاده میشود، به ۳ روش میتوان رنگ بندی انجام بدیم:

  • نام رنگ: در این نوع نام رنگ را می نویسیم(مثلا blue)
  • کد Hex: در این نوع کد هگزا دسیمال رنگ را می نویسیم(مثلا ۰۰ff00)
  • RGB: کد رنگ به صورت RGB را می نویسیم(rgb(255,0,0

در مثال زیر، کد به ترتیب بالا رنگ متن را مشخص کردیم:



ترازبندی متن(Text Alignment):

برای تراز بندی متن از ویژگی text-align استفاده میشود، که جهت متن را در محور x مشخص میکند.

متن را میتوان در چپ(left)، وسط(center) و راست(right) تنظیم کرد.

در مثال زیر ترازبندی متن را در سه جهت Right,left,center مشاهده میکنید.




یک مقدار دیگری برای خصوصیت text-align وجود دارد و آن Justify است، که اگر تنظیم شود با کش آمد خطوط پاراگراف، خطوط یکسان خواهند شد(مانند متن روزنامه ها و مجلات)

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



تزیین متن(Decoration):

از خصوصیت text-decoration برای تنظیم و یا حذف Decoration های یک متن استفاده می شود.

اگر یک لینک در سایت قرار دهید، می بینید که زیر لینک یک خط تیره کشیده میشود، توسط خصوصیت text-decoration: none می توانیم این خط را از بین ببریم.



مقدار های دیگری که خصوصیت text-decoration میتواند داشته باشد:



توجه: برای متن های معمولی که در سایت استفاده میکنید از underline استفاده نکنید، چون ممکن است کاربران آن متن را با لینک اشتباه بگیرند.

متن بزرگ و کوچک(Transformation):

جالب است بدانید تا میتوانیم تعیین کنیم حروف یک متن به صورت بزرگ نمایش داده شود یا کوچک(البته این مورد در زبان فارسی کاربرد ندارد).

برای این کار از خصوصیت text-transform استفاده میکنیم که سه مقدار میگیرد:

  • uppercase: حروف یک متن را به صورت بزرگ نمایش میدهد.
  • lowercase: حروف یک متن را به صورت کوچک نمایش میدهد.
  • capitalize: فقط حروف اول یک متن را به صورت بزرگ نمایش میدهد.

در مثال زیر از هر ۳ مقدار استفاده شده است:



حتما بخوانید:  معرفی ربات تلگرام تبدیل متن به گفتار

تورفتگی متن(Indentation):

توسط خاصیت text-indent می توانیم تنظیم کنیم که متن از ابتدای پاراگراف چه مقدار فاصله بگیرد.



فاصله بین حروف(Letter Spacing):

توسط خاصیت letter-spacing می توانیم فاصله ی بین خطوط را کم یا زیاد کنیم.



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

با خاصیت line-height می توانیم فاصله بین خطوط را کم یا زیاد کنیم.




جهت متن(Direction):

خاصیت direction  میتوانیم جهت یک متن(راست به چپ یا چپ به راست) را مشخص کنیم.



به طور پیشفرض جهت متن چپ به راست(direction: ltr) می باشد.

فاصله بین کلمات(Word Spacing):

فاصله ی بین کلمات را با خاصیت word-spacing میتوانیم کم یا زیاد کنیم.




سایه متن(Text Shadow):

برای متن ها توسط خاصیت text-shadow می توانیم سایه ایجاد کنیم.

مثال زیر موقعیت سایه افقی(۳px)، سایه عمودی(۲px) و رنگ سایه(red) مشخص شده است.



خصوصیت های متن در CSS

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

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

خصوصیت

توضیح

color

رنگ متن را تنظیم می کند

direction

جهت متن (راست به چپ یا چپ به راست) را تنظیم می کند

letter-spacing

فاصله بین حروف متن را تنظیم می کند

line-height 

فاصله بین خطوط یک پاراکراف را تنظیم می کند

text-align

تراز بندی متن در جهت محور X را تنظیم می کند

text-decoration

تزیین یا decoration یک متن را تنظیم می کند

text-indent

تورفتگی خط ابتدایی یک پاراگراف را تنظیم می کند

text-shadow

به یک متن افکت سایه اضافه می کند

text-transform

کوچکی یا بزرگی حروف یک متن را تنظیم می کند

text-overflow

می توان مشخص کرد هنگامی متن از عنصر والدش سرریز می کند، چه اتفاقی رخ دهد.

unicode-bidi

با استفاده از ویژگی unicode-bidi در کنار ویژگی direction می توان جهت و رفتار متن هایی که دارای نوشته در دوجهت هستند را کنترل کرد.

vertical-align

تراز بندی یک عنصر در جهت محور Y را تنظیم می کند.

white-space

مشخص می کند که با فضاهای خالی داخل یک عنصر چگونه برخورد شود

word-spacing

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

این قسمت از آموزش ها نیز به پایان رسید، همراه ما باشید با دیگر آموزش ها …

برای مشاهده دیگر قسمت های آموزش Css، کلیک کنید.

موفق باشید.

درباره احمد آخوندیمدیر

در صورتی که از بپرسم راضی بودید؛ میتوانید حمایت مالی کنید

دنبال کردن من

پاسخ دهید