آموزش متن text در css و تنظیمات مربوط به آن

بازدید: 379 بازدید
آموزش متن در CSS

متن ها، همان مطالبی هستند که در وب سایت ها وجود دارند. تمامی نوشته ها و حروفی که دریک صفحه وب سایت مشاهده می شوند، متن هستند.

متن ها، نوشته هایی هستند که به صورت تایپی وارد صفحات وب سایت می شوند. این یعنی نوشته هایی که به صورت فایل pdf و یا تصاویر متن هیتند، نمی توانند جزو متن یا text باشند.

در ادامه آموزش امروز، قصد داریم انواع تنظیمات متن را با یکدیگر مرور کنیم.

همراه ما باشید.

با سلام خدمات همراهان همیشگی سایت پرنیان طرح

در ادامه سری آموزش های css،به مبحث آموزش متنtext در css رسیده ایم. امیدواریم که تا این جلسه از آموزش css در سایت پرنیان طرح، لذت برده باشید. در آموزش امروز، کار با متن، و تنطیمات مربوط به آن را تمرین خواهیم کرد.

مثل همیشه، همراه ما باشید.

 

متن text

همانطور که میدانید تمام نوشته های موجود در یک صفحه وب سایت، متن می باشد.(البته به استثنای تصاویری که از متن گرفته شده، یاPDFها)

CSS در تنظمات متن TEXT، امکانات مختلفی را در اختیار شما قرار میدهد. در ادامه تک تک این امکانات را با نحوه کدنویسی و کنترل برای هریک، به شما آموزش داده میشود.

 

TEXT-COLOR

رنگ متن، اولین ویژگی است که شما می توانید آن را تعیین کنید. برای این کار CSS، سه روش به شما پیشنهاد میکند. که برای تنظیمات مربوط به هرسه آنها، شما نیاز دارید تا کدهای رنگ در HTML را بدانید. برای مطالعه بیشتر در مورد رنگ ها، میتوانید آموزش کار با رنگ ها در CSS، را از سایت پرنیان طرح مطالعه کنید.

سه روش گفته شده شامل روش های زیر است:

مثال کدنویسی

کدهای زیر مربوط به بخش CSS هستند:

[PHP]
body {
color: blue;
}

h1 {
color: green;
}
[/PHP]

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

تغییرات را از اینجا مشاهده کنید.

 

Text Alignment

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

شما میتوانید متون خود را در سمت چپ؛ راست، و یا مرکز صفحه قرار دهید:

(کدهای بخش CSS)

[PHP]
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
[/PHP]

در کد بالا، نوشته H1، در مرکز صفحه قرار خواهد گرفت.
H2 در چپ
و H3در راست

تغییرات را از اینجا مشاهده کنید.

یک نکته جالب:

متن،یک ویژگی دیگر به نام justify دارد. این ویژگی باعث می شودتا خطوط  متن، هم از چپ و هم از راست طراز شوند. این یعنی خطوط متن، با همTهم اندازه خواهند شد. مانند خطوط کتاب و مجله!

[php]
div {
text-align: justify;
}
[/php]

کد بالا، یک بلاک از صفحه (div) را با خصوصیت justify، مقداردهی می کند.

 

text-decoration

همانطور که از نام آن مشخص است، این ویژگی برای تعیین جلوه های بصری متن استفاده می شود. مقادیری که این خاصیت می تواند داشته باشد عبارتند از:

  • none: بدون هیچ تغییری در طاهر
  • overline: یک خط ممتد بالای متن قرار میگیرد.
  • line-through:یک خط ممتد روی متن قرار میگیرد.
  • underline:یک خط ممتد پایین متن قرار میگیرد.

برای مشاهده تغییرات هر یک از حالت ها اینجا کلیک کنید.

نمونه کدی که برای هر حالت در بخش css وارد می شود:

[php]
h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}
[/php]

text-transform

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

مقادیری که این ویژگی می تواند داشته باشد شامل موارد زیر است:

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

نمونه کد برای این ویژگی:

[php]
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
[/php]

میتوانید تغییرات اعمال شده را از اینجا مشاهده کنید.

 

TEXT INDENTATION

این ویژگی تعیین می کند که خط اول متن دارای چه مقدار تورفتی نسبت به باقی خطوط داشته باشد.برای مثال :

کد زیر را در بخش css وارد کنید:

[php]
p {
text-indent: 50px;
}
[/php]

نتیجه را از اینجا مشاهده کنید.

 

letter-spacing

این ویژگی فاصله بین حروف را از یکدیگر مقداردهی می کند.مثال زیر تفاوت ها را مشخص میکند. کد زیر را در بخش css وارد نمایید:

[php]
h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}
[/php]

اکنون تغییرات را از اینجا مشاهده کنید.

 

line-height

این ویژگی نیز برای تعیین فاصله بین خطوط متن کاربرد دارد.

[php]
p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}
[/php]

تغییرات را از اینجا مشاهده کنید.

 

direction

این ویژگی نیز جهت متن را در صفحه مشخص میکند. دارای دو مقدار rtl و ltr می باشد. (rtl (right to left برای زبان فارسی استفاده می شود.یعنی کلمات از سمت راست به چپ نوشته می شوند. و (ltr (left to right برای زبان های لاتین استفاده می شوند. کلمات از چپ به راست نوشته می شوند.

 

 

word-spacing

این ویژگی برای تعیین فضای بین کلمات در یک خط استفداه می شوند.

[php]
h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}
[/php]

تغییرات را از اینجا مشاهده کنید.

 

text-shadow

این ویژگی برای سایه دادن به متن استفاده می شود. css به شما این امکان را می دهد که برای زیبا کردن نوشته، مهم جلوه دادن آن و یا هر هدف دیگری، جمله یا کلمه دلخواه خود را سایه دار کنید.

[php]
h1 {
text-shadow: 3px 2px red;
}
[/php]

تغییرات را از اینجا مشاهده کنید.

 

نکته

اینترنت اکسپلورر9 و ویرایش ماقبل آن، توانایی نمایش این ویژگی را ندارند.

 

 

تمام ویژگی های قابل تنظیم برای متن در یک نگاه:

ویژگی های متن

میخواهم درباره متن text بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.