مازلنا نقدم لكم المحاضرات التي تقدم في دورة تصميم وبرمجة المواقع التي تقدم على منصة رواق والتي يقدمها ايمن احمد القضاة المحاضر في عمادة التعليم الإلكتروني والتعلم عن بعد - جامعة الدمام، ولمناقشة هذه الموضوعات على #برمجة_المواقع_مادة_رواق على تويتر.
في
هذه المحاضرة سوف نتعلم معًا طرق كتابة ال CSS Selector (relationship html tags) ولقد تعلمنا سابقًا إحدى طرق الكتابة وهي:
section
p
{.....}
في هذه المرة سنتاول الطرق التالية:
section>
p {.....}
section+
p
{.....}
section~
p
{.....}
section:
p
{.....}
نستطيع أن نقسم الأوسمة إلى نوعين أوسمة عامة تفيدنا في تقسيم
الصفحة وأوسمة خاصة تدخل في تكوين محتويات كل جزء من أجزاء الصفحة وللتعرف أكثر
على هذه المعلومة أرجوا الرجوع إلى درس ما
هو الـ semantic
web.
فلنتخيل معًا أننا نتعامل معا وسام عام مثل الـ section أو الـ header أو Aside .....
|
<section>
<p>
<p> </p>
<p> </p>
</p>
<p>
<p> </p>
<p> </p>
</p>
</section>
|
سنلاحظ في
هذا المثال أن هناك وسام عام اسمه section بداخله
مقاطع نصية وبداخل كل مقطع نصي مقاطع أخرى تم تلوينها باللون الأحمر
المقصود هنا أن أوسمة المقاطع النصية الرئيسية
والملونة باللون الأسود هي ابناء مباشرين للمقطع العام section أما
الأوسمة الملونة باللون الأحمر فهي ابناء غير مباشرين للوسام العام section.
ولهذا
فإن استخدام علامة > تعني أنك تحدد للمتصفح أن يقوم بتطبيق
قواعد ال CSS على الأوسمة المباشرة للقطاع Section وليس
الأوسمة الفرعية الملونة باللون الأحمر.
أما لتحديد أول نص يأتي مباشرة بعد الـ Section دون غيره فعلينا استخدام علامة +
أما لتحديد كل النصوص الداخلة في الـSection حتى وإن كان بينها فواصل فنستخدم علامة ~
أما لتحديد نص محدد حسب موقع فإننا نستخدم النقتطين :
هكذا
section p:
first-of-type}
section p:
last-of-type}
|
نفترض لو أن لدي قائمة سواء كانت مرقمة أو غير مرقمة تحتوي على خمسة نقاط مثل القائمة التالية:
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
هناك عدد من القواعد من الممكن أن تفيدنا في تنسيق هذه القائمة وهي:
|
لتحديد أحد ابناء هذه القائمة دون الآخرين حسب موقعه
في البداية أو النهاية
|
ol li: first-child {....}
ol li: last-child {....}
|
|
لو أننا نريد أن نحدد الأرقام الفردي
|
ol li: nth-child (2n-1)
|
|
لتحديد الأعداد الزوجية
|
ol li: nth-child (2n)
|
|
لتحديد أحد ابناء القائمة حسب الرقم
|
ol li: nth-child (3)
|
|
لتعميم مجموعة من الأوامر على القائمة مع
استثناء أحد أفرادها
|
: not ()
حيث نضع ما نريد استثناءه بين قوسين
|
|
|
|
|
|
|
التعامل مع وسام (Anchor element):
هناك أربع حالات لشكل الرابط في الصفحة
|
الشكل المعتاد للرابط
|
a: link {....}
|
|
رابط تمت زيارته
|
a: visited {....}
|
|
عند مرور سهم الفارة على
الرابط
|
a: hover {....}
|
|
حالة الرابط لحظ الضغط
عليه
|
a: active {....}
|
ما هو الـ div؟
الـ
div وسيلة لاختيار مجموعة من الأوسمة المتتالية حتى
نعطيها قيم واحدة بواسطة لغة CSS كما في المثال التالي:
|
لاحظ
أننا اخترنا ثلاث عناصر ووضعناها داخل الـ div.
div }
CSS rules
{
|
<div>
<p>…..</p>
<a href=”#”>click</a>
<p>….</p>
</div>
|
ما
هو الـ span؟
يفيدنا
الـ span في تنسيق الأوسمة بشكل جيد، مثل أن نكتب
جملة "برمجة مواقع الإنترنت" مع مراعاة
أن كلمة الانترنت مكتوبة باللون الأحمر دون بقية الجملة.
|
span }
color: red;
{
|
<p> برمجة مواقع
<span>الإنترنت</span> </p>
|
إلى أن نلتقي للمزيد من المقالات أرجوا العودة إلى
روابط الاستوديو المختلفة على الفيس بوك على جوجل بلاس على تويتر على بيهانسا
ليست هناك تعليقات:
إرسال تعليق