برای استایل دادن به متن، سی اس اس پراپرتی های مختلفی دارد که در ادامه به معرفی آنها خواهیم پرداخت.
Text Color
پراپرتی color برای رنگ دادن به متن استفاده میشود.
رنگ میتواند بصورت زیر تعریف شود:
- نام - نام رنگ نوشته میشود، مانند "red"
- HEX - مقدار hex نوشته میشود، مانند "#ff0000"
- RGB - مقدار RGB نوشته میشود، مانند "rgb(255,0,0)"
رنگ متن پیش فرض برای صفحه در سلکتور body تعریف میشود.
مثال
body { color: blue; } h1 { color: green; }
نکاتی که باید در ذهن داشته باشید
با توجه به استانداردهای W3c برای CSS اگر شما پراپرتی color را تعریف کرده باشد، شما باید پراپرتی background-color را نیز تعریف کنید.
Text Alignment
پراپرتی text-align برای تنظیم افقی متن استفاده میشود.
متن میتواند چپ چین، راست چین، وسط چین یا justify باشد.
مثال
This paragraph aligned left!
This paragraph aligned right!
This paragraph aligned center!
This paragraph aligned justify! The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).
همانطور که در مثال بالا مشخص است، اگر پراپرتی text-align مقدار "justify" داشته باشد، هر خط طوری مرتب میشود که تمامی خط ها از سمت راست و چپ به یک اندازه باشند (مانند مجله ها و روزنامه ها).
Text Decoration
پراپرتی text-decoration برای حذف یا اضافه تزئین به متن استافده میشود.
برای حذف آندرلاین از لینک ها باید مقدار این پراپرتی "none" باشد:
مثال
a { text-decoration: none; }
overline
line-through
underline
نکاتی که باید در ذهن داشته باشید
پیشنهاد نمیشود زیر متن هایی که لینک نیستند را خط بکشید، زیرا اینکار باعث میشود خوانندگان متن دچار اشتباه شوند.
Text Transformation
پراپرتی text-transform برای تبدیل متن به حروف بزگ و کوچک استفاده میشود.
با کمک این پراپرتی میتوانید تمام حروف را به حروف بزرگ یا کوچک تبدیل کنید و یا حتی اول حرف از هر کلمه را به حروف بزرگ تبدیل کنید.
p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }
نکاتی که باید در ذهن داشته باشید
این پراپرتی برای کلمات انگلیسی کاربرد دارد و برای زبان فارسی بلااستفاده میباشد.
Text Indentation
پراپرتی text-indent برای تعیین فاصله اولین لاین از خط استفاده میشود.
p { text-indent: 50px; }
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.
Letter Spacing
پراپرتی letter-spacing برای تعیین فاصله بین کاراکترها در یک متن استفاده میشود.
مثال زیر مشخص میکند که چگونه میتوان فاصله بین کاراکترها را زیاد یا کم کرد.
p.ex1{ letter-spacing: 3px; } p.ex2 { letter-spacing: -3px; }
Paragraph with 3px letter spacing
Paragraph with -3px letter spacing
Line Height
پراپرتی line-height برای تعیین فاصله بین خط ها استفاده میشود.
p.small { line-height: 0.8; } p.big { line-height: 1.8; }
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
نکاتی که باید در ذهن داشته باشید
مقدار پیش فرض پراپرتی line-height در بیشتر مرورگرها 100% تا 120% میباشد.
Text Direction
پراپرتی direction برای تعیین چپ چین بودن یا راست چین بودن المان استفاده میشود.
p { direction: rtl; }
Word Spacing
پراپرتی word-spacing برای تعیین فاصله بین کلمات در یک متن استفاده میشود.
مثال زیر مشخص میکند که چگونه میتوان فاصله بین کلمات را زیاد یا کم کرد.
p.ex1 { word-spacing: 10px; } p.ex2 { word-spacing: -5px; }
Paragraph with 10px word spacing
Paragraph with -5px word spacing
Text Shadow
پراپرتی text-shadow برای اضافه کردن سایه به متن استفاده میشود.
مثال زیر موقعیت سایه افقی (3px)، موقعیت سایه عمودی (2px)، و رنگ سایه (red) را مشخص کرده است.
h1 { text-shadow: 3px 2px red; }
Text-shadow effect
نکاتی که باید در ذهن داشته باشید
Internet Explorer 9 و نسخه های قبل تر از آن از این پراپرتی پشتیبانی نمیکنند.