جدول الدروس

دروس CSS المتقدمة

• كتاب CSS الفوقي
• مقدمة إلى CSS
• قواعد الأساس لـ CSS
• قواعد متقدمة لـ CSS
• مقاربات مختارة من CSS
• مقاربات id لـ CSS
• مقاربات الفئات لـ CSS
• إنشاء CSS
• خلفيات CSS
• نصوص CSS
• خطوط CSS
• قوائم CSS

نموذج الحجرة CSS

• مقدمة إلى نموذج الحدود لـ CSS
• النصابات الداخلية لـ CSS
• الحدود لـ CSS
• النصابات الخارجية لـ CSS
• مقاربة النصابات الخارجية لـ CSS

توضيح CSS

• مقدمة إلى التوضيح لـ CSS
• التوضيح النسبي لـ CSS
• التوضيح المطلق لـ CSS
• الدفق الفلاحي لـ CSS

محددات CSS

• مقاربات العناصر لـ CSS
• مقاربات تجميع المزينات لـ CSS
• تفصيل مقاربات الفئات لـ CSS
• تفصيل مقاربات id لـ CSS
• تفصيل مقاربات المزينات الخاصية لـ CSS
• مقاربات المزينات الذرية
• مقاربات الأبناء لـ CSS
• مقاربات الأشقاء المتتابعين لـ CSS

المقررات الإضافية

التوصيات الدراسية:

• مكتبة CodeW3C.com

الحدود للعنصر هي خط أو أكثر يحيط بمحتوى العنصر والهوامش الداخلية.

تسمح خصائص الحدود في CSS بتحديد نمط، عرض، ولون حدود العنصر.

الحدود لـ CSS

في HTML، نستخدم الجداول لإنشاء حدود حول النص، ولكن من خلال استخدام خصائص الحدود في CSS، يمكننا إنشاء حدود رائعة يمكن تطبيقها على أي عنصر.

الحدود للعنصر هي خط أو أكثر يحيط بمحتوى العنصر والهوامش الداخلية. هي حواف حول محتوى العنصر والهوامش الداخلية.

حول الحدود

للكل حافة ثلاثة جوانب: العرض، النمط، واللون. في الصفحات القادمة، سنوضح لكم هذه الجوانب الثلاثة.

الحدود والظل

ذكرت معيار CSS أن الحدود تُرسم فوق الظل. هذا مهم لأن بعض الحدود تكون "مقطوعة" (مثل حافة النقاط أو الحافة الرقيقة)، يجب أن يظهر ظل العنصر بين أجزاء الحدود المرئية.

ذكرت CSS2 أن الظل يغطي فقط الهوامش الداخلية وليس الحدود. لاحقًا قام CSS2.1 بتصحيح ذلك: الظل للعنصر هو محتوى العنصر والهوامش الداخلية والحدود.

نمط الحدود

النمط هو من أكثر جوانب CSS أهمية، ليس لأن النمط يتحكم في عرض الحدود (بالطبع، النمط يتحكم في عرض الحدود)، ولكن لأن بدون نمط لن تكون هناك حدود على الإطلاق. خصائص border-styleتم تعريف عشرة أنماط مختلفة ليست موروثة، بما في ذلك none.

على سبيل المثال، يمكنك تعيين حافة صورة كـ outset لجعلها تبدو مثل "مفتاح ناتئ":

a:link img {border-style: outset;}

تعريف أنماط متعددة

يمكنك تعيين أنماط متعددة للحدود، مثل:

p.aside {border-style: solid dotted dashed double;}

القاعدة العليا هنا تعين أربعة أنماط حدود لفئة الـ aside: حافة سوداء، حافة نقاط، حافة رقيقة وحافة مزدوجة.

لقد رأينا هنا أن القيمة تتبع الترتيب top-right-bottom-left، وقد رأينا هذا الترتيب أيضًا عند مناقشة تعيين أكثر من قيمة لتحديد الهوامش الداخلية المختلفة.

تعريف النمط الجانبي

إذا كنت ترغب في تعيين نمط الحدود لجانب معين من حجرة العنصر بدلاً من تعيين نمط الحدود للجانبين الأربعة، يمكنك استخدام خصائص الحدود الجانبية المحددة أدناه:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

لذلك، هذان الطريقتان متساويتان:}}

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

ملاحظة:إذا كنت تستخدم الطريقة الثانية، يجب أن تضع خصائص الجانب الواحد بعد الخصائص المختصرة. لأن إذا وضعت خصائص الجانب الواحد قبل border-style، فإن قيمة الخصائص المختصرة ستغطي قيمة الجانب الواحد none.

عرض الحدود

يمكنك خصائص border-widthتعيين عرض الحدود.

هناك طريقتان لتعيين عرض الحدود: يمكنك تحديد قيمة طول، مثل 2px أو 0.1em، أو استخدام أحد الكلمات المفتاحية الثلاثة، وهي thin و medium (القيمة الافتراضية) و thick.

ملاحظة:لم يحدد CSS عرض الكلمات المفتاحية الثلاثة بشكل دقيق، لذا قد يتعين على وسيط المستخدم تعيين thin و medium و thick على 5px و 3px و 2px، بينما قد يتعين على وسيط مستخدم آخر تعيينهم على 3px و 2px و 1px.

لذلك، يمكننا تعيين عرض الحدود مثل هذا:

p {border-style: solid; border-width: 5px;}

أو:

p {border-style: solid; border-width: thick;}

تحديد عرض الجانب

يمكنك تعيين عرض جوانب العنصر وفقًا للترتيب top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

يمكن أيضًا اختصار الأمثلة السابقة (هذا النوع من الكتابة يُسمىنسخ القيمة）：

p {border-style: solid; border-width: 15px 5px;}

يمكنك أيضًا تعيين عرض كل جانب من جوانب الحدود باستخدام الخصائص التالية:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

لذلك، فإن القاعدة التالية هي نفسها كما في الأمثلة السابقة:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

بدون حدود

في الأمثلة السابقة، لقد رأيت أنك يجب تعيين نمط الحدود لعرض نوع معين من الحدود، مثل solid أو outset.

إذا تم تعيين border-style على none، فماذا سيحدث؟

p {border-style: none; border-width: 50px;}

على الرغم من أن عرض الحواف هو 50px، ولكن نمط الحواف تم تعيينه على none. في هذه الحالة، لن يختفي فقط نمط الحواف، بل سيصبح عرضها 0 أيضًا. اختفت الحواف، لماذا؟

هذا يرجع إلى أن إذا كان نمط الحواف هو none، أي أن الحواف لا وجود لها، فإن عرض الحواف لا يمكن أن يكون، لذلك يتم تعيين عرض الحواف على 0، مهما كان التعريف السابق.

تذكر هذا الأمر非常重要. في الواقع، نسيان إعداد نمط الحواف هو خطأ شائع. وفقًا للقواعد التالية، لن يكون هناك أي حواف على جميع العناصر h1، ناهيك عن عرض 20 بكسل:

h1 {border-width: 20px;}

بما أن قيمة border-style هي none افتراضيًا، إذا لم يتم إعداد النمط، فإنه يعادل border-style: none.لذلك، إذا كنت ترغب في ظهور الحواف، فعليك إعداد نمط الحواف.

لون الحواف

تسهل CSS إعداد لون الحواف بسهولة. يستخدم CSS نمطًا بسيطًا خصائص border-color، ويمكنها استقبال أقصى 4 قيم ألوان.

يمكن استخدام أي نوع من قيم الألوان، مثل الأسماء المحددة، والأرقام السداسية وأرقام RGB:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

إذا كان قيمة اللون أقل من 4، فإن تأثير التكرار سيتكون. على سبيل المثال، يحدد النوع التالي لإنشاء حواف الجانب العلوي والسفلي للفقرة باللون الأزرق، وحواف الجانبين باللون الأحمر:

p {
  border-style: solid;
  border-color: blue red;
  }

ملاحظة:لون الحواف الافتراضي هو لون الخلفية للعنصر نفسه. إذا لم يتم إعداد لون الحواف، فإنه سيكون نفس لون النص للعنصر. من ناحية أخرى، إذا لم يكن العنصر يحتوي على أي نص، على سبيل المثال، إذا كان جدولًا يحتوي فقط على الصور، فإن لون حواف هذا الجدول هو لون النص للعنصر الأب (بسبب توريث color). هذا العنصر الأب يمكن أن يكون body أو div أو جدول آخر.

تحديد لون الجانب

هناك أيضًا بعض خصائص ألوان الحواف الجانبية. مبدأها مشابه لخصائص النمط والعرض الجانبية:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

لإعداد حواف صريحة سوداء للعنصر h1، وحواف اليمنى صريحة حمراء، يمكنك تحديد ذلك كالتالي:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

حواف شفافة

لقد تحدثنا عن ذلك للتو، إذا لم يكن هناك نمط حواف، فإن عرضها يكون صفرًا. ولكن هناك بعض الحالات التي قد ترغب في إنشاء حواف غير مرئية.

CSS2 أضاف لون حواف الشفاف. هذه القيمة تستخدم لإنشاء حواف غير مرئية بعرض معين. انظر إلى المثال التالي:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

لقد قمنا بتعريف النمط التالي للروابط العلوية:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

جربها بنفسك

بمعنى ما، باستخدام transparent، يمكن استخدام الحافات مثل الهوامش الداخلية الإضافية؛ بالإضافة إلى ميزة أخرى، وهي أن يمكنك جعلها مرئية عند الحاجة. هذه الحافات الشفافة تساوي الهوامش الداخلية لأن خلفية العنصر تنتقل إلى منطقة الحافات (إذا كان هناك خلفية مرئية)

ملاحظة هامة:قبل IE7، لم يقدم IE/WIN دعمًا لـ transparent. في الإصدارات السابقة، كان IE يضبط لون الحافات بناءً على قيمة color للعنصر.

خصائص حواف CSS

مجلة الأدوات

دليل مرجعي CSS

أمثلة CSS

اختبار CSS

دليل CSS

روابط الممولين