HTML – استایل صفحه (Style Sheet)

یک برگه سبک (Style Sheet) مجموعه‌ای از قوانین یا دستورالعمل‌ها است که استفاده می‌شود تا ظاهر و تنظیمات ظاهری اجزای یک صفحه وب را تعیین کند. این قوانین معمولاً شامل استایل‌های CSS (شیوه‌نامه‌های وب) می‌شود که تعیین می‌کنند چگونگی نمایش المان‌های HTML در صفحه است.

توضیحات جزئی:

  1. انواع Style Sheet:

    • Inline Styles: استایل‌های CSS که به صورت مستقیم در تگ‌های HTML تعریف می‌شوند.
    • Internal Styles: استایل‌های CSS که درون بخش <style> درون تگ <head> صفحه قرار می‌گیرد.
    • External Styles: استایل‌های CSS که در فایل مجزا به صورت خارجی ایجاد می‌شوند و با استفاده از تگ <link> به صفحه وابسته می‌شوند.
  2. انتخاب‌گرها (Selectors):

    • استفاده از انتخاب‌گرها برای انتخاب المان‌های HTML مورد نظر جهت اعمال استایل‌ها.
    • انواع مختلف انتخاب‌گرها شامل انتخاب‌گرهای عنصری، کلاس، آیدی، تگ و …
  3. ویژگی‌ها (Properties):

    • ویژگی‌ها CSS مشخص می‌کنند چگونگی نمایش یک المان HTML است.
    • به عنوان مثال، ویژگی‌های مانند رنگ، اندازه، فاصله، ترتیب و …
  4. مقادیر (Values):

    • مقادیر CSS مقادیری هستند که به ویژگی‌ها اختصاص داده می‌شوند و تاثیر مستقیمی بر ظاهر المان‌ها دارند.
    • به عنوان مثال، مقادیر مختلف رنگ، اندازه‌ها و …

مثال:

یک مثال ساده از یک برگه سبک داخلی (Internal Style Sheet) به صورت زیر است:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه با استفاده از برگه سبک</title>
    <style>
        /* انتخاب عنصر h1 و تعیین ویژگی‌ها */
        h1 {
            color: blue;
            font-family: Arial, sans-serif;
        }

        /* انتخاب المان با کلاس "intro" و تعیین ویژگی‌ها */
        .intro {
            font-size: 18px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <!-- استفاده از المان‌های HTML با استفاده از استایل‌های تعیین شده -->
    <h1>سلام دنیا!</h1>
    <p class="intro">این یک مثال از استفاده از برگه سبک در HTML است.</p>
</body>
</html>

در این مثال، ما یک برگه سبک داخلی داریم که استایل‌ها برای عناصر <h1> و .intro تعریف شده‌اند. این استایل‌ها بر روی صفحه تاثیر می‌گذارند و ظاهر آنها را تغییر می‌دهند.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.