۴- نوشته

مقدمه

در این فصل می‌خواهیم در مورد:
۱- تِکس Text و ویژگی‌هایی مانند اضافه کردن فونت دلخواه و . . .
۲- روش دوم نوشتن css یعنی اینترنال Internal گفتگو کنیم.
به دلیل اهمیت نوشتن css به صورت اینترنال بحث را با این موضوع آغاز می‌کنیم.

Internal CSS     اینترنال سی‌اس‌اس

روش دیگر استفاده از css به صورت Internal است که در بخش head فایل، دستورات css نوشته می‌شوند.

مزیت این روش، این است که باعث خلاصه نویسی در برنامه می‌شود و اگر بخواهید ویژگی مانند رنگ (color) یا هر مورد دیگری را تغییر دهید کافی است تنها یک‌جا را تغییر دهیم!


رول سی‌اس‌اس     CSS Rule

تصویر بالا قانون کلی نوشتن css را نشان می‌دهد.
همان‌طور که ملاحظه می‌کنید از دو قسمت اصلی یعنی selector و declaration تشکیل شده است.

فصل‌های آینده در مورد selector ها توضیحات کامل‌تری خواهیم داد.

در قسمت declaration، ویژگی‌ها و مقداری که می‌خواهیم تغییر کند را قرار می‌دهیم.

مثال: به خطوط شماره ۶ الی ۱۵ توجه کنید.

<!DOCTYPE html>
<html dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>اکبر مرادی</title>
    <style>
        h1 {
          color:#c65ffe;
          background-color:#ffe45f;
        }
        p {
          color:#8161fe;
          background-color:#ffbc5f;
        }
    </style>
  </head>
  <body>
    <h1>کهکشان راه شیری</h1>
    <h3>منظومه شمسی</h3>
    <p>تیر</p>
    <p>ناهید</p>
    <p>زمین</p>
    <p>بهرام</p>
    <p>هرمز</p>
    <p>کیوان</p>
  </body>
</html>

با توجه به مثال بالا متوجه می‌شویم به جای اینکه از Inline ، CSS استفاده کنیم و background-color هر پاراگراف را به طور جداگانه تعریف کرد! می‌توانیم با استفاده از روش Internal این کار را به راحتی انجام دهیم.

در طراحی وب نکته‌ای که بسیار اهمیت دارد حجم فایل است!
به این معنا که طراح همیشه باید سعی کند در کدنویسی css ،‌html , … حتی استفاده از تصاویر، ویدئوها حجم را کم کند تا مخاطب به راحتی بتواند از آن بهرمند شود.

 فونت

برای شناخت بیشتر با مبحث انواع فونت‌ ابتدا دو مقاله‌ی
“معرفی ۵ خانواده فونت‌ انگلیسی“و “روانشناسی فونت” را مطالعه کرده، سپس ادامه این پست را بخوانید.

دیفاین فونت    Define Font

برای تعریف فونت در css باید از مدل Internal استفاده کرد؛
ساختار کلی آن به صورت زیر است:

<style>
   @font-face {
   font-family: تعیین نام مستعار;
   src: url(آدرس و نام فایل فونت);
   }
</style>

بعد از تگ style عبارت font-face@ را نوشته و علامت آکولاد } باز می‌کنید.

سپس در خط دیگر عبارت font-family را نوشته و در انتهای آن علامت دو نقطه : (colon) می‌گذاریم.
حال باید نام مستعاری برای فونت‌تان در نظر بگیرید؛ این نام مستعار می‌تواند هر چیزی باشد.
سِمی کالون ; (semi-colon) در پایان خط فراموش نشود!

در خط بعد عبارت src که مخف کلمه source است را نوشته و بعد از آن علامت : قرار می‌دهیم.
عبارت url که مخفف کلمه Uniform Resource Locator است را نوشته و در داخل پرانتز (آدرس و نام فایل همراه با فرمت) را می‌نویسیم.

انواع فرمت‌های فایل فونت:

TTF , OTF , WOFF , WOF2 , …
معمولاً برای استفاده از فونت در وب از فرمت woff یا woff2 استفاده می‌شود.
<style>
   @font-face {
   font-family: vazir;
   src: url(Vazir.woff);
   }
</style>

در مثال بالا نام مستعار را vazir قرار داده‌ایم، و چون فایل فونت در کنار فایل html قرار دارد تنها لازم است نام و فرمت آن را دقیق بنویسیم.

توجه داشته باشید نام فونت با V بزرگ (capital) شروع شده است!

این کار را انجام دهید!

فونت وزیر و فونت لاله‌زار را دانلود کرده و در پوشه مربوط به این جلسه (04) بر روی سِرور کپی کنید.

یوزینگ فونت      Using Fonts

نحوه استفاده از فونت
فرض کنید:
عبارتی را در تگ p قرار داده‌ایم حالا می‌خواهیم فونت آن پاراگراف وزیر شود!
در خطوط ۶ الی ۸ فونت مورد نظر را برای پاراگراف تعریف کرده‌ایم.

<style>
   @font-face {
   font-family: vazir;
   src: url(Vazir.woff);
   }
   p {
    font-family: vazir, sans-serif;
   }
</style>

همانطور که مشاهده می‌کنید در خط ۶ ابتدا selector را می‌نویسیم؛
در اینجا یعنی p

سپس در خط ۷ نام یا خانواده فونت مورد نظر را تعیین می‌کنیم.
یعنی عبارت font-family را نوشته و بعد از آن : قرار داده و همان نام مستعاری که قبلاً تعریف کرده بودید را اینجا تایپ می‌کنید.

بعد از آن , (comma) قرار داده و خانواده فونت به کار رفته را می‌نویسید. در اینجا از فونت خانواده sans-serif استفاده شده است.

ویژگی‌هایی که می‌توانیم برای فونت تعریف کنیم. مانند:

Size , Weight , Style , Decoration , Direction , Alignment
Line Height , Indentation

سایز   Size

<style>
   @font-face {
   font-family: vazir;
   src: url(Vazir.woff);
   }
   p {
    font-family: vazir, sans-serif;
    font-size: 20px;
   }
</style>

با استفاده از ویژگی font-size می‌توانیم اندازه نوشته را تعیین کنیم.
در طراحی وب واحدهای مختلفی وجود دارد فعلاً با دو نوع از آنها آشنا خواهیم شد؛ بقیه واحدها را در آینده ان شاءالله بررسی خواهیم کرد.

همانطور که در خط ۸ مشاهده می‌کنید بعد از عدد ۲۰ عبارت px ، مخفف Pixel است یکی از واحدهای اندازگیری در وب می‌باشد که معادل یک dot در صفحه نمایشگر است.
واحد دیگر که با علامت % نمایش داده می‌شود یعنی Percent به  معنی نسبت است؛
که بر اساس پَرِنت parent (والد) تگی، می‌توانیم مقدار آن را بر حسب درصد تعیین کنیم. برای روشن شدن این موضوع در فصل‌های آینده توضیح خواهیم داد.

وِیت     Weight

<style>
   @font-face {
   font-family: vazir;
   src: url(Vazir.woff);
   }
   p {
    font-family: vazir, sans-serif;
    font-size: 20px;
    font-weight: bold;
   }
</style>

در خط ۹ عبارت font-weight می‌توانید مقادیر normal , bold , …  بگیرد؛ با این دستور می‌توانید وزن فونت (ضخامت یا کُلُفتی) را تعیین کنید.

اِستایل    Style

<style>
   @font-face {
   font-family: vazir;
   src: url(Vazir.woff);
   }
   p {
    font-family: vazir, sans-serif;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
   }
</style>

در خط ۱۰ عبارت font-style می‌تواند مقادیر normal , italic , …  بگیرد؛ با این دستور می‌توانید سبک نوشته را تعیین کنید.

دیکوریشن   Decoration

<style>
   @font-face {
   font-family: vazir;
   src: url(Vazir.woff);
   }
   p {
    font-family: vazir, sans-serif;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
   }
</style>

در خط ۱۱ عبارت text-decoration می‌توانید مقادیر underline , overline , line-through , none بگیرد؛ با این دستور می‌توانید تزیین فونت را تعیین کنید.

برای درک بهتر هر مورد، خودتان آزمایش کنید تا ببینید چه اتفاقی میافتد؛ none را در بحث لینک (link) در آینده متوجه خواهید شد.

دایرکشن     Direction

<style>
   @font-face {
   font-family: vazir;
   src: url(Vazir.woff);
   }
   p {
    font-family: vazir, sans-serif;
    font-size: 20px;
    direction:rtl;
   }
</style>

در خط ۹ عبارت direction می‌توانید مقادیر rtl , ltr بگیرد؛ با این دستور می‌توانید جهت نوشته را تعیین کنید.

اَلایمِنت    Alignment

با توجه به تصویر نوشته‌ها به صورت Justify , Center , Right , Left
تراز شده‌اند.
مثلاً مورد سِنْتِر (Center) نوشته را از وسط تراز و مرتب می‌کند.

