عند البدء في العمل باستخدام HTML وCSS، ستلاحظ أن بعض الأنماط تُطبَّق على صفحات الويب الخاصة بك حتى قبل كتابة أي كود CSS ; وتُعرف هذه الأنماط باسم "أنماط المتصفح الافتراضية" (default browser styles) أو "أنماط وكيل المستخدم" (user-agent styles).

توفر أنماط المتصفح الافتراضية هذه تنسيقاً أساسياً لضمان عرض عناصر HTML بطريقة قابلة للقراءة عبر جميع المتصفحات.

ومع ذلك، قد تختلف هذه الأنماط قليلاً من متصفح لآخر; ولهذا السبب, من المهم فهمها عند تصميم مظهر متسق لموقعك الإلكتروني.

لنلقِ نظرةً على بعض أنماط المتصفح الافتراضية الشائعة المطبقة على عناصر HTML المختلفة.

تُعد "العناوين" (Headings) من أكثر عناصر HTML استخداماً, وهي مُنسَّقة افتراضياً بـ"أحجام وأوزان" (sizes and weights) متفاوتة.

على سبيل المثال، عادةً ما يكون الوسم h1 (العنوان ذو المستوى الأعلى) بخط عريض وحجم أكبر مقارنةً بالعناوين ذات المستويات الأدنى مثل h2 و h3 وما إلى ذلك.

تساعد "وسوم العناوين" (heading tags) هذه في تحديد التسلسل الهرمي وبنية المحتوى الخاص بك.

يوضح المثال التالي عناصر العناوين الستة جميعها، من h1 إلى h6.

<h1>العنوان 1</h1>
<h2>العنوان 2</h2>
<h3>العنوان 3</h3>
<h4>العنوان 4</h4>
<h5>العنوان 5</h5>
<h6>العنوان 6</h6>
        

معاينة:

من العناصر الأخرى التي تمتلك أنماطاً افتراضية عنصر hr , الذي يُنشئ "خطاً أفقياً" (horizontal rule) يُستخدم غالباً للفصل بصرياً بين أقسام المحتوى; وعادةً ما تُطبّق المتصفحات "نمط خط بسيطاً" (simple line style) على هذا العنصر.

لفهم الأمر بشكل أفضل، دعنا نلقي نظرة على مثال الكود هذا:

<p>الفقرة 1</p>
<p>الفقرة 2</p>
<hr>
<p>الفقرة 4</p>
<p>الفقرة 5</p>
        

معاينة:

يظهر الخط الأفقي كخط رفيع مع وجود مسافة أعلى النص وأسفله للفصل بين أقسام المحتوى.

بعد ذلك، سنلقي نظرة على "عنصر الاقتباس" blockquote .

تُستخدم كتل الاقتباس (Blockquotes) للإشارة إلى جزء من النص يمثل اقتباساً من مصدر آخر; وعادةً ما تقوم المتصفحات بإضافة إزاحة (مسافة بادئة) للنص, وأحياناً تجعله مائلاً.

تساعد "المسافة البادئة" (indentation) في تمييز "الاقتباسات" (blockquotes) المنسقة ككتل مستقلة عن بقية النص, مما يوضح أن هذا المحتوى مقتبس من مصدر آخر.

لنلقِ نظرةً على مثال الكود هذا:

<p>الفقرة 1</p>
<p>الفقرة 2</p>
<blockquote>أنا أفكّر، إذن أنا موجود. (رينيه ديكارت)</blockquote>
<p>الفقرة 4</p>
<p>الفقرة 5</p>
        

معاينة:

عنصر آخر يتمتع بأنماط افتراضية هو عنصر الرابط <a> , الذي يُنسَّق بلون أزرق افتراضي (default blue color) وخط تحتي (underlining) لتمييزه كرابط.

لنلقِ نظرةً على مثال HTML التالي:

<p>الفقرة 1</p>
<p>الفقرة 2</p>
<a href="https://openarabtech.github.io/CSSVerse/">تعلم سي.اس.اس بالعربية</a>
<p>الفقرة 4</p>
<p>الفقرة 5</p>
        

معاينة:

يحتوي الكود المذكور أعلاه على أربعة عناصر فقرة (paragraph elements) تتوسطها عنصر رابط (anchor element). وقد تم تنسيق عنصر الرابط باللون الأزرق مع خط تحته، وذلك لتوجيه المستخدمين إلى الصفحة الرئيسية في موقع CSSVerse.

وأخيراً، سنلقي نظرة على "عناصر القوائم غير المرتبة والمرتبة" (unordered and ordered list elements) .

تُضيف المتصفحات تنسيقاً أساسياً إلى "القوائم" (lists) ، بما في ذلك المسافة البادئة والرموز النقطية أو الأرقام، وذلك بناءً على ما إذا كنت تستخدم قائمة غير مرتبة ul أو قائمة مرتبة ol.

لنلقِ نظرةً على مثال:

<p>فقرة نموذجية</p>
<ol>
 <li>العنصر 1</li>
 <li>العنصر 2</li>
 <li>العنصر 3</li>
</ol>
<ul>
 <li>عنصر</li>
 <li>عنصر آخر</li>
 <li>عنصر آخر</li>
</ul>
<p>الفقرة الختامية</p>
        

معاينة:

في مثال الكود أعلاه، نستخدم قائمة غير مرتبة وقائمة مرتبة. وستكون كلتا القائمتين مُزاحتين قليلاً نحو اليسار بشكل افتراضي.

في كل هذه الأمثلة، رأيتَ كيف طبّق المتصفحُ مسافاتٍ افتراضيةً وأحجامَ خطوطٍ وأوزانًا متفاوتةً على عناصر HTML هذه.

في الدروس اللاحقة، ستتعلم كيفية إعادة تعيين بعض هذه الأنماط الافتراضية باستخدام "إعادة تعيين سي.اس.اس" (CSS reset).