وقتی شروع به کار با HTML و CSS میکنید، متوجه خواهید شد که برخی استایلها حتی قبل از اینکه کدی در CSS بنویسید، روی صفحات وب شما اعمال میشوند. به این استایلها «استایلهای پیشفرض مرورگر» یا «استایلهای User-Agent» گفته میشود.
این استایلهای پیشفرض، قالببندی اولیهای را ارائه میدهند تا اطمینان حاصل شود که عناصر HTML در تمام مرورگرها به شکلی خوانا نمایش داده میشوند.
با این حال، این استایلها ممکن است در مرورگرهای مختلف تفاوتهای جزئی با یکدیگر داشته باشند؛ به همین دلیل است که هنگام طراحی برای داشتن ظاهری یکسان در وبسایت، درک این استایلها بسیار مهم است.
بیایید نگاهی به برخی از استایلهای پیشفرض مرورگر که روی عناصر مختلف HTML اعمال میشوند، بیندازیم.
سرفصلها (Headings) یکی از پرکاربردترین عناصر HTML هستند و بهطور پیشفرض به گونهای استایلدهی شدهاند که اندازهها و ضخامتهای (Weights) متفاوتی داشته باشند.
برای مثال، h1 (سرفصل با بالاترین سطح) معمولاً پررنگ (Bold) و در مقایسه با سرفصلهای پایینتر مثل h2، h3 و غیره، دارای اندازه فونت بزرگتری است.
این تگهای سرفصل به تعریف سلسلهمراتب و ساختار محتوای شما کمک میکنند.
مثال زیر تمام شش عنصر سرفصل از h1 تا h6 را نشان میدهد.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>یکی دیگر از عناصری که استایلهای پیشفرض دارد، عنصر hr است که یک خط افقی ایجاد میکند و اغلب برای جدا کردن بصری بخشهای مختلف محتوا به کار میرود. مرورگرها معمولاً یک استایل خطی ساده را روی این عنصر اعمال میکنند.
برای درک بهتر، بیایید نگاهی به این مثال کد بیندازیم:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<hr>
<p>Paragraph 3</p>
<p>Paragraph 4</p>خط افقی به صورت یک خط نازک با فاصله در بالا و پایین متن ظاهر میشود تا بین بخشهای محتوا تمایز ایجاد کند.
سپس، به عنصر blockquote نگاهی میاندازیم.
از بلاککوتها (نقلقولها) برای نشان دادن بخشی از متن که از منبع دیگری نقل شده است، استفاده میشود. مرورگرها معمولاً تورفتگی (Indentation) اضافه میکنند و گاهی اوقات متن را مورب (Italic) میکنند.
این تورفتگی کمک میکند تا بلاککوتها از بقیه متن متمایز شوند و مشخص شود که این محتوا از منبع دیگری نقل شده است.
بیایید نگاهی به این مثال کد بیندازیم:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<blockquote>I think, therefore I am. (Rene Descartes)</blockquote>
<p>Paragraph 3</p>
<p>Paragraph 4</p>در مثال بالا، عنصر blockquote باعث ایجاد تورفتگی در متن میشود که توسط استایلهای پیشفرض مرورگر اعمال شده است.
عنصر دیگری که استایلهای پیشفرض دارد، عنصر انکر (<a>) است که بهطور پیشفرض با رنگ آبی و زیرخط (Underline) استایلدهی میشود تا به عنوان یک لینک قابل تشخیص باشد.
بیایید نگاهی به مثال HTML زیر بیندازیم:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<a href="https://freecodecamp.org/">Visit the freeCodeCamp learn page</a>
<p>Paragraph 3</p>
<p>Paragraph 4</p>کد بالا دارای چهار عنصر پاراگراف است که یک عنصر انکر در وسط آنها قرار دارد. عنصر انکر با رنگ آبی و زیرخط استایلدهی شده تا به کاربران نشان دهد که باید به صفحه آموزش freeCodeCamp بروند.
در نهایت، به عناصر لیستهای نامرتب (ul) و مرتب (ol) نگاه میکنیم.
مرورگرها قالببندی اولیهای را به لیستها اضافه میکنند، از جمله تورفتگی و استفاده از گلوله (Bullets) یا اعداد، بسته به اینکه از لیست نامرتب (ul) استفاده میکنید یا لیست مرتب (ol).
بیایید نگاهی به یک مثال بیندازیم:
<p>Sample Paragraph</p>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item</li>
<li>another item</li>
<li>yet another item</li>
</ul>
<p>Ending Paragraph</p>در مثال کد بالا، ما از یک لیست نامرتب و یک لیست مرتب استفاده کردهایم. هر دوی این لیستها بهطور پیشفرض کمی به سمت راست تورفتگی خواهند داشت.
در تمام این مثالها، دیدید که چگونه مرورگر فاصله پیشفرض، اندازههای مختلف فونت و ضخامتها را روی این عناصر HTML اعمال کرد.
در درسهای بعدی، یاد خواهید گرفت که چگونه برخی از این استایلهای پیشفرض را با استفاده از CSS Reset حذف کنید.
سوالات
۱. استایل پیشفرض اعمالشده روی تگهای سرفصل (h1 تا h6) در اکثر مرورگرها چیست؟
- آنها همگی اندازه و ضخامت یکسانی دارند.
- آنها اندازهها و ضخامتهای متفاوتی دارند، به طوری که
h1بزرگترین و پررنگترین آنها است. - تگ
h1مورب است وh6زیرخطدار است. - تمام تگهای سرفصل بهطور پیشفرض وسطچین هستند.
۲. عنصر hr معمولاً در اکثر مرورگرها بهطور پیشفرض چگونه به نظر میرسد؟
- یک خط افقی نازک با فاصله در بالا و پایین.
- یک خطچین که تمام عرض صفحه را میپوشاند.
- یک خط سیاه ضخیم بدون هیچ فاصلهای.
- یک نوار رنگی که بخشها را جدا میکند.
۳. تگهای انکر (a) معمولاً بهطور پیشفرض در مرورگرها چگونه استایلدهی میشوند؟
- پررنگ (Bold) و سبز.
- زیرخطدار (Underline) و آبی.
- مورب (Italic) و قرمز.
- زیرخطدار (Underline) و بنفش.