CSS Styling List With Colors

-

في هذا الدرس نتعرف على كيفية التعديل على الوان List، مع ملاحظة ان اي تعديل يتم على <ol> او <ul> سينعكس بالتأكيد على القائمة بأكملها، بينما أي تعديل على <li> سينعكس على العناصر الفردية داخل <Li>   

تمام نعمل تعديل على مثالنا السابق حتى نفهم الموضوع بشكل أفضل:

عدل ملف ملف HTML السابق المسمى  Lists الى الكود التالي: 


<!DOCTYPE html>
<html>
<head>
<style>
ul.circle {
  list-style-type: circle;
  list-style: inside; 
  color: wheat;
  background-color: gray;
  padding: 10px;
}
ul li{
    background-color: gainsboro;
    color: black;
}
ul.square {
  list-style-type: square;
  list-style: outside; 
}
ol.upper {
  list-style-type: upper-roman;
}
ol.lower {
  list-style-type: armenian;
  
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:(غير مرتبة)</p>
<ul class="circle">
  <li>BMW</li>
  <li>Mercedes</li>
  <li>jaquar</li>
</ul>
<ul class="square">
  <li>BMW</li>
  <li>Mercedes</li>
  <li>jaquar</li>
</ul>
<p>Example of ordered lists:(مرتبة)</p>
<ol class="c">
  <li>BMW</li>
  <li>Mercedes</li>
  <li>jaquar</li>
</ol>
<ol class="lower">
  <li>BMW</li>
  <li>Mercedes</li>
  <li>jaquar</li>
</ol>
</body>
</html>

شغل الصفحة ونشوف النتيجة (الصورة)


طيب نفهم الكود:

عملنا تعديل على الكود الخاص ب ul.circle واضفنا لون للخلفية gray واضفنا لون للخط بقيمة wheat، بالإضافة الى إضافة padding بقيمة 10px 
الكود :

ul.circle {
  list-style-type: circle;
  list-style: inside; 
  color: wheat;
  background-color: gray;
  padding: 10px;
}
التعديل الثاني كان ل <li> التابع ل ul واضفنا لون الخلفية بقيمة gainsboro ولون الخط بقيمة black
الكود:

ul li{
    background-color: gainsboro;
    color: black;
}
لاحظ هون كتبنا الامر ul li الي بيعني تطبيق النمط المطلوب على جميع li التابعة ل ul