در این جلسه از سری جلسات آموزش CSS به استایل دهی متن ها در CSS می پردازیم با ما همراه باشید.
چطور می توان استایلی متفاوت و زیبا به متن ها داد؟ CSS برای زیبا سازی متن ها چه عناصری را تعریف کرده است؟ چطور میتوان از این عناصر برای متنی زیبا و منحصر به فرد استفاده کرد؟
📄 برای دسترسی به جلسه قبل که در مورد Height و Width در CSS بود, می توانید از لینک قرار داده شده استفاده کنید. 📄
با استفاده از ویژگی های موجود در جدول زیر می توان متن ها را استایل دهی کرد. در ادامه به توضیح و نحوه ی استفاده از هر کدام خواهیم پرداخت؛
color |
برای رنگ متن یک عنصر |
text-align |
برای ترازبندی متن (چپ/وسط/راست) |
text-decoration |
برای زیرخط دار کردن متن |
text-transform |
برای کنترل کردن حروف متن |
letter-spacing |
برای ایجاد فاصله بین حروف متن |
line-height |
برای ایجاد فاصله بین سطرهای متن |
direction |
برای راست چین یا چپ چین متن |
word-spacing |
برای ایجاد فاصله بین کلمات یک متن |
text-shadow |
برای تنظیم/ایجاد سایه متن |
از این ویژگی برای تغییر رنگ متن ها استفاده می شود. همان طور که در جلسات قبل گفتیم از سه روش میتوان یک مقدار رنگ را برای عناصر تعریف کرد؛
به مثال زیر دقت کنید. تمامی موارد بالا را می توانید در مثال زیر ببینید؛
<style>
Body}
color:blue;
{
P}
color:#5db616;
{
h1}
color:rgb(123,31,222);
{
span{
color: hsl(277deg 31% 38%);
}
</style>
این ویژگی جهت نوشته را در راستای افقی تراز می کند. یعنی تنظیم می کند که متن مورد نظر وسط چین باشد, چپ چین یا راست چین.
justify در این خاصیت برای هم عرض کردن خطوط به کار می رود. زمانی که خصوصیت text-align روی “ justify ” تنظیم می شود، هر خط تا آنجایی کشیده شده یا بسط داده میشود که از نظر پهنا (width ) با هم برابر شوند.
مثال اول
<style>
h2{
text-align:center;
}
h3{
text-align:right;
}
p{
text-align:left;
}
</style>
در مثال زیر از ویژگی justify استفاده شده است ؛
<style>
div p{
border: 2px solid black;
height: 170px;
padding:5px;
text-align:justify;
}
</style>
از ویژگی Text Decoration با عنوان جلوه های بصری نیز یاد می شود. از این ویژگی برای اضافه کردن یا حذف ویژگی های بصری استفاده می کنند. برای مثال می خواهیم خط زیر متن هایی که لینک هستند را برداریم یا بعضی متن ها زیر خط دار شوند.
از مقادیر زیر می توان برای Text-Decoration استفاده کرد؛
text-decoration-line: محل قرار گیری خط در متن
text-decoration-thickness: ضخامت خط متن
text-decoration-style: نوع خط که به چه شکل باشد
text-decoration-color : رنگ خط را تعیین می کند
مقادیری که text-decoration-line می پذیرد؛
overline : کشیدن خط در بالای متن
line-through : کشیدن خط روی متن
underline : کشیدن خط زیر متن
none : حذف خط زیر متن
مقادیری که text-decoration-thickness می پذیرد می تواند Px ، em ، rem باشد.
مقادیری که text-decoration-style می پذیرد؛
dashed : به صورت خط چین نمایش می دهد
dotted : به صورت نقطه چین می باشد
double : استایل text-decoration را به صورت دوخطه نشان می دهد
Wavy : خط را موج دار می کند
Solid : یک خط ممتد قرار می دهد
برای مقادیر text-decoration-color هم می توانید از انواع رنگ هایی که معرفی شد استفاده کنید.
به مثال زیر دقت کنید؛
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
a{
text-decoration: none;
}
همچنین در text-decoration می توانید از دو text-decoration-line استفاده کنید. مانند مثال زیر:
p {text-decoration: overline underline wavy red 2px;
}
از خاصیت Text-Transform می توان برای مدیریت و تغییر اندازه ی حروف استفاده کرد. مثلا می خواهید تمام حروف متن نوشته شده را کوچک کنید یا برعکس بزرگ کنید. یا حتی در مواقعی که نیاز دارید تمامی حروف اول کلمات بزرگ باشد می توانید از این خاصیت استفاده کنید. البته این نکته را فراموش نکنید که از این ویژگی زمانی می توانید استفاده کنید که فونت انگلیسی باشد.
uppercase : تمامی حروف را بزرگ میکند
lowercase : تمامی حروف را کوچک میکند
capitalize : حرف اول هر کلمه را بزرگ میکند
مثال؛
<style>
p.a{
text-transform:uppercase;
}
p.b{
text-transform:lowercase;
}
p.c{
text-transform:capitalize;
}
</style>
برای ایجاد فاصله ی دلخواه بین کاراکترهای یک متن از این ویژگی استفاده می شود.
در مثال زیر فاصله ای که در نظر گرفته ایم 5 پیکسل است؛
<style>
h3{
letter-spacing:5px;
}
</style>
از این ویژگی برای تعیین فاصله و فضای خالی بین سطرهای یک متن استفاده میشود؛
<style>
p.a{
line-height:40px;
}
p.b{
line-height:3px;
}
</style>
با استفاده از این ویژگی جهت متن در کل صفحه ی وب عوض می شود. برای مثال زمانی که بخواهید متن انگلیسی بنویسید لازم است که این ویژگی چپ به راست باشد و برای متن های فارسی برعکس؛
ltr : گزینه ی پیش فرض که از ” چپ به راست ” است.
rtl : از راست به چپ.
مثال
<style>
p.a{
direction:ltr;
}
p.b{
direction:rtl;
}
</style>
مثال زیر برای زمانی است که بخواهیم این ویژگی برای کل صفحه اعمال شود؛
<style>
body{
direction:rtl;
}
</style>
همانطور که از نام این ویژگی مشخص است برای تعیین فاصله ی بین کلمات یک متن مورد استفاده قرار می گیرد؛
<style>
p{
word-spacing:10px;
}
</style>
آخرین ویژگی که برای استایل دهی متن در این جلسه بررسی می کنیم ویژگی Text-Shadow است که برای متن مورد نظر سایه ایجاد می کند؛
<style>
h1 {
text-shadow: 1px 1px 25px blue;
}
</style>
مثال 1
h1 {
color: blue;
text-align: center;
text-decoration: underline dotted;
letter-spacing: 5px;
word-spacing: 15px;
text-shadow: -14px 1px 8px #8e8e8e;
text-transform: capitalize;
}
مثال 2
p {
color: #ff5200;
text-align: right;
text-decoration: underline 1px double green;
word-spacing: 15px;
text-shadow: -14px 1px 8px #8e8e8e;
text-transform: capitalize;
line-height: 3;
font-size: 20px;
margin: 20px;
}
امیدواریم که مطالب این جلسه برای شما مفید بوده باشد. بعد از اینکه روی مطالب این جلسه و مثال های آن مسلط شدید سراغ جلسه ی بعد بروید و آموزش جدید را آغاز کنید. سوال ها و ابهام های خودتان را با ما در میان بگذارید. ما در سریع ترین زمان ممکن به آنها پاسخ خواهیم داد مطمئن باشید.
😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