استایل در HTML – برنامه نویسی HTML – بخش سیزدهم

ارسال توسط

در تاریخ ۱۴۰۴-۰۲-۰۳

استایل در HTML با کمک زبان CSS (اختصار عبارت Cascading Style Sheets) ایجاد می شود. این زبان به مرورگر وب و سایر دیوایس ها دستور می دهد که چطور محتواهای یک فایل HTML را بر روی مرورگر، نمایشگر یا چاپگرها نشان دهند. از سال ۱۹۹۴ میلادی به این سو، کنسرسیوم جهانی وب، استفاده از استایل شیت (Style Sheets) برای طراحی وب سایت ها را تشویق کرده است. زبان CSS این امکان را به شما می دهد که بتوانید نحوه ارائه محتوا را بر اساس اندازه صفحه، نوع چاپگر و یا سایر مشخصات تنظیم کنید. این کار به انعطاف پذیری و کارآمدی بهتر فضاهای طراحی و ارائه مطالب کمک زیادی می کند.
زبان CSS مخفف عبارت Cascading Style Sheets به معنای «شیت های استایل بندی آبشاری» است که به شکل کارآمدی به شما این امکان را می دهند که بتوانید ویژگی های مختلفی را به تگ ها و عناصر HTML نسبت دهید و آن ها را مدیریت کنید. با استفاده از زبان CSS شما می توانید ویژگی های متعددی را به عناصر موجود در صفحه وب نسبت دهید.
هر کدام از ویژگی ها (Property) در اینجا دارای نام و مقدارهای مشخصی هستند که با استفاده از دو نقطه (:) از همدیگر جدا می شوند. در پایان هر کدام از اعلام های ویژگی ها در فایل CSS نیز یک علامت نقطه ویرگول (سمیکولن یا 😉 قرار می گیرد.

نمونه از استایل در HTML با استفاده از زبان CSS

در ابتدا اجازه بدهید که نمونه ای از فایل HTML که در آن از تگ استفاده کردیم را مشاهده کینم. همانطور که در مثال زیر مشاهده می کنید، در اینجا برای معرفی رنگ و اندازه نوشته ها ما هر کدام را به صورت جداگانه معرفی کرده ایم.

<!DOCTYPE html>
<html>
<head>
   <title>HTML CSS</title>
</head>
<body>
   <p>
      <font color="green" size="5">Hello, World!</font>
   </p>
</body>
</html>

اکنون ما می توانیم مثال بالا را با استفاده از کدهای CSS به شکل قابل مدیریت شده بهتری بازنویسی کنیم. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
   <title>HTML CSS</title>
</head>
<body>
   <p style="color:green;font-size:24px;">
      Hello, World!
   </p>
</body>
</html>

عبارت آبشاری (Cascading) در زبان CSS به این معناست که در زمانی که این استایل ها را به تگ والد اختصاص دهیم، آن ها در تگ های فرزند نیز تاثیرگذار هستند. بنابراین در زمانی که شما یک استایل را برای یک تگ تعریف می کنید دقت لازم را به کار ببرید زیرا این ویژگی ها به تگ های زیرمجموعه آن نیز اختصاص داده می شود. شما می توانید از استایل بندی های متفاوتی برای هر کدام از تگ های زیر مجموعه نیز استفاده کنید.

راه های استفاده از تگ CSS برای استایل در HTML

در اینجا سه راه وجود دارد که شما می توانید با کمک آن تگ های CSS را در پرونده HTML خودتان به کار ببرید:

استفاده از فایل خارجی CSS : در این روش شما تمام استایل ها را در یک فایل جداگانه CSS وارد کرده و سپس این فایل را با استفاده از تگ در پرونده HTML وارد می کنید.
استفاده از استایل های داخلی CSS: در این روش شما با استفاه از تگ

نمونه های از به کاربردن CSS برای استایل در HTML

بیائید با همدیگر سه روشی که با کمک آن می توانید از استایل در HTML استفاده کنید را مرور کنیم.

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

شما می توانید با کمک فایل های استایل دهی خارجی، استایل های خودتان را به چندین صفحه HTML اختصاص دهید. این کار حرفه ای ترین روش استایل دهی است و شما با کمک آن می توانید به صورت حرفه ای استایل سایت خودتان را مدیریت کنید. در اینجا شما باید استایل های خودتان را در فایل نوشتاری با پسوند .css وارد کنید. و سپس آن را با استفاده از تگ <link> در درون پرونده HTML خودتان فراخوان کنید.

مثال ما در اینجا یک فایل به نام style.css ایجاد کرده ایم.

.red{
color: red;
}
.thick{
  font-size:20px;
}
.green{
  color:green;
}

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

نمونه از وارد کردن فایل CSS خارجی برای استایل در HTML

در این مثال ما فایل style.css بخش قبلی را با استفاده از تگ به یک فایل HTML وارد می کنیم.

<!DOCTYPE html>
<html>
<head>
   <title>HTML External CSS</title>
   <link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
   <p class="red">This is red</p>
   <p class="thick">This is thick</p>
   <p class="green">This is green</p>
   <p class="thick green">
      This is thick and green
   </p>
</body>
</html>

استفاده از CSS داخلی برای استایل در HTML

بیایید استایلی که در مثال بالا گفته شده است را باز نویسی کنیم در اینجا ما بار دیگر استایل را در میان تگ <style> به کار برده ایم. همانطور که می بینید اکنون شما به جای دو فایل تنها یک فایل در اختیار دارید.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Internal CSS</title>
   <style type="text/css">
      .red {
         color: red;
      }
      .thick {
         font-size: 20px;
      }
      .green {
         color: green;
      }
   </style>
</head>
<body>
   <p class="red">This is red</p>
   <p class="thick">This is thick</p>
   <p class="green">This is green</p>
   <p class="thick green">
      This is thick and green
   </p>
</body>
</html>

استفاده از استایل در خط در HTML

شما می توانید استایل های HTML را به صورت مستقیم در عناصر HTML نیز به کار بگیرید. با استفاده از ویژگی Style شما می توانید ویژگی های استایل مورد نظرتان را به تگ مربوطه نسبت دهید. این کار می تواند تنها در زمانی که می خواهید تغییرات خاصی را به یک تگ اعمال کنید استفاده شود. زیرا سبب می شود که تمام استایل های داخلی و خارجی از بین رفته و استایل در خط به تگ مورد نظر اعمال شود. این کار برای برخی از اقدامات تعاملی که در زبان JavaScript می آموزید بسیار مفید خواهد بود.

نمونه ای از به کارگیری استایل در خط در HTML

بیاید در مثال بالا بار دیگر تغییراتی اعمال کنیم و در اینجا با استفاده از ویژگی style، استایل های مورد نظرمان را به صورت مستقیم به تگ های مربوطه اعمال کنیم.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Inline CSS</title>
</head>
<body>
   <p style="color:red;">This is red</p>
   <p style="font-size:20px;">This is thick</p>
   <p style="color:green;">This is green</p>
   <p style="color:green;font-size:20px;">
      This is thick and green
   </p>
</body>
</html>