بسم الله الرحمن الرحيم ، في محاولة لكسر روتينية التطبيقات الموضوعة للجافا سكربت ، سأحاول اليوم وضع تأصيل للغة الرائعة css حيث يمكن الرجوع إليه عند المتهاة أو النسيان ، كما ساحاول مناقشة بعض الاوامر المجهولة عند الأغبلية ، ساحاول تفصيل طريقة استعمال أي selecteur في اللغة ، سواء من الجيل الثاني أو الثالث لها ، كذلك و تبيين أنواعها و آالية عملها بالكامل إن شاء الله ، الأفكار :

في css2.1

• *
• <
• +
• [att]
• [att=val]
• [att~=val]
• [att|=val]
• :first-child
• :lang
• :first-line
• :first-letter
• :before و :after

في css3

• الجديد في att
• nth-child()
• ~
• :checked
• :empty
• الانتقاء بالاستثناء
• ::selection

الـ selecteur او في ترجمة حرفية ‘( المنتقى ) حيث يتم عملية من انتقاء العناصر عن طريق قواعد محددة و مراحل تم تطويرها في لغة css ، فمثلا لما أكتب التالي :

h1 { color: red; }
h2 { color: red; }
h1, h2 { color: red; }

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

h1 { font-family: sans-serif; }

فقد عملت عملية من الانتقاء بالنوع ، أي نوع الخطوط ،وهكذا ، لكن هذه الأقسام هي معلومة عند الكل ولو بالفطرة ، حتى لو لم يعلم أنواع الانتقاءات العادية ، اليوم سنحاول تسليط على الضوء كل الأنواع المجهولة في الجيلين الثاني و الثالث من css ، فنبدأ على بركة الله .

في css2.1

• * : هذه تدل على الكل ، حيث يتم انتقاء كل ما هو من نفس الكلاس أو id

  *.warning
  .warning
  /* السطرين متساويين */

  لكنها لا تستعمل كثيرا لانها توافق التي بعدها .

• < : او ما تسمى بانتقاء الابن ، حيث لا يتم اختيار من عنصر معين إلا العناصر التي هي عبارة عن طفل بداخله ، مثال :

  <div class="text">
  <p>je m'appel <strong> mohamed chater </strong></p> 
   en plus mon pseudo <strong>Fez-Soft</strong>
  </div>
   
  و التنسيق :
  <pre lang="css">
  .text > strong { background-color: blue; }

  حيث ان الخلفية الزرقاء لن تطبق على جميع strong و انما فقط على الذي هو طفل بداخل div.text وهو mohammed chater بينما لن تطبق على Fez-Soft لانه ليس بابن داخل النص ،

  خاصية الانتقاء الابن غير مدعومة في ie6

• + : او ما يسمى بالانتقاء بالتتابع ، حيث أنني لما اكتب التالي :

  h1 + h2 { background-color: blue; }

  فإنه في الأمر التالي سأطبق خلفية زرقاء على العناوين من نوع h2 التي تتبع h1 ، اما التي لا يسبقها h1 فلن يطبق عليها شيء من هذا السطر ،
  هذه كذلك غير مدعومة من ie6

• [att] : حيث نعين العنصر أولا ، ثم نوع attribut التي لابد من أن يتوفر عليها ليطبق عليه التنسيق ، مثال :

  a[title] { background-color: red; }

  سيتم تطبيق الخلفية الحرماء على الروابط التي تحتوي على وصف title ، أما اللتي لا تحتوي على الوصف title فلن يتم تطبيق التنسيق التالي عليها

• [att=val] : زيادة في التعمق في الشروط ،فإننا نشترط على العنصر الفلاني أن يحتوي على attribut الفلاني بالقيمة الفلانية ، مثلا

  a[rel=external] { background-color: red; }

  حيث لن يتم تطبيق الخلفية الحمراء إلا على الروابط التي بها rel=”external”

• [att~=val] : مثل التي قبلها تماما ، إلا انها تدعم القيم التي بينها مسافة ، مثلا في كود html عندنا التالي :

  <p class="all text"></p>

  حيث توجد مسافة بين text و all ، وهذا ما يميز هذا الانتقاء عن الذي قبله ، انه يأخذ القيم ولو كان بينها مسافة ، فيكون في قيم التنسيقات التالي :

  p[class~=all] { background-color: red; }

