CSS تزيين المحتوى

CSS الصفة المستعارة

آخر تحيين: 05-01-2015

CSS تزيين اللوائح CSS الخلفيات


سنتعرف على طريقة خاصة لتطبيق الأنماط على محتوى الوسوم . و تخُصّ الأنماط التي لا يمكن تطبيقها مباشرة على الوسوم . مثلا تطبيق الأنماط على الحرف الأول أو السطر الأول من الفقرة أو تغيير نمط الرابط عندما نضع عليه مؤشر الفأرة ...
. لن نتعرّف على وسوم و لا خاصيات جديدة في هذا الدّرس ، سنكتفي بالمعارف السابقة فقط


تذكير :
لنأخذ هذا الرّابط على سبيل المثال :
<a href="www.dorrossinet.com"> موقع التعلم الذاتي </a>
سيظهر على جل المتصفّحين بشكل طبيعي على النحو التالي : موقع التعلم الذاتي بلونه الأزرق الطبيعي و وُجود خط تحته . و يمكننا أن نُطبّق عليه بعض الأنماط مثلا لحذف الخط السفلي نستعمل الخاصية ;text-decoration:none . كما نستطيع تغيير اللون أو إضافة خلفية للرابط . جرّبوا هذه الشّيفرة مثلا :

a
{
  text-decoration: none;
  font-weight: bold;
  background-color:#000000;
  color: lime;
}

كل هذا لإنعاش الذاكرة . سنرى طرقا أخرى لإضافة الأنماط على و سم الرابط


css تعريف الصفة المستعارة : pseudo-class

لقد زُرتم مواقع عدّة ، و رأيتم روابط مُنمّقة بتأثيرات جذّابة . عندما تضعُ مؤشّر الفأرة على الرابط يتغير لونُهُ و/أو خلفيته . كما أنّ الروابط التي تمّ نقرها تظهر بلون مغاير على التي لم يتم نقرها بعد ... .
هذا هو محور درسنا . بما أننا لا نستطيعُ تطبيق هذه الأنماط مباشرة على الوسم . سنلجأ إلى استعمال صفة مستعارة . سميت هكذا لأنها شبيهة بالصفة class مع فارق بسيط :
لتطبيق الأنماط على الصفة class ، نكتب قيمتها مع البدأ بنقطة .myClass {/* شيفرة css */}
أما إذا استخدمت نفس قيمة class على وسوم مختلفة :

<p class="myClass ">...<p>
<div class="myClass "> ... </div>
<h1 class="myClass "> ... </h1>

. مثلا ، لتطبيق النمط على الصفة class الموجودة داخل وسم الفقرة فقط . يجب أن أحددها في شيفرة css كالتالي :

p.myClass {
   // css شيفرة
}

بهذه الطريقة . الأنماط التي سنطبقها على myClass لن تشمل وسمي div و h1 في مثالنا .
نستعمل نفس الطريقة لكتابة الصفة المستعارة . لكن بدل و ضع نقطة واحدة .myClass قبل قيمة الصفة ، نضع نقطتين :pseudoClass

p:pseudoClass {
   // css شيفرة
}

قيم الصفة class لا متناهية ، لأنك من يحددها . أما قيم الصفة المستعارة فجد محدودة ، و هي عبارة عن كلمات باللغة الإنجليزية تدلُّ و تعني تماماً ما نريد فعله .


لتزيين الروابط نستعمل القيم المستعارة التالية :

css القيم المستعارة لتزيين الروابط
القيمةالمعنىالشرح
:linkالرابطروابط الصفحات التي لم نقم بعد بزيارتها
:hoverحام ، يحوم حول = طاف ، يطوفبكل بساطة ، تعني عندما نضع مؤشر الفأرة على الرابط
:visitedتمت زيارتهروابط الصفحات التي تمت زيارتها
:activeنشيطاللّحظة التي ننقر فيها الرابط

مثال الإستعمال :

a:visited {color: red;}

في هذه الحالة جميع روابط الصفحات التي قمت بزيارتها ، ستتحول إلى اللون الأحمر .
لكي لا نطبق نفس النمط على جميع روابط موقعنا . يمكننا طبعا تمييز الروابط المعنية بالصفة class مثلا :

a.a7mar:visited {
    color: red;
}
<a class="a7mar" href="#">CSS Pseudo Class</a>

بالنسبة ل a:active ،لا يمكننا ملاحظة تأثير النمط جيّدا ، لأنه يتمُّ أثناء نقر الرابط . وهذه العملية تنجز في أقل من ثانية . لتجرّبوا ذلك ، أضيفوا لونا مختلفا على سبيل المثال و عندما تنقُرون الرابط حافظوا على النّقر حتى تتمعّنوا جيداً في إنجازكم
يجب استعمال هذه الأنماط على الترتيب التالي حتى تعمَلَ بشكل جيد
  • a:link
  • a:visited
  • a:hover
  • a:active

تزيين الفقرات

لتزيين الفقرات ، نستعمل قيم الصفة المستعارة التالية :

css القيم المستعارة لتزيين الفقرات
القيمةالمعنىالشرح
:first-letterالحرف الأوللتطبيق الأنماط على الحرف الأول من جميع الفقرات
:first-lineالسطر الأوللتطبيق النمط على السطر الأول من جميع الفقرة
:first-childالإبن الأولالكلمة child تعني طفل أي ابن . first-child : تعني الإبن الأول أي أنّ النمط سيطبق فقط على الوسم الأول .
مثلا إذا كانت لدينا ثلاث فقرات داخل نفس الوسم الأب div . فالنمط سيطبق على الفقرة الأولى فقط
p:first-letter /* تزيين الحرف الأول من جميع الفقرات */
{
   font-weight:bold;  
   font-size:3em;
   font-family:"Times New Roman",Serif;
   color:red;
}
p:first-line  /* تزيين السطر الأوّل من جميع الفقرات */
{
   font-family:"Comic Sans Ms" ,Serif;
   font-style:italic;
   font-size:0.8em;
   color:blue;
}
p:first-child  /* تزيين الفقرة الأولى من فقرات الوسم الأب */
{
    background-color:black;
    color:lime; /* اللّون الفُستقي */
}
مشاهدة النتيجة


لتزيين الوسوم الأخرى نستعمل قيم الصفة المستعارة التالية :

css القيم المستعارة لتزيين باقي الوسوم
القيمةالمعنىالشرح
:hoverالمرور فوقعندما نضع مؤشر الفأرة على المحتوى . نستعملها غالبا على وسوم الروابط و الجداول و اللوائح
css2 :before
css3 ::before
قبلإضافة محتوى قبل النص الأصلي للوسم
css2 :after
css3 ::after
بعدإضافة محتوى بعد النص الأصلي للوسم
 q::before { 
  content: '\201D';
  color: blue;
  font-weight:bold;
  font-size:24px;
 }
 q::after {
  content: '\201C';
  color: red;
  font-weight:bold;
  font-size:24px;
 }
مشاهدة النتيجة