عضویت در سایت

ورود

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

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

کد امنیتی برای بروزرسانی کد امنیتی روی تصویر کلیک کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1093 آموزش و 1884 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

مشاوره حرفه ای دریافت کن
بلاگ
مقالات آموزشی

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

آموزش 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 است، که اگر تنظیم شود با کش آمد خطوط پاراگراف، خطوط یکسان خواهند شد(مانند متن روزنامه ها و مجلات)

مطلب پیشنهادی:  مقایسه رم 8 و 12 گیگ و مزایا و معایب هر کدام



تزیین متن(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

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

مطلب پیشنهادی:  تگ های HTML - تگ q

خصوصیت

توضیح

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، کلیک کنید.

موفق باشید.

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

طراح و برنامه نویس وب| تعمیرکار کامپیوتر و ماشین های اداری | علاقه مند یادگیری و یاددادن ... :)

دنبال کردن

ارسال نظر

رفتن به بالا

سامانه آموزشی و خدماتی بپرسم

اولین وب سایت آموزشی و پرسش و پاسخ در ایران

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