راهنما

آموزش مقدماتی HTML5 | استفاده از CSS در HTML

تعریف استایل‌ها درون صفحه HTML

در HTML5، می‌توانیم استایل‌ها را به دو روش اصلی به صفحات وب اضافه کنیم: استفاده از CSS درون خطی و استفاده از تگ <style>. در این بخش، به بررسی هر کدام از این روش‌ها خواهیم پرداخت.

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

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

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

در این مثال، رنگ متن پاراگراف به آبی تغییر یافته و اندازه فونت آن به 20 پیکسل تنظیم شده است.

2. استفاده از تگ <style>

روش دیگر برای تعریف استایل‌ها، استفاده از تگ <style> است که معمولاً در بخش <head> صفحه HTML قرار می‌گیرد. در این روش، می‌توانیم چندین استایل را به طور همزمان تعریف کنیم. این کار باعث می‌شود که کد HTML ما تمیزتر و سازمان‌یافته‌تر باشد. به عنوان مثال:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال استایل</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>خوش آمدید!</h1>
    <p>این یک مثال از استفاده از استایل‌ها در HTML است.</p>
</body>
</html>

در این مثال، ما یک رنگ پس‌زمینه برای کل صفحه تعیین کرده‌ایم و همچنین رنگ و تراز عنوان و اندازه متن پاراگراف را مشخص کرده‌ایم. این روش به ما اجازه می‌دهد که به راحتی استایل‌های مختلف را مدیریت کنیم و تغییرات را در یک مکان انجام دهیم.

نتیجه‌گیری

استفاده از استایل‌ها درون صفحه HTML به ما این امکان را می‌دهد که ظاهر و احساس صفحات وب خود را به دلخواه تغییر دهیم. با استفاده از استایل‌های درون خطی برای تغییرات سریع و تگ <style> برای مدیریت استایل‌های پیچیده‌تر، می‌توانیم صفحات وب زیباتری ایجاد کنیم.

پرسش و پاسخ این درس

برای ثبت پرسش ابتدا در سایت وارد شوید.

  • 1
  • 2