آموزش کامل CSS قسمت چهارم

در این جلسه یاد خواهیم گرفت که چگونه از ویژگی font-weight برای تغییر اندازه نوشته های صفحه استفاده کنیم و همچنین با روش فراخوانی و استفاده از یک فایل استایل خارجی آشنا خواهیم شد.

ویژگی font-weight در CSS

ویژگی font-weight به شما این امکان را می‌دهد که ضخامت فونت ها را کنترل کنید، این ویژگی می‌تواند ظاهر فونت و در نتیجه وبسایت شما را زنده تر و پر انرژی تر نشان دهد. چهار نوع ضخامت (bolder, bold, lighter, normal) را میتوانیم در CSS خود استفاده کنیم. البته فونت مورد استفاده ما نیز باید از این 4 حالت پشتیبانی کند در غیر این صورت تنظیم این ویژگی تغییری را برای المان های صفحه ما ایجاد نخواهد کرد.

در مثالهای زیر 3 حالت اصلی را بر روی کدهای HTML خود اعمال میکنیم و از فونت Arial black برای این منظور استفاده خواهیم کرد.

طبق روال گذشته نام ویژگی را در قسمت Style صفحه HTML خود اینبار در عنصر body اضافه می کنیم تا در تمام عناصر فرزند اعمال شود. در مرحله اول حالت عادی (normal) را برای مقدار این ویژگی در نظر خواهیم گرفت و نتیجه را بررسی می کنیم.

<!doctype html>
<html>
<head>
  <style>
    body {
      color: green;
      font-family: Arial black;
      font-weight: normal;
    }
    h1, h2 {
      border-bottom: 1px solid black;
    }
    .blue {
      color: blue;
      font-size: 25px;
    }
    .underline {
      text-decoration: underline;
    }
  </style>
</head>
<body dir="rtl">
  <h1>پیشرو سیستم</h1>
  <p class="blue">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
  <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
  <blockquote class="blue underline">می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

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

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

حالا نوبت ظریف تر (lighter) است فقط کافیست به جای عبارت normal عبارت lighter را قرار دهیم.

<!doctype html>
<html>
<head>
  <style>
    body {
      color: green;
      font-family: Arial black;
      font-weight: lighter;
    }
    h1, h2 {
      border-bottom: 1px solid black;
    }
    .blue {
      color: blue;
      font-size: 25px;
    }
    .underline {
      text-decoration: underline;
    }
  </style>
</head>
<body dir="rtl">
  <h1>پیشرو سیستم</h1>
  <p class="blue">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
  <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
  <blockquote class="blue underline">می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

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

همانطور که در بالا مشاهده می کنید ضخامت نوشته ها از حالت قبل که عادی بود ظریف تر شده اند.

در این مرحله ضخامت نوشته ها را برجسته (bold) می‌کنیم.

<!doctype html>
<html>
<head>
  <style>
    body {
      color: green;
      font-family: Arial black;
      font-weight: bold;
    }
    h1, h2 {
      border-bottom: 1px solid black;
    }
    .blue {
      color: blue;
      font-size: 25px;
    }
    .underline {
      text-decoration: underline;
    }
  </style>
</head>
<body dir="rtl">
  <h1>پیشرو سیستم</h1>
  <p class="blue">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
  <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
  <blockquote class="blue underline">می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

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

نتیجه بالا نشان می‌دهد ضخامت فونتها بیشتر از حالت عادی (normal) و ظریف تر(lighter) است.
شما میتوانید آخرین ضخامت یعنی برجسته تر (bolder) را نیز در صفحه خود اعمال کنید و تغییر آن مشاهده نمایید.

استفاده از یک فایل استایل خارجی

سه راه برای قرار دادن کدهای CSS در سند HTML وجود دارد اولین راه استفاده از استایل داخلی (Internal style) است که تا الان از آن استفاده می‌کردیم روش بعدی فایل استایل خارجی (External Style sheet) است که امروز آن را بررسی می‌کنیم و سومین روش نوع (Inline) است که در آموزش های بعدی به آن خواهیم پرداخت.

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

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

body {
  color: green;
  font-family: Arial black;
  font-weight: bold;
}
h1, h2 {
  border-bottom: 1px solid black;
}
.blue {
  color: blue;
  font-size: 25px;
}
.underline {
  text-decoration: underline;
}

بعد از کپی کردن، فایل را با نام stylesheet.css و با نوع ذخیره All Files در مسیری که فایل HTML تان وجود دارد ذخیره کنید. حالا برگردید به سند HTML و تمام کد های CSS به علاوه تگ style را پاک کنید تا فقط کد های HTML داشته باشید.

در این مرحله باید فایل استایلی که ایجاد کرده ایم را در سند HTML فراخوانی کنیم تا دوباره قوانین CSS ما بر روی عناصر اعمال شود. برای اینکار باید از تگ link مانند مثال زیر بین تگ های باز و بسته head استفاده کنیم.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
  <h1>پیشرو سیستم</h1>
  <p class="blue">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
  <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
  <blockquote class="blue underline">می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

در این خط کد عبارت rel نوع فایل که صفحه استایل است را نشان می‌دهد، عبارت type نوع صفحه استایل یعنی CSS بودن آن را نشان می‌دهد و عبارت href که مهمترین بخش است مکان یا همان مسیر فایل استایل مورد نظر را نشان می‌دهد. اگر همه چیز به درستی انجام شده باشد در صورتی که صفحه را ذخیره و در مرورگر باز کنید باید بتوانید تغییراتی که از طریق قوانین CSS بر روی ظاهر عناصر ایجاد کرده بودیم را مشاهده کنید. اگر اینطور نیست احتمالا قسمتی از مسیر را اشتباه کرده اید.

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

آموزش کامل CSS قسمت چهارم

ویژگی font-weight در CSS

استفاده از یک فایل استایل خارجی

دیدگاهتان را بنویسید لغو پاسخ