• [att|=val] : هنا يتم انتقاء العناصر التي في قيم أوامرها عارضة صغيرة ( – ) ، مثلا :

  a[hreflang|=en] { background-color: red; }

  حيث ان الروابط التي تكون بها عناوين المواضيع تكون بها عوارض صغيره للفصل بين الكلمات ، كذلك نوع اللغة ، يكون مثلا en-US أو en-GB
  ملاحظة ، لا ننس أنه بإمكاننا الجمع بين أكثر من انتقاء في سطر واحد :

  a[title][rel~=external] { background-color: red; }

:first-child : و تطبق على اول عنصر طفل في مجموعة العناصر الموجودة ، مثلا :

div > p:first-child { text-indent: 10px; }

• :lang : انتقاء باللغة ،

  p:lang(en) { background-color: red; }

  حيث في بعض المرات ، نضطر إلى عمل جملة بلغة أخرى و نعطيها قيمتها في lang

• :first-line : انتقاء السطر الأول من فقرة معينة لإعطاءه تنسيقا معينا :

  p:first-line { text-transform: uppercase; }

• :first-letter : انتقاء الحرف الأول فقط من كلمة الأولى في فقرة :
• :before و :after ، لا داعي للتكرار ، فقط فصلت فيهما جيدا مع المثال في هذا الدرس

إلى هنا أكون قد انهيت الانتقاء و انواعه في css2.1 ، للنتقل للجيل الجديد .

في css3

• الجديد في att : و هي ثلاثة اوامر ، اثنان منها ستجدها مفصلة في هذا الدرس ، او بطريقة جافا سكربت ، و الثالث هو [att*="val"] ، حيث يتم انتقاء العناصر التي التي تحتوي على الأقل كلمة من سلسلة الكلمات التي اشترطتها في التنسيق :

  a[title*="hello"] { font : 12px verdana }

  سيتم تطبيق التنسيق فقط على الروابط التي بها وصف title تكون فيه كلمة hello

• ~ : حيث يتم الانتقاء عبر التتابع ، مثلا /:

  div~img { border: 1px solid #ccc; }

  حيث سأطبق حدودا رمادية على الصور التي تتبع div مباشرة ، شيء طبيعي ان يكون العنصرين من نفس المجموعة .

• nth-child() : لانتقاء العناصر الصغيرة ن داخل ( جدول مثلا ) عن طريق ترتيب ، هل هو فردي ام زوجي ، مثلا ، عندي جدول و به عدد من الأسطر ، فاول سطر فردي لانه رقم 1 ، و الثاني زوجي لأنه رقم 2 و هكذا ، فردي زوجي ، قد احتاج لإعطاء جداولي نوعا من التنسيق الديناميكي الذي يتتبع نوع الترتيب ،
  سنتذكر هنا شيئا من الرياضيات ، حيث الأعداد الفردية نرمز لها بـ 2n+1 و الزوجية بـ 2n ، سنحتاج هذه القاعدة ، إليك الامثلة :

  tr:nth-child(2n+1) /* الأسطر التي في ترتيب فردي */
  tr:nth-child(2n) /* الأسطر التي في ترتيب زوجي */

  كما يمكنني الرمز للفردي بالقيمة odd و الزوجي بالقيمة even

  tr:nth-child(odd) /* الأسطر التي في ترتيب فردي */
  tr:nth-child(even) /* الأسطر التي في ترتيب زوجي */

• :checked : حيث يتم الانتقاء عن طريق العناصر المعلمة في حالة cheked مثل input
• :empty : حيث يتم انتقاء العناصر الفارغة ، التي ليس يها محتوى أو أي قيمة ، وكذلك العناصر التي ليست من فئة ابن، يعني لا تتبع أي عنصر ققبلها
• الانتقاء بالاستثناء : حيث يتم الانتقاء عن طريق استثناء عنصر معين ، او كلاس معين ، مثلا :

  p:not([class*="lead"]) { color: black; }

  سيتم تطبيق اللون الأسود في الكلمات التي في كل الفقرات ما عدى الفقرة P التي تأخد الكلاس lead

• ::selection ، هنا يتم انتقاء العناصر التي في حالة select ، مثلا عندها نختار جملة معينة من نص معين لنسخها ، في هذه الحالة سأطبق عليها تنسيقا خاصا بها :

  ::selection { background-color: red; }

  إلى هنا ، آمل أن اكون قد بينت الأصول في selecteur على أمل الالتقاء في درس آخر إن احيانا الله عز وجل
  و السلام عليكم ورحمة الله وبركاته

الوسوم: css, css2.1, css3, selecteur, تأصيل

هذه التدوينة نُشرت في السبت, 14 نوفمبر, 2009 عند 9:09 ص و مصنفة تحت تصنيف css , xhtml. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.