آموزش css – درس ششم – ویرایش متن

[ آخرین بازنگری ۲۱ آبان ۱۳۹۵ ] [ نسخه چاپی ]

در درس گذشته باهم مشخصه Background رو بررسی کردیم و یاد گرفتیم که چطور برای یک عنصر از صفحه یک تصویر زمینه قرار بدیم و تصاویر رو با css در صفحه بچینیم.در این درس به قالب بندی متن می پردازیم و در نهایت یاد میگیریم که چطور نحوه ی نمایش متن و جهت بندی اون رو تحت کنترل خودمون بگیریم.این درس میتونه حتی برای دوستانی که در زمینه فارسی سازی قالب های سیستم های مدیریت محتوا مثل جوملا ، وردپرس و … کار می کنند مفید باشه.

رنگ متن در CSS

همونطور که در درس قبل گفتیم در css میتونید از سه طریق رنگبندی چیزی رو تعیین کنید.

  1. از طریق مقادیر HEX مثل #ff0000 برای رنگ قرمز
  2. استفاده از سیستم RGB مثل rgb(255,0,0)
  3. ذکر مستقیم نام رنگ مانند red

برای اینکه بتونید رنگ مورد نظر رو به class و یا ID مورد نظر نسبت بدید باید از مشخصه color استفاده کنید.به عنوان مثال می خواهیم رنگ نوشته های صفحه ما به رنگ طوسی باشند و رنگ تیترها به رنگ مشکی ، به مثال زیر توجه کنید:

