متن (Text)
در CSS، «متن (Text)» یعنی ظاهر نوشته ها. با ویژگی های رنگ، تراز، فاصله حروف و تبدیل حروف، متن را خواناتر می کنیم. مثل دفتر مدرسه، تیتر پررنگ است و بندها مرتب هستند.
رنگ متن (Text Color)
ویژگی «color» رنگ متن را می سازد. می توانی نام رنگ، مقدار هگز، یا RGB بدهی.
- نام رنگ: مثل
red. - هگز: مثل
#ff0000. - RGB: مثل
rgb(255, 0, 0).
<style>
body {
color: blue;
}
h1 {
color: green;
}
h2 {
color: red;
}
</style>
<h1>تیتر یک</h1>
<h2>تیتر دو</h2>
<p>این متن آبی است.</p>
رنگ پس زمینه و متن کنار هم
گاهی هم زمان «background-color» و «color» را تنظیم می کنیم تا تضاد خوب بسازیم.
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
</style>
<h1>متن سفید روی زمینه تیره</h1>
<div>باکس با متن سفید</div>
نکته: تضاد رنگی بالا، خوانایی را زیاد می کند. برای چشم های ضعیف حیاتی است.
چیدمان و فرم دهی متن
با «text-align» تراز را می گیریم. با «text-transform» حروف را تغییر می دهیم. با «text-indent» تورفتگی می سازیم. با «letter-spacing» فاصله حروف را کم و زیاد می کنیم.
<style>
h1 {
text-align: center;
text-transform: uppercase;
color: #04AA6D;
}
p {
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}
a.cta {
text-decoration: none;
color: #008CBA;
}
</style>
<h1>text formatting</h1>
<p>نمونه ای از فرم دهی متن در CSS.</p>
<a class="cta" href="#">Try it Yourself</a>
گام های سریع تنظیم متن
- اول رنگ متن را با
colorمشخص کن. - بعد تراز را با
text-alignتنظیم کن. - در پایان فاصله ها و تبدیل حروف را دقیق کن.
برای ادامه مرتب سازی چیدمان، صفحه مدل جعبه ای و ابعاد را ببین. همچنین از رنگ متن به عنوان مرجع سریع استفاده کن.
جمع بندی سریع
- «color» رنگ نوشته را تعیین می کند.
- پس زمینه قوی، خوانایی را بهتر می کند.
- تراز، تورفتگی و فاصله حروف مهم اند.
- همیشه تضاد رنگ را بررسی کن.