cssطراحی سایت

جلسه ۴۰: استایل های پیش فرض مرورگر چگونه بر یک سند تأثیر می گذارند در CSS

درست قبل از شروع ساخت پروژه های سرگرم کننده ، باید توجه داشته باشید که استایل های شما تنها استایل های بازی نیستند. اکثر مرورگرها کنترل پیاده سازی پیش فرض را دارند ، مجموعه ای از استایل های پیش فرض که قبلاً روی عناصر HTML اعمال شده اند.

بیش از ۴۰ مرورگر در جهان وجود دارد. کنجکاو شدم بنابراین ویکی پدیا را بررسی کردم. برخی از آنها محبوب نیستند ، اما شما خلاصه داستان را پیدا می بینید.

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

اگرچه من توصیه می کنم که هنگام شروع CSS خود را با موضوعات مربوط به مرورگر نگران نکنید ، اما مهم است که بدانید مرورگرها به طور پیش فرض برخی از عناصر html را به یک استایل ارائه می دهند.

برای توصیف این ، سند html ساده را در زیر در نظر بگیرید

<html>

 <head>

   <title>Default Browser Styles</title>

   <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.js”></script>

 </head>

 <body>

    <h1>Heading ۱</h1>

    <h2>Heading ۲</h2>

    <h3>Heading ۳</h3>

    <h4>Heading ۴</h4>

    <h5>Heading ۵</h5>

    <h6>Heading ۶</h6>

    <p>Paragraph – Lorem ipsum dolor sit amet, <a href=”#”>link</a>! Consectetur adipisicing elit. Nisi voluptatem dignissimos non totam id, cum doloribus minima illum sequi provident similique ipsam porro ducimus animi nemo ipsum corporis aliquid culpa.</p>

    <p>Paragraph – Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatem dignissimos <a href=”#”>another link</a>! Non totam id, cum doloribus minima illum sequi provident similique ipsam porro ducimus animi nemo ipsum corporis aliquid culpa.</p>

    <ul>

        <li>unordered list</li>

        <li>unordered lis</li>

        <li>unordered lis</li>

    </ul>

    <ol>

        <li>ordered list</li>

        <li>ordered list</li>

        <li>ordered list</li>

    </ol>

 </body>

</html>

در برگه کد بالا ، هیچ CSSی اعمال نشده است. فقط HTML ساده و قدیمی. با این حال ، عناصر html به صورت پیش فرض استایل می شوند.

هیچ رنگی یا چیز فانتزی وجود ندارد ، اما با یک نگاه سریع متوجه خواهید شد که هدرها پررنگ هستند. اندازه هدرها از h1 به h6 کاهش می یابد. پاراگراف ها به طور پیش فرض فضای کمی در اطراف خود دارند. پیوندها آبی هستند و همچنین زیرآن ها خط وجود دارد.

ما هیچ یک از اینها را ننوشتیم اما آنها به طرز جادویی وجود دارند.

خوب ، مرورگرها از برخی از استایل های پیش فرض استفاده شده بر روی عناصر html استفاده می کنند. این توضیح می دهد که چرا ما همه آن استایل ها را داریم.

در عمل ، باید برخی از این استایل های پیش فرض را نادیده بگیرید. شما ممکن است نخواهید پیوندهای شما آبی باشد ، یا سربرگ در اندازه خاصی باشد.

بنابراین ، وقتی کار بر روی یک ظاهر طراحی سند را شروع کردید ، وقتی چیزهایی را می بینید که شما در آنجا قرار نداده اید ، منصرف نشوید. احتمالاً از مرورگر مورد استفاده هستند.

تا به حال از ابزارهای توسعه دهنده کروم استفاده کرده اید؟ استفاده از ابزاری مانند این می تواند بسیار مفید باشد. در زیر یک عکس از صفحه نشان داده شده است که یک ظاهر طراحی شده پیش فرض را از مرورگر Chrome بر روی یک عنصر h1 نشان می دهد. آنها به طور معمول استایل های عامل کاربر نامیده می شوند.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا