جلسه ۲۵ – استایل دهی به متن

چگونه به متن ها استایل زیبا تری بدهیم

استایل دهی به متن
استایل دهی به متن

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

استایل عناصر در CSS

در این جلسه، باهم خصوصیاتی رو یاد می‌گیریم که می‌تونیم توسط اون ها، فرم ظاهری حروف و کلمات رو دستکاری کنیم.

رنگ متن (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;

}

خاصیت color

ممکنه در ابتدای آموزش، تصور کرده باشین که این خاصیت، برای رنگ دادن به عناصر به کار می‌ره.

اما کاربرد این خاصیت، اختصاص دادن رنگ به متن ها و نوشته هاست.

به مثال زیر توجه کنین:

کد HTML:

<p> Mizfa CSS tutorial </p>

کد CSS:

p{
   color:red;
}

نتیجه:

خاصیت color
خاصیت color

مقدار این خاصیت، مثل خاصیت های دیگه ای که مربوط به رنگ می‌شدن، مثل background-color و border-color، می‌تونه توسط ۶ نوع مقدار مختلفی که در مقاله های رنگ در CSS میزفا یاد گرفتیم تعیین بشه.

برای نمونه، استفاده از تابع ()rgb:

کد CSS:

p{
   color: rgb(0, 210, 0);
}

نتیجه:

خاصیت color
خاصیت color

خاصیت text-decoration-line

این خاصیت می‌تونه مقادیر زیر رو قبول کنه:

  • none: هیچ دکور خاصی به متن نمیده.
  • line-through: روی متن، یه خط صاف می‌کشه.
  • underline: زیر متن، یه خط صاف می‌کشه.
  • overline: بالای متن، یه خط صاف می‌کشه.

برای درک بهتر، به عملکرد هر کدوم از مقادیر توجه کنین:

مقدار underline:

کد CSS:

p{
   color: green; 
   text-decoration: underline;
}

نتیجه:

مقدار underline
مقدار underline

مقدار overline:

کد CSS:

p{
   color: green; 
   text-decoration: overline;
}

نتیجه:

مقدار overline
مقدار overline

مقدار line-through:

کد CSS:

p{
   color: green; 
   text-decoration: line-through;
}

نتیجه:

مقدار line-through
مقدار line-through

خاصیت text-decoration-color

توسط این خاصیت، می‌تونیم رنگ دکور مربوط به متنمون رو تغییر بدیم.

رنگ مورد نظر، می‌تونه مقادیر شامل رنگ های پیشفرض، HEX و ()rgb داشته باشه.

به مثال زیر توجه کنین:

کد CSS

p{
   color:green;
   text-decoration-line:underline;
   text-decoration-color: rgb( 0, 0, 255 );
}س
خاصیت text-decoration-color
خاصیت text-decoration-color

خاصیت text-decoration-style

خاصیت border-style رو در مقاله border ها یادتون میاد؟ این خاصیت هم دقیقا مثل همونه 🙂

توسط این خاصیت، می‌تونیم فرم خط درگیر با متن رو تعیین کنیم. خاصیت مورد نظر، مقادیر زیر رو قبول می‌کنه:

  • solid: خط ممتد
  • dotted: نقطه چین
  • dashed: خط چین
  • wavy: موج گونه
  • double: دو خط موازی

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

کد CSS

p{
   color: green;
   text-decoration-line:underline;
   text-decoration-color: rgb( 0, 0, 255 ); 
   text-decoration-style: wavy;
}
خاصیت text-decoration-style
خاصیت text-decoration-style

خاصیت text-decoration-skip

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

مقادیر زیر، مورد قبول این خاصیت هستن:

  • object: هرجا که متن، به عکس و یا عناصر inline دیگه‌ای به جز متن رسید، قطع میشه.
  • spaces: هر جا که به فاصله بین کلمات رسید، قطع میشه.
  • edges: از ابتدای متن شروع و تا انتهای اون ادامه میابه. برای متن های نزدیک به هم به کار میره و بیشتر، تو زبان هایی مثل چینی کاربرد داره.
  • ink: ساده بگیم، تو یه جمله ی مثلا انگلیسی، پای حروفی مثل g و p رو رد می‌کنه و بهشون برخورد نمی‌کنه.

به مثال زیر توجه کنین:

کد HTML:

<p>panzer corps game</p>

کد CSS:

p{
   color: green; 
   text-decoration-line: underline; 
   text-decoration-color: rgb( 0, 0, 255 ); 
   text-decoration-skip: ink; 
}