Body{color:#ccc;}
H1{color:black;}

به این نکته توجه کنید که در صورتی که رنگ متن و زمینه یکی باشند ویا رنگهای نزدیک هم باشند برای دریافت مهر استاندارد css خودتون به مشکل خواهید خورد!

ترازبندی و جهت بندی متن در css

ترازبندی متن

در صورتی که بخواهید ترازبندی متن رو عوض کنید و مثلا متن رو در سمت راست یا چپ یا وسط نشون بدید ، مشخصه ی text-align به کمک شما میاد.این مشخصه با دریافت مقادیر right,left,center و justify تمام نیازهای شما رو برای نمایش موقعیت متن برآورده میکنه.در سایت ها و صفحات فارسی زبان برای اینکه جهت نوشتن از راست به چپ هست میتونید موقهعیت نوشته رو سمت راست قرار بدید(البته مشخصه های دیگری هم در این امر دخیل هستند که در ادامه به اونها خواهیم پرداخت).هنگامی که شما مقدار justify رو به این مشخصه میدید در واقع کاری کردید که تمام سطرهای متن شما در یک راستا تموم بشوند و در واقع منظم تر میشه.به مثال زیر دقت کنید:

P{text-align:justify;color:#950000;}

تزیین متن

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

  • Blink که حالت چشمک زن رو به متن میده (در اینترنت اکسپلورر شناخته شده نیست)
  • Line-through که یک خط رو بر روی متن نشون میده.
  • Underline که زیر متن خط میکشه
  • Overline که یک خط رو بالای متن نمایش میده.
  • None که تمام تزیینات رو از بین میبره.از این خاصیت بیشتر برای لینک ها استفاده میشه تا خط زیر لینک ها نمایش داده نشه.

به مثال زیر دقت کنید:

H1{text-decoration:underline;}
P.before{text-decoration:line-through;}
A{text-decoration:none;}

بهتره به متن های معمولی که لینک نیستند مقدار underline رو اختصاص ندید چون اینکار موجب سردرگمی کسی میشه که داره صفحه شما رو میبینه!

جهت بندی متن

در بالا ترازبندی متن رو یاد گرفتیم ولی برای صفحات فارسی چیزی که از ترازبندی ضروری تر هست ، جهت بندی متن هست.چرا که صفحات فارسی از سمت راست به چپ هستند و متون باید از راست به چپ چیده بشوند.برای اینکه این مشکل برطرف بشه از مشخصه direction استفاده می کنیم.این مشخصه مقادیر ltr (left to right برای از چپ به راست) و rtl (right to left برای از راست به چپ) رو دریافت میکنه.در مثال زیر ما پاراگراف های صفحه خودمون رو راست چین می کنیم و جهت نمایش و چینش حروف رو از راست به چپ قرار میدیم:

P { text-align:right; direction: rtl;}

همچنین اگه بخواییم انتهای هر سطرهای یک پاراگراف در یک تراز قرار بگیرند هم میتونیم به شکل زیر اقدام کنیم:

P { text-align:justify; direction:rtl;}

تورفتگی متن

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

p { direction:rtl;text-align:justify; text-indent:50px;}

تنظیم فاصله سطرها

برای اینکه بتونیم فاصله ی بین سطر ها رو تغییر بدیم از line-height استفاده میکنیم.میتونیم مقادیری برحسب درصد و یا em به اون اختصاص بدیم.

P { line-height:200%;}
P {line-height:1.5em;}

تنظیم فاصله کاراکترها

word-spacingبرای ایجاد فاصله بین کلمات یک متن استفاده میشه.مثلا میخواییم یک سطر از پاراگراف رو که دارای کلاس space هست کلماتش رو باز باز نمایش بدیم:

p.space{ word-spacing:20px;}

خوب فکر میکنم تمامی موارد ضروری و مورد نیاز برای قالب بندی متن رو با استفاده از css گفته باشم و اگه چیزی از قلم افتاده و یا نکته ای براتون مبهم بود حتما در بخش نظرات بگید تا توضیح داده بشه.

احتمالا این مطالب برای شما جالب هستند

دوره‌ی مقدماتی آموزش کسب مهارت CSS
آشنایی با CSS و لزوم استفاده از آن در طراحی سایت
آموزشcss – درس پنجم – تصویر زمینه
آموزش css – درس چهارم – نحوه استفاده از css
آموزش css – درس دوم-دستورات
تعیین فونت و قلم نوشته‌ها و استایل بندی آن در CSS
طراحی و استایل بندی جدول با کمک CSS

گفتگو پیرامون آموزش css – درس ششم – ویرایش متن

(منتشر شده: 21 | در انتظار تایید: 0)
zahra

سلام با تشکر از مطالب عاليتون
ببخشید متن رو باید در قسمت html /Nastقرار بدیم? اگه متن طولانی باشه مشکلی پیش نمیاد?

پاسخ دهید

در پاسخ به zahra

سلام
متوجه سوالتون نشدم. منظورتون از Nast چیه؟

پاسخ دهید
پیمان

سلام.
ممنون از آموزش های خوبت.
یه سوالی داشتم.
من این خاصیت justify رو درست متوجه نشدم.
میشه یه مثال بزنی…

پاسخ دهید
عصرعلم

در پاسخ به پیمان

سلام
برای اینکه انتهای هر سطر با سطر بعدی یکسان باشه مقدار text-align رو برابر justify قرار میدیم:
———
———
———
———
و اگر از justify استفاده نکنیم و مثلا میزان text-align رو برابر right قرار بدیم انتهای سطرها یکسان نخواهند بود:
——–
—–
———-
——
امیدوارم متوجه شده باشید. میتونید در عمل هم برای خودتون یک صفحه html بسازید که حاوی چند پاراگراف نوشته باشه و مقادیر justify رو با right و left مقایسه کنید.

پاسخ دهید
siavash-k

سلام ببخشید بازم وقتون و میگیرم
میخواستم بدونم از کجا و با چه دستوری میشه رنگ لینک ها ( وقتی روش کلیک نشده و وقتی روش کلیک شده ) و تزیینشون رو عوض کنم ؟
من یه قالب خودم طراحی کردم همه چیش اوکی اما این رنگ لینکاش تو footer( رنگ مشکی) محو میشه و اصلا زیبا دیده نمیشه
بازم ببخشید تازه کاریم دیگه و اینکه شما استادی
بیشتر این سایتیم که طراحی کردم با استفاده از اموزشای شما بوده که خیلی عالی و دقیق بودن 😀

پاسخ دهید
siavash-k

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

پاسخ دهید
siavash-k

می خوام یه متنی دارم ( ادامه ی مطلب ) میخوام این متن به صورت چشمک زن به رنگ های سفید و طو.سی نماشی داده بشه
تو توضیحاتون گفتین دستورش و اما عمل نمیکنه
سایر دستورات کامل انجام میشه
ممنون

پاسخ دهید
عصرعلم

در پاسخ به siavash-k

فکر میکنم به این دلیل هستش که دستور blink تنها در مرورگر فایرفاکس پشتیبانی میشه و کروم، سافاری و اکسپلورر این مقدار رو پشتیبانی نمیکنند. بهتره از جاوااسکریپت استفاده کنید یا اینکه از css3 که مثالش رو براتون گفتم بهره بگیرید.

پاسخ دهید
siavash-k

در پاسخ به عصرعلم

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

پاسخ دهید
siavash-k

خسته نباشین
ببخشید میشه یک مثال برای تزیین خط به حالت چشمک زن بین رنگ سفید و طوسی بزنید
پیشاپیش باز از زحمات شما متشکرم !

پاسخ دهید
عصرعلم

در پاسخ به siavash-k

سلام
برای اینکار باید از خصوصیت animation در css3 استفاده کنید که در مرورگر اینترنت اکسپلورر پشتیبانی و اجرا نخواهد شد. برای مثال :

div.line
{
width:300px;
height:1px;
position:relative;
animation:line 1s infinite; /*W3C and Opera*/
-moz-animation:line 1s infinite; /*Firefox*/
-webkit-animation:line 1s infinite; /*Safari and Chrome*/
}
@keyframes line /*Opera*/
{
from {left:0px;background:#fff;}
to {left:0px;background:#777;}
}
@-moz-keyframes line /*Firefox*/
{
from {left:0px;background:#fff;}
to {left:0px;background:#777;}
}
@-webkit-keyframes line /*Safari and Chrome*/
{
from {left:0px;background:#fff;}
to {left:0px;background:#777;}
}

کد css بالا تگ div با کلاس line رو به صورت چشمک زن از سفید به طوسی نمایش میده:
<div class="line"></div>

پاسخ دهید
siavash-k

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

پاسخ دهید
siavash-k

با سلام خدمت شما
از بابت آموزش بسیار عالی تون متشکرم
من یه مشکلی دارم !!!
اونم اینکه من میخوام متنم از دیواره ی موقعیتم یکم فاصله داشته باشه و نچسبه به دیواره برای مثال مطالب از دیواره حدودا 5px ( تمامی سطر ها و از هر دو طرف راست و چپ ) فاصله داشته باشه !!!
دستوری برای این کار هست ؟ میشه راجبش توضیح بدین
با تشکر

پاسخ دهید
عصرعلم

در پاسخ به siavash-k

سلام
بله مشکل شما راه حل بسیار ساده ای داره و اون هم استفاده از padding است. برای مثال اگر بخواهید متن به میزان 5 پیکسل از سمت راست و چپ فاصله داشته باشه برای کلاس مورد نظر در css باید مشخصه زیر رو تعریف کنید:

padding:0px 5px;
یا اگر بخواهید 5 پیکسل هم فاصله از بالا و پایین هم اضافه کنید میشه :
padding:5px;

همچنین طرز استفاده از padding در درس سیزدهم به طور کامل شرح داده شده که میتونید مطالعه کنید.

» آموزش css – درس سیزدهم – margin و padding

پاسخ دهید
حسام

با سلام و خسته نباشيد.
ممنون از سايت خوبتون و مطالب مفيدتون.
يه مشكلي دارم.
وقتي درس هاتون رو پرينت ميگيرم كدها قاطي مي شوند.
يعني اول مياد آخر،آخر ميره اول!
قبل از پرينت و درحال ملاحظه خوبه ولي پرينت كه ميگيرم اين مشكل پيش مياد و براي يك تازه كار سخته خوندن اين كدها.
ممنون ميشم راهنمايي كنيد.

پاسخ دهید
عصرعلم

در پاسخ به حسام

سلام
مشکل برطرف شد و الان درست کار میکنه. از این که این ایراد رو گزارش دادید از شما سپاسگزاریم.
موفق باشید

پاسخ دهید
بابک

سلام استاد
خواستم بدونم چطور میشه زمینه ی یک نوشته رو ک مثلا رنگ قرمز هست فقط تا انتهای نوشته ادامه داد نه تا آخر سطر…؟

پاسخ دهید
عصرعلم

در پاسخ به بابک

سلام
شما لطف دارید ولی لفظ استاد خیلی سنگینه و در حدش نیستیم!!
منظورتون رو کامل متوجه نشدم ، رنگ زمینه قرمز هست یا رنگ نوشته ؟
فکر میکنم منظورتون این باشه که مثلا ” این یک پاراگراف است ” ، قسمت “این یک ” زمینه قرمز داشته باشه و بقیه ساده باشه . اگر منظورتون این بوده باید از تگ span استفاده کنید و مشخصات رنگ رو به این تگ span اختصاص بدید :
p
span style="background:red;"
این یک
/span
پاراگراف است
/p

برای اینکه نمیشه در بخش نظرات از تگهای html استفاده کرد من مثال رو اونطوری نوشتم ، امیدوارم متوجه شده باشید .

پاسخ دهید
علی رضا

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

پاسخ دهید
سجاد

در پاسخ به علی رضا

خواهش میکنم عزیزم ، خوشحالم که به دردتون خورد

پاسخ دهید

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)