آموزش CSS

آموزش CSS - متن

خصوصیت متن در CSS به شما اجازه می دهد سبک های مختلف متنی همچون رنگ، تراز بندی، فاصله(spacing) ،جلوه های بصری متن( decoration) و غیره را تعریف نمایید.

فرمت بندی متن با CSS:

زبان برنامه نویسی CSS خصوصیت های زیادی برای تعریف سبک متون دارد. این خصوصیت ها به شما اجازه می دهد کنترل دقیقی بر روی ظاهر بصری کاراکترها، فضای بین آن ها، کلمات و پاراگراف ها داشته باشید. شما می توانید خصوصیت های زیر را برای متن یک المان تنظیم کنید:

خصوصیت Color:

رنگ متن توسط خصوصیت Color تعریف می شود.

h1 {
    color: #ff0000;
}
p {
    color: green;
}

نکته: اگرچه رنگ متن به نظر می رسد بخشی از متن باشد اما در واقع یک خصوصیت واحد و جداگانه در زبان برنامه نویسی CSS است.

ترازبندی متن:

خصوصیت text-align برای تنظیم تراز افقی متن مورد استفاده قرار می گیرد. مقادیری که می توان در این خصوصیت به کار برد شامل موارد زیر است:

  • left
  • right
  • center
  • justify
  • inherit
h1 {
    text-align: center;
}
p {
    text-align: justify;
}

نکته: زمانی که خصوصیت text-align بر روی justify تنظیم می شود، هر خط کشیده خواهد شد تا هر کدام از آن ها عرض یکسانی داشته باشند و حاشیه های راست و چپ مستقیم باشد.

خصوصیت Text Decoration:

خصوصیت Text Decoration برای تنظیم یا حذف جلوه های بصری از متن مورد استفاده قرار می گیرد. مقادیری که می توان در این خصوصیت به کار برد شامل موارد زیر است:

  • None
  • underline
  • overline
  • line-through
  • blink
  • inherit

بهتر است از خط دار کردن متونی که لینک نیستند خودداری کنید. اینکار باعث سردرگمی کاربران می شود.

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

هشدار: مقدار Blink برای خصوصیت text-decoration توسط بیشتر مرورگرها پشتیبانی نمی شود. باید از به کار بردن این مقدار خودداری کنید.

حذف Underline پیش فرض از لینک ها:

خصوصیت text-decoration عموما برای حذف underlines پیش فرضی به کار می رود که در هایپرلینک ها دیده می شود. حذف کامل underline می تواند باعث سردرگمی کاربران شود. اگر سایر نشانه های بصری را فراهم می کنید می توانید ان را حذف کنید در غیر اینصورت بهتر است اجازه دهید در همین حالت باقی بماند. به عنوان مثال شما می توانید از نقطه برای خط دار کردن لینک خود استفاده کنید. به مثال زیر توجه کنید:

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

نکته: زمانی که لینک HTML را ایجاد می کنید، مرورگرها به طور خودکار ان را خط دار می کنند. این موضوع به کاربران کمک می کند متنی که قابل کلیک است را تشخیص دهند.

خصوصیت text-transform:

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

none, capitalize, uppercase, lowercase و inherit.

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

تنظیم تورفتگی متن با خصوصیت text-indent:

خصوصیت text-indent برای تنظیم تورفتگی اولین خط از متن مورد استفاده قرار می گیرد. این خصوصیت مقادیری همچون percentage ( بر حسب درصد)، Length( تعیین کننده فضای تورفتگی ) یا Inherit را اتخاذ می کند. مثال زیر نحوه تو رفتگی اولین خط از پاراگراف را مشخص می کند.

p {
    text-indent: 100px;
}

نکته: تورفتگی از چپ یا راست به جهت متن در داخل المان بستگی دارد و با خصوصیت direction تعریف می گردد.

فاصله بین کلمات:

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

  • فاصله بین کلمات ممکن است بر اساس تراز متن تعیین گردد.
  • زمانی که فضاهای سفید حفظ می شوند همه کاراکترهای Space تحت تاثیر فاصله بین کلمات خواهند بود.

مقادیر محتمل برای این خصوصیت در برگیرنده Length( مشخص کردن فضایی که باید بین کلمات قرار گیرد)، Normal و Inherit است.

p.one {
    word-spacing: 20px;
}
p.two {
    word-spacing: 20px;
    text-align: justify;
}
p.three {
    word-spacing: 20px;
    white-space: pre;
}

فاصله بین کاراکترها:

خصوصیت letter-spacing برای تنظیم فاصله بین کاراکترهای متن مورد استفاده قرار می گیرد. مقادیری که این خصوصیت اتخاذ می کند در برگیرنده موارد زیر است:

length، normal and inherit.

h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}

خصوصیت line-height:

این خصوصیت ارتفاع خطوط یک متن را تعریف می کند. مقادیری که این خصوصیت اتخاذ می کند شامل موارد زیر است:

percentage (%), length, number, normal and inherit.

p {
    line-height: 1.2;
}

زمانی که مقدار به کار رفته عدد باشد، ارتفاع خط با ضرب کردن اندازه فونت المان در عدد به دست می اید. این در حالیست که مقادیر درصدی به اندازه فونت المان مرتبط اند.

نکته: مقادیر منفی در این خصوصیت نباید مورد استفاده قرار گیرند.

اگر مقدار خصوصیت line-height بزرگتر از مقدار خصوصیت Font-size همان المان باشد، این اختلاف نصف می شود و به صورت مساوی در بالا و پایین جعبه In-line توزیع می گردد.

p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

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

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

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

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...