نتیجه:

خاصیت text-decoration-skip
خاصیت text-decoration-skip

خاصیت text-decoration

این خاصیت، برای خلاصه کردن و کوتاه تر کردن عملیات کدنویسی ما به کار می‌ره و عملکردی مشابه با خاصیت border و margin داره.

می‌تونیم به جای استفاده کردن از ۳ خاصیت text-decoration-color، text-decoration-style و text-decoration-line، مستقیما از خاصیت کوتاه شده ی مورد نظر استفاده کنیم.

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

p{
   color: green; 
   text-decoration-line: underline; 
   text-decoration-color: rgb( 0, 0, 255 ); 
   text-decoration-style: wavy; 
}

کد فوق رو به شکل کوتاه شده زیر می‌تونیم بنویسیم:

p{
   color: green;  
   text-decoration: underline wavy rgb(0,0,255);
}

اگه سوال و ابهامی براتون پیش اومد، حتما تو قسمت نظرات بپرسین.

من کمکتون می‌کنم 🙂

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

دو دستور border-bottom و text-decoration: underline از نظر ظاهری شباهت دارن.

آیا می‌تونیم از اون ها به جای هم استفاده کنیم؟ دلیلتون رو توضیح بدین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

تو این مقاله، با استایل دهی اولیه به متن آشنا شدیم.

یاد گرفتیم که چطور با استفاده از خاصیت color، می‌تونیم رنگ متن رو تغییر بدیم و چطور با استفاده از خاصیت های مربوطه به text-decoration، می‌تونیم به متنمون خطوطی رو اضافه کنیم.

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

مدیر محتوا: علی اسمعیلی

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

32 نظر

