104 Views
2018 Apr 09Trainingtechnology
img

سلام خدمت دوستان و همراهان همیشگی ای دانش ،با سری آموزش های CSS همراه شما عزیزان هستیم.در این جلسه قصد داریم به بررسی متن ها در CSS بپردازیم.

رنگ متن در css

این خاصیت یا همان color property همانطور که از اسم آن مشخص است برای تعیین رنگ نوشته یا متن در css مورد استفاده قرار می گیرد.در جلسه قبل به توضیح انواع مقادیر رنگ ها پرداختیم و روش های HEX و rgb و rgba و همینطور نام رنگ را مورد بررسی قرار دادیم. مثال:

در مثال بالا انتخاب گر را h1 در نظر گرفتیم و با خاصیت رنگ در css مقدار رنگ آن را برابر با قرمز قراردادیم.

نکته:برای ایجاد css ای که با استاندارد های W3C مطابقت داشته باشد، زمانی که خاصیت رنگ را تعریف کردید در آن صورت لازم است از خاصیت رنگ پس زمینه یا background-color نیز استفاده کنید.

ترازبندی متن یا text alignment

این خاصیت در واقع یک متن را به صورت افقی تراز می کند.نوشته می تواند در وسط ، چپ یا راست صفحه قرار بگیرد و یا حتی از سمت چپ و راست تراز شود.در مثال پایین هر 4 حالت مورد بررسی قرار گرفته است:

نتیجه کدهای بالا را در تصویر پایین مشاهده می کنید:

نکته: زمانی که مقدار text-align را برابر با justify قرار می دهیم ، هر خط تا آنجایی کشیده می شود که از نظر پهنا باهم برابر شوند.

جلوه های بصری متن در css یا Text Decoration

این خاصیت برای اعمال جلوه های تصویری به متن یا حذف آن ها از نوشته مورد نظر مورد استفاده قرار می گیرد.برای مثال زمانی که شما از تگ a در سند HTML خود استفاده می کنید متن لینک دار شده به این شکل(لینک) نمایش داده می شود.یعنی خطی را به طور پیشفرض در زیر عنوان لینک قرار می دهد.برای حذف این خط باید از خاصیت text-decoration استفاده کنید.مثال:

در مثال بالا مقدار text-decoration را برابر با none قرار دادیم تا خط زیر عنوان لینک حذف شود.به جز مقدار none مقادیر دیگری نیز هستند که برای این خاصیت استفاده می شوند.

1- مقدار overline: این مقدار خطی را در بالای متن قرار می دهد.

2- مقدار underline:این مقدار خطی را در زیر متن قرار می دهد.

3- مقدار line-throhgh:با این مقدار می توانید بر روی متنی خط بکشید.

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

نکته: از خاصیت text-decoration در اکثر تگ ها می توانید استفاده کنید.

تبدیل نوع متن از حروف کوچک به بزرگ و بالعکس یا Text Transformation

از این خاصیت برای بزرگی و کوچیکی حروف در متن ها استفاده می شود.مثلا اگر بخواهیم حرف اول یک کلمه را بزرگ بنویسیم می توانی از این خاصیت استفاده کنیم.مقادیری که برای خاصیت text-transform می توان استفاده کرد در زیر آمده است:

1- مقدار uppercase : حروف بزرگ را اعمال می کند.

2- مقدار lowercase : حروف کوچک را اعمال می کند.

3- مقدار capitalize: حرف اول را بزرگ می کند.

تنظیم تو رفتگی متن یا Text-indent

این خاصیت میزان تورفتگی اولین خط یک پاراگراف را تنظیم می کند.مقدار دهی آن به صورت عددی است و با واحدهای مختلف مانند px و em و rem می توان به ان مقدار داد .مثال:

در مثال بالا مقدار text-iindent برابر با 50px در نظر گرفته شده است و همانطور که مشاهده می کنید به همین مقدار خط اول پاراگراف تو رفتگی دارد.

خب دوستان به انتهای این جلسه از آموزش css رسیدیم امیدوارم مورد استفاده قرار بگیرد.در جلسه ی بعدی به توضیح دیگر خاصیت های متن در css خواهیم پرداخت.


css

آموزش css

اموزش طراحی وب

طراحی وب

ساخت قالب وب