HTML Styles

در HTML، استایل‌ها برای کنترل نحوه نمایش محتوا، مانند رنگ‌ها، فونت‌ها، فواصل و چیدمان استفاده می‌شوند. استایل‌ها می‌توانند به سه روش اعمال شوند:

استایل‌های درون‌خطی: مستقیماً داخل عناصر HTML با استفاده از ویژگی style قرار می‌گیرند.
استایل‌های داخلی: داخل تگ <style> در بخش <head> مستند HTML تعریف می‌شوند.
استایل‌های خارجی: از طریق پیوند به یک فایل CSS خارجی با استفاده از تگ <link> اعمال می‌شوند.

1. استایل‌های درون‌خطی

استایل‌های درون‌خطی مستقیماً در داخل یک عنصر HTML با استفاده از ویژگی style نوشته می‌شوند. این روش برای اعمال استایل‌ها به یک عنصر خاص استفاده می‌شود.

مثال:

<p style=“color: blue; font-size: 16px;”>این یک پاراگراف با استایل درون‌خطی است.</p>

2. استایل‌های داخلی

استایل‌های داخلی درون یک بلوک <style> در بخش <head> مستند HTML تعریف می‌شوند. این استایل‌ها به کل مستند اعمال می‌شوند.

مثال:

<!DOCTYPE html>

<head>

<title>مثال استایل داخلی</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

}

h1 {

color: darkblue;

}

p {

color: #333;

font-size: 18px;

}

</style>

</head>

<body>

<h1>به صفحه خوش آمدید</h1>

<p>این پاراگراف با استفاده از CSS داخلی استایل‌دهی شده است.</p>

</body>

</html>

3. استایل‌های خارجی

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

یک فایل styles.css ایجاد کنید:

/* styles.css */