برای تعیین اَلایمِنت مناسب حواس‌تان به زبان نوشته باشد، سپس مطابق با آن گزینه مربوطه را تعیین کنید! یعنی در انگلیسی تراز به صورت رایت-Right (راست) شاید خیلی کاربرد نداشته باشد!

در خط ۱۰ عبارت text-align می‌توانید مقادیر بیان شده در بالا را بگیرد؛

<style>
   @font-face {
   font-family: vazir;
   src: url(Vazir.woff);
   }
   p {
    font-family: vazir, sans-serif;
    font-size: 20px;
    direction:rtl;
    text-align: center;
   }
</style>

لاین هایت     Line Height

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

<style>
   @font-face {
   font-family: vazir;
   src: url(Vazir.woff);
   }
   p {
    font-family: vazir, sans-serif;
    font-size: 20px;
    direction:rtl;
    text-align: center;
    line-height: 1.5;
   }
</style>

کاربرد اصلی این ویژگی در تعیین ارتفاع خطوط است. و زمانیکه صحبت در مورد ارتفاع خطوط می‌باشد طبیعتاً ما با عناصر متنی مانند تگ‌های h1 – h6 , p , … سر و کار داریم.
تعیین این ویژگی به خوانایی مطالب در سایت تاثیر می‌گذارد.
در خط ۱۱ عبارت line-height را مشاهده می‌کنید که ۱.۵ برابر شده است.

این‌دِنتیشن     Indentation

با توجه به تصویر بالا میزان تو رفتگی در ابتدای پاراگراف را indentation می‌گویند.

<style>
   @font-face {
   font-family: vazir;
   src: url(Vazir.woff);
   }
   p {
    font-family: vazir, sans-serif;
    font-size: 20px;
    direction:rtl;
    text-align: right;
    text-indent: 50px;
   }
</style>

در خط ۱۱ عبارت text-indent را مشاهده می‌کنید که 50px داده ایم؛ به این معنا که خط اول این پاراگراف از سمت راست با این مقدار تو رفتگی آغاز می‌شود.
مقدار این ویژگی را می‌توانید بر اساس px یا % بدهید.

تمرین ۱

* * یادتان باشد از css به روش Internal باید استفاده کنید * *

  1. فایل html تمرین قبل را دانلود کنید.
  2. به گونه‌ای css آن را بنویسید که مانند نمونه شود:
    1. فونت ” کهکشان راه شیری ” لاله‌زار باشد، اندازه آن را ۶۰پیکسل و آن را وسط‌چین کنید.
    2. فونت بقیه نوشته‌ها را وزیر انتخاب کنید.
    3. خطی زیر عبارت منظومه شمسی بکشید و اندازه آن را ۳۰پیکسل بگذارید.
    4. فاصله خطوط بقیه عبارات را ۳ برابر در نظر بگیرید، همچنین فاصله از سمت راست برای همه پاراگراف‌ها ۵۰پیکسل بگذارید.
  3. آن را با نام p1.html در پوشه مربوط به این فصل ذخیره کنید.

لیست   List

همانطور که در تصویر بالا مشاهده می‌کنید دو نوع لیست داریم؛
در Order List ترتیب مهم است و در Unorder List ترتیب مهم نیست!

لیست ترتیبی مانند لیست کلاسی دانش آموزان و…
لیست غیر ترتیبی مانند لیست وسایل مورد نیاز برای سفر و…

شما هم چند مثال برای هر کدام فکر کنید.

در html تگ‌هایی داریم که به صورت اتوماتیک این کار را برای ما انجام می‌دهند!

Order List

<ol>
 	<li>تیر</li>
 	<li>ناهید</li>
 	<li>زمین</li>
 	<li>بهرام</li>
 	<li>هرمز</li>
 	<li>کیوان</li>
</ol>

Unorder List

<ul>
 	<li>تیر</li>
 	<li>ناهید</li>
 	<li>زمین</li>
 	<li>بهرام</li>
 	<li>هرمز</li>
 	<li>کیوان</li>
</ul>

List Style Type

  • disc
  • circle
  • square
  • decimal
  1. persian
  • none
ul{
 list-style-type: none;
}
ol{
  list-style-type: persian;
}

List Style Position

outside , inside

ul{
  list-style-position: outside;
}
ol{
  list-style-position: inside;
}

تمرین ۲

  1. ابتدا از فایل p1.html همین فصل یک کپی بگیرد و آن را با نام p2.html ذخیره کنید. (در پوشه فصل 04)
  2. به گونه‌ای css آن را بنویسید که دقیقا مانند شکل زیر شود!

 * * توجه به جزئیات بسیار مهم است * *

مانند: فاصله کلمات از سمت راست، نوع قلم، اندازه و…