تاریخ انتشار:۱۳:۹ ۱۳۹۹/۳/۳۱

صفت color

صفت color برای تنظیم رنگ متن مورد استفاده قرار میگیرد.

با استفاده از زبان CSS، یک رنگ معمولا به صورت های زیر مشخص میشود :

• یک نام رنگ - مانند "red"
• یک مقدار هگزادسیمال - مانند "ff0000#"
• یک مقدار RGB - مانند (255,0,0)rgb

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

 }  body  
 ;color : blue 
 {
 }  h1
 ;color : green 
 {

در مثال بالا مقدار رنگ متون برای انتخاب کننده ی body مقدار "blue" در نظر گرفته شده است. این مقدار از طریق وراثت به عناصری که در بدنه ی صفحه قرار میگیرند اعمال میشود.

---

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

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

مثال زیر ترازبندی های وسط ، چپ و راست را برای متون نشان میدهد(اگر جهت متن از چپ به راست باشد ترازبندی چپ مقدار پیشفرض است و اگر جهت متن از راست به چپ باشد ترازبندی راست مقدار پیشفرض است)

 }  h1  
 ;text-align : center 
 {
 }  h2
 ;text-align : left 
 {
 }  h3
 ;text-align : right 
 {

وقتی صفت text-align با مقدار justify مقدار دهی میشود، هر خط تا زمانی که طولش با بقیه ی خطوط مساوی شود، بسط داده میشود و margin های سمت راست و چپ با هم یکسان میشوند (مانند مجلات و روزنامه ها)

 }  div  
 ;text-align : justify 
 {

---

صفت text-decoration

از صفت text-decoration برای تنظیم و یا حذف تزئینات یک متن استفاده میشود.

مقدار ;text-decoration: none معمولا برای حذف زیر خط در لینک ها استفاده میشود :

 }  a
 ;text-decoration : none 
 {

از مقادیر دیگر text-decoration برای تزئین متون استفاده میشود :

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

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

---

صفت text-transform

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

از این صفت میتوان برای تبدیل حروف کوچک به بزرگ و بالعکس و تبدیل حروف اول هر کلمه به حروف بزرگ استفاده کرد :

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

---

صفت text-indent

از صفت text-indent برای مشخص کردن تو رفتگی اولین خط از یک متن استفاده میشود :

 }  p
 ;text-indent : 50px 
 {

---

صفت letter-spacing

از صفت letter-spacing برای مشخص کردن فضای بین کاراکتر ها در متون استفاده میشود.

مثال زیر نشان میدهد که چطور میتوان فضای بین کاراکتر را افزایش و یا کاهش داد :

 }  h1
 ;letter-spacing : 3px 
 {
 }  h2
 ;letter-spacing : -3px 
 {

---

صفت line-height

از صفت line-height برای مشخص کردن فضای بین خطوط استفاده میشود :

 }  p.small
 ;line-height : 0.8 
 {
 }  p.big
 ;line-height : 1.8 
 {

---

صفت direction

از صفت direction برای تغییر جهت متون در یک عنصر استفاده میشود :

 }  p
 ;direction : rtl 
 {

---

صفت word-spacing

از صفت word-spacing برای مشخص کردن فضای بین کلمات یک متن استفاده میشود.

مثال زیر نشان میدهد که چطور میتوان فضای بین کلمات را افزایش و یا کاهش داد :

 }  h1
 ;word-spacing : 10px 
 {
 }  h2
 ;word-spacing : -5px 
 {

---

صفت text-shadow

از صفت text-shadow برای افزودن سایه به متون استفاده میشود.

در نمونه مثال زیر مقدار مکان سایه افقی 3 پیکسل بوده و برای مکان سایه عمودی این مقدار برابر با 2 پیکسل است و رنگ سایه نیز قرمز است.

 }  h1
 ;text-shadow : 3px 2px red 
 {

 

منبع:learnsource