X

آموزش CSS | شناسه ها (IDs)

معرفی شناسه ها و نحوه استفاده از آنها

شناسه‌ها (IDs) یکی از ابزارهای قدرتمند در CSS هستند که به شما این امکان را می‌دهند تا به طور خاص یک عنصر HTML را هدف قرار دهید. هر شناسه باید منحصر به فرد باشد و تنها می‌تواند به یک عنصر در یک صفحه HTML نسبت داده شود. این ویژگی باعث می‌شود که شناسه‌ها برای شناسایی و استایل‌دهی به عناصر خاص بسیار مفید باشند.

نحوه استفاده از شناسه‌ها:

  1. تعریف شناسه در HTML: برای تعریف یک شناسه، شما باید از ویژگی id در تگ HTML استفاده کنید. به عنوان مثال:

    <div id="myUniqueID">این یک متن است.</div>

    در اینجا، myUniqueID شناسه‌ای است که به عنصر <div> اختصاص داده شده است.

  2. استفاده از شناسه در CSS: برای استایل‌دهی به یک عنصر با شناسه خاص، از علامت # قبل از نام شناسه در CSS استفاده می‌کنید. به عنوان مثال:

    #myUniqueID {
       color: blue;
       background-color: yellow;
       padding: 10px;
    }

    در اینجا، ما به عنصر با شناسه myUniqueID رنگ متن آبی و پس‌زمینه زرد داده‌ایم و همچنین مقداری padding برای آن تعیین کرده‌ایم.

  3. مثال کامل: در زیر یک مثال کامل از استفاده از شناسه‌ها در HTML و CSS آورده شده است:

    <!DOCTYPE html>
    <html lang="fa">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>مثال شناسه‌ها</title>
       <style>
           #myUniqueID {
               color: blue;
               background-color: yellow;
               padding: 10px;
               border: 2px solid black;
           }
       </style>
    </head>
    <body>
       <div id="myUniqueID">این یک متن است که با شناسه استایل‌دهی شده است.</div>
    </body>
    </html>

در این مثال، متن داخل <div> با شناسه myUniqueID به رنگ آبی و پس‌زمینه زرد نمایش داده می‌شود. همچنین، یک حاشیه سیاه به آن اضافه شده است.

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

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

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

  • 1
  • 2
  • 3
  • 4