no-img

اِمیلا استایل text در CSS
0
یکشنبه 27 مرداد 1398ورودعضویت
اِمیلا
عمومی استایل text در CSS
فرم گزارش را به دقت تکمیل نمایید
از همکاری شما سپاسگذاریم

ادامه مطلب

منتشر شده در یکشنبه 27 مرداد 1398، 50 روز پیش
استایل text در CSS
امتیاز 5.00 ( 6 رای )
رمز : emila.ir
حمایت از emila.ir
درخواست کاربران

استایل text در CSS

منتشر شده در یکشنبه 27 مرداد 1398 - 50 روز پیش
78
milipinkman
سوال دارم

استایل عناصر در css به طور کلی شامل موارد زیر می باشد:

استایل پس زمینه ها (Background)
استایل متن ها (همین آموزش)
استایل فونت ها
استایل لینک ها
استایل لیست ها
استایل جداول

در این قسمت از emila.ir به بررسی استایل متن در آموزش CSS می‌پردازیم. برای دستیابی به اطلاعات بیشتر در این باره، تا انتهای آمنوزش با ما همراه باشید.

سرفصل‌های پست:

    • 1.1 رنگ متن (Text Color)
    • 1.2 تراز بندی متن ( text alignment)
    • 1.3 اعمال جلوه های بصری به متن (Text Decoratio)
    • 1.4 تبدیل نوع متن از حروف کوچک به بزرگ و بالعکس ( Text Transformation )
    • 1.5 تنظیم تو رفتگی متن ( Text Indentation)
    • 1.6 فاصله ی بین حروف (letter spacing)
    • 1.7 ارتفاع خط (Line Height)
    • 1.8 فاصله ی بین کلمات (Word Spacing)
    • 1.9 سایه متن (Text Shadow)

 

رنگ متن (Text Color)

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

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

  • اسم رنگ (color name) مانند “red”
  • مقدار HEX (شانزده شانزدهی) مثل “#ff0000”
  • مقدار RGB  مانند “(255.0.0)”

رنگ پیش فرض برای یک صفحه در بدنه ی انتخاب گر( body selector ) تعریف می گردد . به مثال زیر توجه کنید :

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

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

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

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

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

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

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

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

a {
text-decoration: none;
}

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

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

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

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

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

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

رنگ متن (Text Color)

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

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

  • اسم رنگ (color name) مانند “red”
  • مقدار HEX (شانزده شانزدهی) مثل “#ff0000”
  • مقدار RGB  مانند “(255.0.0)”

رنگ پیش فرض برای یک صفحه در بدنه ی انتخاب گر( body selector ) تعریف می گردد . به مثال زیر توجه کنید :

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

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

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

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

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

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

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

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

a {
text-decoration: none;
}

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

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

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

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

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

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

تنظیم تو رفتگی متن ( Text Indentation)

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

p {
text-indent: 50px;
}

فاصله ی بین حروف (letter spacing)

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

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

ارتفاع خط (Line Height)

برای تعیین فضای بین خطوط استفاده می شود . مثال:

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

فاصله ی بین کلمات (Word Spacing)

برای تعیین فضای بین کلمات در یک متن استفاده می شود. مثال زیر نشان می دهد که چگونه میتوان  فضای بین کلمات را افزایش یا کاهش داد:

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

سایه متن (Text Shadow)

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

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

 

منبع: w3school


موضوع : عمومی/ برچسب : , , , / لینک کوتاه : https://emila.ir/?p=16690
designer
نظرات ارسال شده توسط شما، پس از تایید، توسط مدیران سایت منتشر خواهد شد.
نظراتی که به غیر از زبان فارسی، غیر مرتبط با مطلب یا فینگلیش باشد، منتشر نخواهد شد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

Here is a some short information about me: I'm a natural born, writer, designer, forecaster, Interested in PHP programming and activities in the field of digital currency, basically I'm a pretty simple person. I work for Emila.ir for more than 1 years. I am passionate about creating posts and content for emila.ir which I think is Among the best viral persian Websites. I am available at Nearby

ارسال پیامک  -  ارسال ایمیل
IP شما: 34.239.158.107