آموزش رایگان CSS – جلسه 11

آموزش رایگان CSS – جلسه 11

آنچه در این مقاله میخوانید

در این جلسه از سری جلسات آموزش CSS به استایل دهی متن ها در CSS می پردازیم با ما همراه باشید.

چطور می توان استایلی متفاوت و زیبا به متن ها داد؟ CSS برای زیبا سازی متن ها چه عناصری را تعریف کرده است؟ چطور میتوان از این عناصر برای متنی زیبا و منحصر به فرد استفاده کرد؟

 

📄 برای دسترسی به جلسه قبل که در مورد Height و Width در CSS بود, می توانید از لینک قرار داده شده استفاده کنید. 📄

 

ویژگی های استایل دهی متن ها در CSS

با استفاده از ویژگی های موجود در جدول زیر می توان متن ها را استایل دهی کرد. در ادامه به توضیح و نحوه ی استفاده از هر کدام خواهیم پرداخت؛

 

color

برای رنگ متن یک عنصر
text-align

برای ترازبندی متن (چپ/وسط/راست)

text-decoration

برای زیرخط دار کردن متن
text-transform

برای کنترل کردن حروف متن

letter-spacing

برای ایجاد فاصله بین حروف متن
line-height

برای ایجاد فاصله بین سطرهای متن

direction

برای راست چین یا چپ چین متن
word-spacing

برای ایجاد فاصله بین کلمات یک متن

text-shadow

برای تنظیم/ایجاد سایه متن

 

ویژگی Color در CSS

 

از این ویژگی برای تغییر رنگ متن ها استفاده می شود. همان طور که در جلسات قبل گفتیم از سه روش میتوان یک مقدار رنگ را برای عناصر تعریف کرد؛

  •  ساده ترین روش استفاده از نام رنگ است green, red, yellow
  •  روش بعدی استفاده از کد هگزادسیمال است ,4baf4b#
  •   می توان از rgb نیز استفاده کرد rgb (75 175 75)
  •  یا از shl نیز می توان استفاده کرد مانند hsl (120deg 40% 49%)

به مثال زیر دقت کنید. تمامی موارد بالا را می توانید در مثال زیر ببینید؛

<style>
Body}
color:blue;
{
P}
color:#5db616;
{
h1}
color:rgb(123,31,222);
{
span{
color: hsl(277deg 31% 38%);
}
</style>

تراز بندی متن (Text-align در CSS)

این ویژگی جهت نوشته را در راستای افقی تراز می کند. یعنی تنظیم می کند که متن مورد نظر وسط چین باشد, چپ چین یا راست چین.
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 استفاده کرد؛

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 در CSS

از خاصیت Text-Transform می توان برای مدیریت و تغییر اندازه ی حروف استفاده کرد. مثلا می خواهید تمام حروف متن نوشته شده را کوچک کنید یا برعکس بزرگ کنید. یا حتی در مواقعی که نیاز دارید تمامی حروف اول کلمات بزرگ باشد می توانید از این خاصیت استفاده کنید. البته این نکته را فراموش نکنید که از این ویژگی زمانی می توانید استفاده کنید که فونت انگلیسی باشد.

uppercase : تمامی حروف را بزرگ میکند
lowercase : تمامی حروف را کوچک میکند
capitalize : حرف اول هر کلمه را بزرگ میکند

مثال؛

<style>
p.a{
text-transform:uppercase;
}
p.b{
text-transform:lowercase;
}
p.c{
text-transform:capitalize;
}
</style>

Letter-Spacing در CSS

برای ایجاد فاصله ی دلخواه بین کاراکترهای یک متن از این ویژگی استفاده می شود.
در مثال زیر فاصله ای که در نظر گرفته ایم 5 پیکسل است؛

<style>
h3{
letter-spacing:5px;
}
</style>

line-height در CSS

از این ویژگی برای تعیین فاصله و فضای خالی بین سطرهای یک متن استفاده میشود؛

<style>
p.a{
line-height:40px;
}
p.b{
line-height:3px;
}
</style>

direction در CSS

با استفاده از این ویژگی جهت متن در کل صفحه ی وب عوض می شود. برای مثال زمانی که بخواهید متن انگلیسی بنویسید لازم است که این ویژگی چپ به راست باشد و برای متن های فارسی برعکس؛

ltr : گزینه ی پیش فرض که از ” چپ به راست ” است.
rtl : از راست به چپ.

مثال

<style>
p.a{
direction:ltr;
}
p.b{
direction:rtl;
}
</style>

مثال زیر برای زمانی است که بخواهیم این ویژگی برای کل صفحه اعمال شود؛

<style>
body{
direction:rtl;
}
</style>

Word-Spacing در CSS

همانطور که از نام این ویژگی مشخص است برای تعیین فاصله ی بین کلمات یک متن مورد استفاده قرار می گیرد؛

<style>
p{
word-spacing:10px;
}
</style>

Text-Shadow در CSS

آخرین ویژگی که برای استایل دهی متن در این جلسه بررسی می کنیم ویژگی 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;
}

آموزش رایگان CSS - جلسه 11| متن ها در CSS
متن ها در CSS

مثال 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 - جلسه 11| متن ها در CSS
متن ها در CSS

 

در پایان

امیدواریم که مطالب این جلسه برای شما مفید بوده باشد. بعد از اینکه روی مطالب این جلسه و مثال های آن مسلط شدید سراغ جلسه ی بعد بروید و آموزش جدید را آغاز کنید. سوال ها و ابهام های خودتان را با ما در میان بگذارید. ما در سریع ترین زمان ممکن به آنها پاسخ خواهیم داد مطمئن باشید.

 

 

😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊

 

4.5/5 - (2 امتیاز)
ارسال نظر

آدرس ایمیل شما منتشر نخواهد شد.