کار روی متن با css

هدایت عباسی آموزش CSS

آموزش ویدیویی کار روی متن با css

در این فیلم و آموزش ویدئویی ویدیویی کار روی متن با cssبا ذکر چندین مثال آشنا خواهید شد.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش css از تاپ سایت 98 به سراغ کار روی متن با css می رویم و با دستورات مختلفی با ذکر مثال آشنا می شویم. با راست چین کردن متن ، تغییر رنگ متن ، جابجایی متن ، ترازبندی متن ، فاصله انداختن بین کلمات و خطوط و غیره آشنا می شویم.

تغییر رنگ متن با css

برای تغییر رنگ متن با css ، می توانیم از دستور color استفاده نماییم.

با استفاده از دستور color می توانیم رنگ متن تگ های مختلف p , h1 , h2 , span , pre و غیره را تغییر داد.

برای رنگ ها نیز می توانیم از نام رنگ ، hex و hsl و rgb استفاده کرد.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TopSite98.com</title>
<style>
h1 , a {
color : red;
}
</style>
</head>
<body>
<div id="d1">
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">تاپ سایت 98</a>
</div>
</body>
</html>

در مثال بالا رنگ تگ h1 و لینک را تغییر دادیم و قرمز کردیم.

برای اجرای کد ان یک فایل با پسوند html ایجاد کرده و کد بالا را در آن کپی نمایید و اجرا کنید تا نتیجه را ببینید.

ترازبندی متن در css

برای ترازبندی متن در css و جابجایی متن می توانیم از دستور text-align استفاده نماییم.

دستور text-align دارای حالات مختلفی است:

Center متن یا عنصر را وسط چین می کند.

Left متن یا عنصر را در سمت چپ قرار می دهد.

Right متن یا عنصر را در سمت راست قرار می دهد.

Justify متن را از دو طرف می کشد و باعث زیبایی متن می شود و برای متن های طولانی مناسب است.

مثال زیر تگ h1 را وسط چین می کند. می توانید حالت های دیگر را بجای center تست نمایید.

<h1 style="text-align: center">TopSite98.com</h1>

دستور text-decoration در css

دستور text-decoration در css دارای حالات مخلفی است.

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

اگر بجای NONE مقدار overline را قرار دهید خط بالای متن قرار داده می شود.

مقدار line-through را قرار دهید خط روی متن می کشد.

مقدار underline را قرار دهید خط زیر متن قرار داده می شود.

دستور text-transform در CSS

دستور text-transform در CSS ، دارای حالات مختلف است که همه را بررسی می کنیم.

مقدار uppercase متن انگلیسی را بزرگ می کند.

مقدار lowercase متن انگلیسی را کوچک می کند.

مقدار uppercase حرف اول تمام کلمات انگلیسی را بزرگ می کند.

<h1 style="text-transform: uppercase">TopSite98.com text html css</h1>
<h1 style="text-transform: lowercase">TopSite98.com text html css</h1>
<h1 style="text-transform: capitalize">TopSite98.com text html css</h1>