logo
logo
تبلیغ کلیکی تاپ سایت 98

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

کار روی متن با 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 قرار دهید مشاهده می کنید خط زیر متن لینک حذف می شود.

<style>
a{
text-decoration: none;
}
</style>

اگر بجای 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>

دستور text-indent در css

دستور text-indent در css برای تورفتگی متن استفاده می شود. در مثال زیر یک تورفتگی ایجاد می شود.

<h1 style="text-indent: 70px">TopSite98.com text html css</h1>

دستور letter-spacing در css

دستور letter-spacing در css برای فاصله انداختن بین حروف استفاده می شود.

<h1 style="letter-spacing: 12px">TopSite98.com text html css</h1>

دستور line-height در css

دستور line-height در css برای فاصله انداختن بین خطوط استفاده می شود.

راست چین کردن متن

دستور direction برای راست چین کردن متن استفاده می شود.

برای راست چین کردن متن مقدار دستور را rtl قرار دهید و برای چپ چین کردن متن مقدار ltr قرار دهید.

body{
direction: rtl;
line-height: 50px;
}

دستور word-spacing در css

دستور word-spacing در css برای فاصله انداختن بین کلمات بکار می رود.

سایه انداختن متن

برای سایه انداختن متن از دستور  text-shadow استفاده می کنیم.

<h1 style="text-shadow: 3px 2px red;">TopSite98.com</h1>

امیدواریم این آموزش برای شما مفید باشد.

موفق باشید.

 

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

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.