32 پاسخ

  1. سلام
    شاید دو دستور border-bottom و text-decoration: underline از نظر ظاهری شباهت داشته باشند .
    اما نمی‌تونیم از اون ها به جای هم استفاده کنیم
    چون text-decoration: underline جزو محتوا محسوب میشه ولی border-bottom یک border برای کل عنصر است که قابلیت ها و کاربرد خیلی بیشتری دارد.

  2. سلام ممنون از مطلبتون
    من دوتا تگ p دارم تو فایل html
    بعد میخوام تو فایل css فقط به p دومی استایل بدم
    چیکار کنم این دوتا p از هم جدا تشخیص داده بشن?!

  3. سلام و عرض خسته نباشید
    میخواستم بپرسم چطور میشه متن رو منظم و تراز شده دقیقا مثل سایت شما که شروع سطر و اخر سط با سطر های پایین‌ترش دقیقا یکیه
    نمیدونم متوجه منظورم شدید یانه اما ممنون میشم منو کمک کنید❤

    1. سلام خوبی؟
      مقاله رو اصلا خوندی؟ چون داخل مقاله گفتیم.
      باید از justify استفاده کنی.

  4. سلام چرا این قسمت کد هارو به ایت شکل باید نوشت h2 {
    ;letter-spacing: -3px
    }

    1. سلام محمد متین. امیدوارم خوب باشی.
      منظورت رو دقیق متوجه نشدم، خب خاصیت letter-spacing برای تعیین فاصله بین حروف به کار میره دیگه 🙂

  5. سلام
    در جواب سوالتون text-decoration : underline دقیقا زیر متن خط میکشه (حالا چه متن یک خط باشه چه چند خط)
    ولی border-bottom زیر جعبه ما خط میکشه (یعنی اگه یه پاراگراف داشته باشیم که توی مرورگر به صورت سه خط نمایش داده بشه و padding هم داشته باشه فقط زیر خط اخر و با رعایت padding یک خط کشیده میشه)
    پس وقتی میخوایم یه متنی رو underline بکنیم بهتره از border استفاده نشه چون شباهت ظاهری این دو تا فقط مال وقتی هست که padding تو چشم نباشه و تعداد خطوط هم بیشتر از یکی نباشه

    1. سلام حسین عزیز. بسیار عالی پاسخت کاملا درسته ?

  6. با سلام و درود
    نکات خوبی داخل سایت یافتم و آرزوی سربلندی دارم

    1. درود بر شما، خيلي خوشحاليم كه مطالب براتون مفيد بوده ?

  7. سلام
    وقتتون بخیر
    ممنون از مطالبی که به رایگان در اختیار ما میگذارید?
    من یک صفحه Htmlدارم که در تگ styleکلیه پاراگراف هارو با !importantمقدار دهی کرده
    سوالم اینه برای تغییرات در صفحه cssخارجی
    چطور میتونم تغییرات اعمال کنم که رنگ پاراگراف ها تغییر کند
    قابلیت تغییر HTML را ندارم
    با تشکر

    1. سلام سحر
      شما هم کدهاتون رو important کنید.
      اگر به صورت inline اومده باشه و important کرده باشه نمشه کاری کرد جز اینکه بری html ویرایش کنی.

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

    1. سلام امیری
      اول به کمک Selector در CSS تگ های a داخل مقاله هات رو انتخاب کن و بعد بیا اینجا و طبق آموزشی که دادیم از خاصیت color استفاده کن.

      1. سلام آقا پوریا
        مقاله ارجاعی رو خوندم، منظورتون از تگهای A چی هست؟
        آیا منظورتون کلمات و جملات لینک داده شده هستند؟

  9. سلام خسته نباشید من روی یک سایتی دچار مشکل سئو هستم از لحاظ ساختار تگ
    تمامی محصولات با فونت H2 هستند چطور میتونم این رو تغییر بدم به نحوی که از لحاظ ظاهری به همون میزان بولد باشه

      1. سلام آشنا هستم با سلکتور ممنون از پیشنهادتون
        مشکل من با این هست که میخوام این h2 متن بشه یا حداقل به h4 تبدیل بشه

        1. سلام زهرا،
          برای اینکه هدینگی که نمایش داده میشه رو از H2 به H4 یا P تبدیل کنی باید از داخل کد های پوسته یا قالب بخشی که محصولات را لود میکنه رو پیدا کنی و تگش رو از H2 به H4 یا P تبدیل کنی.
          اگر قصد داری که متن کوچیک تر بشه تگ H2 را سلکت می‌کنی و با Font-size تغییر سایز میدی.
          امیدوارم جواب سوالت رو گرفته باشی!

  10. سلام. باید چه کدی به متنمون بدیم که وقتی انتخاب شد به عنوان مثال رنگ متن قرمز و بک گراند متن زرد بشه.

    1. سلام سینا.
      با selection میتونی. نمونه کد:

      ::selection {
          background-color: #ddb100;
          color: #FFFFFF;
      }
  11. جناب سرعت لود تصاویر مطالب سایتتون فوق العاده پایینه لطفا رسیدگی کنین تا گوگل ی بلایی سر رتبتون نیاورده!

    1. سلام. ممنون از توجه شما ولی مشکلی در لود نیست. همینطور توجه داشته باشید لود تنبل برای ربات ها فعال نیست و فقط برای کاربران فعال هست 😉

  12. سلام. وقت خیر. بابت مقاله و پاسخ دهی شما بسیار سپاس گزارم و همینطور باید بگم که منو این همه خوشبختی محاله:)
    من همیشه رنگ تایتل ها و لینک ها رو از طریق وردپرس خودم دستی تغییر میدادم. * جدیدا رنگ سایت رو عوض کردم *و مشکلی که دارم اینه که حالا که رنگ سایت عوض شده چطور میتونم کل لینکها و تایتل ها رو با css تغییر رنگ بدم؟ من از وردپرس استفاده میکنم. خودم خیلی از css سر در نمیارم اما قالبم یه قسمت داره که میتونم css اضافه رو وارد کنم. کدی هست که در این قسمت از قالب بزارم و یدفعه همه تایتل ها و لینکها تغییر رنگ پیدا کنن؟ متشکر میشم راهنمایی بفرمایید.

    1. سلام وقت شما هم بخیر دوست عزیز.
      برای تغییر رنگ لینک ها – متن ها و هرچیزی داخل صفحات سایتتون هست، باید ابتدا کلاس مشخص شده برای آن بخش را پیدا کنید. از طریق inspect elements می‌تونید بخشی که می‌خواهید تغییر رنگ – سایز یا کلا تغییر استایل بدید رو پیدا کنید و کارتون رو راه بندازید.
      در رابطه با اینکه بتونید اضافه کنید کد CSS بله می‌تونید راهشم که بالا گفتم. بازم اگر سوالی بود بپرسین و ما در اولین فرصت جوابتون رو میدیم. موفق باشید.

  13. سلام
    استایل دهی تا زمانی که در سایت log in هستیم کار می کند
    زمانی که آفلاین می شویم
    یعنی به صورت آفلاین سایت را بالا لود می کنیم
    انگار استایلی وجود ندارد

    1. سلام. خب اینطوری که نمیشه فهمید. باید فایل ها رو بررسی کرد. شاید تداخلی دارید و یا به دسترسی تعریف نکردید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=