متن در CSS

در این جلسه به آموزش متن در CSS خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.

رنگ متن

خاصیت رنگ یا property color همان طور که از اسم آن پیدا است، ویژه ی انتخاب رنگ نوشته یا متن مورد نظر مورد استفاده قرار می گیرد .

در CSS ،رنگ غالبا توسط مقادیر فهرست شده در زیر تعیین می شود.

یک مقدار HEX شانزده شانزدهی – مثل “ff0000”

یک مقدار RGB مانند rgb(“۲۵۵″,”۰″,”۰”)

اسم رنگ دلخواه – مانند “red”

رنگ پیش فرض برای یک صفحه در بدنه ی انتخاب گر selector body تعریف می گردد

body {
 color: blue;
}
h1 {
 color: #00ff00;
}
h2 {
 color: rgb(255,0,0)
}

نکته برای ایجاد CSS ی که با استانداردهای W3C مطابقت داشته باشد. چنانچه خاصیت رنگ ( color property ) را تعریف کردید. در آن صورت الزام است خاصیت color-background را نیز تعریف کنید .

تراز بندی متن ( text alignment )

خصوصیت align-text در واقع یک متن را به صورت افقی تراز می کند. جهت چيدمان نوشته را در صفحه با نمای افقی تنظیم می کند.

نوشته می تواند در وسط صفحه قرار گیرد وسط چین شود، همچنین در سمت چپ یا راست قرار داده شود و یا حتی از هر دو سمت راست و چپ تراز justify شود .

زمانی که خصوصیت align-text روی “justify “تنظیم می شود. هر خط تا آنجایی کشیده شده یا بسط داده می شود. که از نظر پهنا ( width ) با هم برابر شوند، حاشیه های سمت چپ و راست نیز درست مشابه مجله یا روزنامه هر دو کاملا باید راست و مستقیم باشند .

مثال

h1 {
 text-align: center;
}
p.date {
 text-align: right;
}
p.main {
 text-align: justify;
}

متن در CSS

اعمال جلوه های بصری به متن (Text Decoration)

خاصیت decoration-text به منظور اعمال جلوه های تصویری به متن یا حذف آن ها از نوشته ی مورد نظر بکار گرفته می شوند .

خاصیت decoration-text عمدتا جهت حذف زیرخط ( underline ) از لینک ها برای مقاصد طراحی مورد استفاده قرار می گیرد

مثال

a {
 text-decoration: none;
}

از آن همچنین برای افزودن جلوه های بصری ( decoration ) به نوشته نیز استفاده می شود

مثال

h1 {
 text-decoration: overline;
}
h2 {
 text-decoration: line-through;
}
h3 {
 text-decoration: underline;
}

توجه توصیه می شود از کشیدن خط زیر متنی که لینک نیست خودداری کنید، زیرا با انجام این کار کاربر دچار سردرگمی می شود .

تبدیل نوع متن از حروف کوچک به بزرگ و بالعکس (Text Decoration)

خاصیت transform-text به منظور تعیین کوچکی و بزرگی حروف مدیریت اندازه ی حروف در متن استفاده می شود .

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

مثال

p.uppercase {
 text-transform: uppercase;
}
p.lowercase {
 text-transform: lowercase;
}
p.capitalize {
 text-transform: capitalize;
}

متن در CSS

تنظیم تو رفتگی متن (TEXT INDENTATION)

خاصیت indent-text را می توان به منظور تنظیم و مدیریت میزان تو رفتگی اولین خط متن مورد استفاده قرار داد ميزان تو رفتگی و نقطه شروع اولين خط از يک پاراگراف نوشته را اداره می کند.

مثال

p {
 text-indent: 50px;
}

کلیه ی خاصیت های مربوط به متن در CSS در جدول زیر با ذکر عملکرد آن ها فهرست شده

۱. color

رنگ نوشته را تعیین می کند

۲. direction

جهت نوشتن / قرارگیری متن را تعریف می کند

۳. Letter-spacing

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

۴. Line-height

فاصله ی بین خطوط یک پاراگراف توسط این این خاصیت مشخص می شود

۵. Text-align

نحوه ی چیدمان افقی متن را مشخص می کند

۶. Text-decoration

افزودن جلوه های تصویری به نوشته را امکان پذیر می سازد (به شما اجازه می دهد دکر یا تزیینات متن را کنترل کنید)

۷. Text-align

نحوه ی چیدمان و تراز بندی یک متن را تعیین می کند

۸. Text-shadow

جلوه یا افکت سایه که به نوشته اضافه می شود را تعیین می کند

۹. Text-transform

کوچک و بزرگی حروف را تعیین می کند

۱۰. Unicode-bidi

به همراه خاصیت direction به منظور تعیین این که آیا متن باید برای پشتیبانی از چندین زبان در یک سند واحد بازنویسی ( override ) شود یا خیر

۱۱. Vertical-align

یک المان را به صورت یا با نمای عمودی تراز بندی می کند (می چیند)

۱۲. White-space

به واسطه ی این خاصیت می توان نحوه ی نمایش فاصله بین حروف را در متن تنظیم کرد

۱۳. Word-spacing

فاصله ی بین کلمات در یک نوشته توسط این خصوصیت تعیین می شود ( فاصله ی بین کلمات در یک نوشته را کاهش یا افزایش می دهد)

ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری متن در CSS پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت. پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید