آموزش کار با متن در CSS
آموزش کار با متن در CSS
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کار با متن در CSS خواهیم پرداخت.
این درس به شما می آموزد که چگونه متن را با استفاده از ویژگی های CSS دستکاری کنید. می توانید مشخصات زیر را برای یک عنصر تنظیم کنید –
از ویژگی color برای تنظیم رنگ متن استفاده می شود.
از ویژگی direction برای تنظیم جهت متن استفاده می شود.
از ویژگی letter-spacing برای افزودن یا کم کردن فاصله بین حروف تشکیل دهنده یک کلمه استفاده می شود.
از ویژگی word-spacing برای افزودن یا کم کردن فاصله بین کلمات یک جمله استفاده می شود.
از ویژگی text-indent برای تورفتگی متن یک پاراگراف استفاده می شود.
از ویژگی text-align برای تراز کردن متن یک سند استفاده می شود.
از ویژگی text-decoration برای زیر خط زدن ، خط کشیدن و خط کشی متن استفاده می شود.
از ویژگی text-transform برای بزرگ نوشتن متن یا تبدیل متن به حروف بزرگ یا کوچک استفاده می شود.
از ویژگی white-space برای کنترل جریان و قالب بندی متن استفاده می شود.
از ویژگی text-shadow برای تنظیم سایه متن در اطراف متن استفاده می شود.
تنظیم رنگ متن
مثال زیر نحوه تنظیم رنگ متن را نشان می دهد. مقدار ممکن هر نام رنگی در هر قالب معتبری باشد.
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <p style = "color:red;"> This text will be written in red. </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 |
This text will be written in red. |
تنظیم جهت متن
مثال زیر نحوه تنظیم جهت متن را نشان می دهد. مقادیر ممکن ltr یا rtl است.
|
1 2 3 4 5 6 7 8 9 10 11 |
Live Demo <html> <head> </head> <body> <p style = "direction:rtl;"> This text will be rendered from right to left </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 |
This text will be renedered from right to left |
تنظیم فاصله بین کاراکتر ها
مثال زیر نحوه تنظیم فاصله بین کاراکتر ها را نشان می دهد. مقادیر احتمالی طبیعی است یا یک عدد مشخص کننده فضا است.
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <p style = "letter-spacing:5px;"> This text is having space between letters. </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 |
This text is having space between letters. |
تنظیم فاصله بین کلمات
مثال زیر نحوه تنظیم فاصله بین کلمات را نشان می دهد. مقادیر احتمالی نرمال یا یک عدد مشخص کننده فضا است.
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <p style = "word-spacing:5px;"> This text is having space between words. </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 |
This text is having space between words. |
تنظیم تورفتگی متن
مثال زیر نحوه تورفتگی سطر اول یک پاراگراف را نشان می دهد. مقادیر احتمالی٪ یا عددی هستند که فضای تورفتگی را مشخص می کنند.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> </head> <body> <p style = "text-indent:1cm;"> This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property. </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 |
This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property. |
تنظیم ترازبندی متن
مثال زیر نحوه تراز کردن متن را نشان می دهد. مقادیر ممکن چپ ، راست ، مرکز ، باشند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Live Demo <html> <head> </head> <body> <p style = "text-align:right;"> This will be right aligned. </p> <p style = "text-align:center;"> This will be center aligned. </p> <p style = "text-align:left;"> This will be left aligned. </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 2 3 4 5 |
This will be right aligned. This will be center aligned. This will be left aligned. |
تزئین متن
مثال زیر نحوه تزئین متن را نشان می دهد. مقادیر احتمالی none هستند و ممکن است به صورت این موارد: زیرخط دار ، خط خطی ، خط گذر ، چشمک باشند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Live Demo <html> <head> </head> <body> <p style = "text-decoration:underline;"> This will be underlined </p> <p style = "text-decoration:line-through;"> This will be striked through. </p> <p style = "text-decoration:overline;"> This will have a over line. </p> <p style = "text-decoration:blink;"> This text will have blinking effect </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 2 3 4 5 6 7 |
This will be underlined This will be striked through. This will have a over line. This text will have blinking effect |
تنظیم ظاهر متن
مثال زیر نحوه تنظیم اندازه ظاهری برای یک متن را نشان می دهد. مقادیر احتمالی none هستند و ممکن است به صورت این موارد: capitalize, uppercase, lowercase. باشند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Live Demo <html> <head> </head> <body> <p style = "text-transform:capitalize;"> This will be capitalized </p> <p style = "text-transform:uppercase;"> This will be in uppercase </p> <p style = "text-transform:lowercase;"> This will be in lowercase </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 2 3 4 5 |
This Will Be Capitalized THIS WILL BE IN UPPERCASE this will be in lowercase |
تنظیم فاصله سفید بین متن
مثال زیر نحوه کار با فضای سفید درون یک عنصر را نشان می دهد. مقادیر احتمالی normal, pre, nowrap است.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> </head> <body> <p style = "white-space:pre;"> This text has a line break and the white-space pre setting tells the browser to honor it just like the HTML pre tag. </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 2 |
This text has a line break and the white-space pre setting tells the browser to honor it just like the HTML pre tag. |
تنظیم سایه متن
مثال زیر نحوه تنظیم سایه اطراف متن را نشان می دهد. این ممکن است توسط همه مرورگرها پشتیبانی نشود
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> </head> <body> <p style = "text-shadow:4px 4px 8px blue;"> If your browser supports the CSS text-shadow property, this text will have a blue shadow. </p> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 |
f your browser supports the CSS text-shadow property, this text will have a blue shadow. |
لیست جلسات قبل آموزش CSS
.svg)
دیدگاه شما