در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

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

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


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;
}

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_گام_به_گام_css #آموزش_css #آموزش_سی_اس_اس #آموزش_مقدماتی_css
عنوان
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 چیست؟ رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....