درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

عضویت در

کانال تلگرام

توسینسو

اطلاعات مطلب
مدرس/نویسنده
ارسطو  عباسی
امتیاز: 25051
رتبه:26
60
85
8
229
ارسطو هستم، نویسنده، وبلاگ‌نویس و توسعه‌دهنده وبسایت: Arastoo.net پروفایل کاربر

آموزش گام به گام CSS قسمت ششم: متون

تاریخ 32 ماه قبل
نظرات 0
بازدیدها 195
پس از کار با حاشیه ها و تعیین فاصله یکی دیگر از دستورهای مهم، دستورات مربوط به متون است، چگونه می توان متون را کنترل کرد، رنگ، فونت و... . پس بریم سروقت آموزش!

Text Color: از اولین استایل هایی که به یک متن داده می شود رنگ آن است، می توان توسط دستور color و مقادیری که در بخش رنگ ها و پشت زمینه ها در css با آن آشنا شدیم مقدار دهی کرد. به مثال زیر توجه کنید:
p
{
color: #ffaaee
}

Text Alignment: موقعیت یک متن در صفحه نیز مهم است، برای مثال برخی از متون باید در وسط صفحه قرار گیرند و برخی چپ و... توسط دستور text-align اینکار به سادگی انجام پذیر است. این دستور دارای سه مقدار, justify right , left , center است. به مثال زیر توجه کنید:
h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
h4 {
    text-align: justify;
}

نکته: حالت justify باعث می شود که متون دقیقا هم تراز باشند.

Text-decoration: بهترین واژه برای این دستور دکور متن است، توسط این دستور می توانید شکل متن را تغییر دهید. یکی از پر استفاده ترین مقدار این دستور none در متون مربوط به لینک است، وقتی یک متنی را بین تگ a قرار می دهید به صورت پیش فرض متن به صورت زیرخط دار نمایش داده می شود اما اگر این دستور را با مقدار none به آن بدهید به حالت عادی باز می گردد. مقادیر مختلف دیگری نیز دارد که عبارت است از:
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
حالت اول خطی در بالای متن نمایش داده می شود، حالت دوم خط روی متن قرار می گیرد و حالت آخر، خط زیر متن.

text-transform: بزرگ یا کوچک بودن متن ها در زبان انگلیسی شاید یکی از مهمترین دغدغه های نگارشی باشد. البته در css این یک دغدغه نیست همه کنترل ها دست شماست. این دستور دارای سه مقدار است که عبارت است از:
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
اولین مقدار تمام حروف مربوطه را بزرگ نشان می دهد. مثل ITPRO
دومین مقدار تمام حروف مربوطه را کوچک نشان می هد. مثل itpro
سومین حالت اولین حرف هر کلمه را بزرگ نشان می دهد. مثل Hello Itpro

Text Indentation: برای تعیین فاصله اولین خط با گوشه صفحه استفاده می شود. فاصله آن معمولا 50 پیکسل است اما شما می توانید هر مقدار دوست دارید به آن بدهید، برای آنکه پاراگراف هایتان بهتر دیده شود حتما از این امکان استفاده کنید.
p {
    text-indent: 50px;
}
letter-spacing: برای تعیین فاصله میان حروف کلمات از این دستور استفاده کنید هم می توانید مقدار را بالاتر از صفر قرار دهید و هم پایین تر از آن.
h1{
    letter-spacing: 3px;
}

h2{
    letter-spacing: -3px;
}

word-spacing: برای تعیین فاصله میان کلمات یک جمله بکار برده می شود.
h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}
Text Direction: جهت گیری متن از مهمترین قضایا در یک صفحه وب است، علل خصوص برای یک متن فارسی. توسط این دستور می شود تعیین کرد که قالب متن راست به چپ است یا بلعکس.
div {
    direction: rtl;
}
نویسنده : ارسطو عباسی
منبع : انجمن تخصصی فناوری اطلاعات ایران
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

برچسب ها
ردیف عنوان
1 آموزش گام به گام CSS قسمت اول : معرفی و آشنایی با نوشتن دستورات و کامنت
2 آموزش گام به گام CSS قسمت دوم: شیوه های استفاده از CSS
3 آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها
4 آموزش گام به گام CSS قسمت چهارم: حاشیه ها
5 آموزش گام به گام CSS قسمت پنجم: Margin , Padding , height , Width
6 آموزش گام به گام CSS قسمت ششم: متون
7 آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی
8 آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها
9 آموزش گام به گام CSS قسمت نهم: جداول
10 آموزش گام به گام CSS قسمت دهم: Display و Max-width
11 آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow
12 آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت
13 آموزش گام به گام CSS قسمت سیزدهم: شفافیت
14 آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟
15 آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟
دوره مجموعه کل دوره
مطالب مرتبط

در حال دریافت اطلاعات

نظرات
هیچ نظری ارسال نشده است

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