CSS link

عند وضع لينك في الموقع فانه غالباً ما يكون لونه ازرق ويكون اسفله خط وعند الوقوف عليه بالماوس فانه يتحول الى شكل اليد ويُسمى هذا الشكل pointer.

1 يُمكن تغيير لون اللينك عن طريق الكود التالي: color: red;

2 ويُمكن حذف الخط أسفل اللينك عن طريق الكود التالي: text-decoration: none;

3 ويُمكن تغيير شكل الماوس عند الوقوف عليه عن طريق الكود التالي: cursor: pointer;
ويوجد العديد من الاشكال للماوس تجدها هنا

4 عندما نريد وضع style عام لجميع الروابط فإننا نستخدم الكود التالي: a {property: value;}

5 عندما نريد وضع style فقط للروابط التي لم يتم زيارتها فإننا نستخدم الكود التالي: a:link {property: value;}

6 عندما نريد وضع style فقط للروابط التي تم زيارتها مُسبقاً فإننا نستخدم الكود التالي: a:visited {property: value;}

7 عندما نريد وضع style فقط للروابط التي نقف عليها بالماوس فإننا نستخدم الكود التالي: a:hover {property: value;}

8 عندما نريد وضع style فقط للروابط التي يتم الضغط عليها بالماوس فإننا نستخدم الكود التالي: a:active {property: value;}

9 عندما نريد وضع style فقط للروابط التي يتم تحديدها ب زر ال tab بالكيبورد فإننا نستخدم الكود التالي:
وغالبا ما يُستخدم هذا الكود مع عنصر ال input الخاص بعمل ال form a:focus {property: value;} تجدها هنا

⚠ إذا أردنا وضع العديد من هذه القيم لنفس العنصر فيوجد قاعدتين لذلك هما:
1- a:link and a:visited come first then a:hover
2- a:hover come first then a:active

مثال على ذلك

 
<style>
    /* unvisited link */
    a:link {
    color: red;
    }
 
    /* visited link */
    a:visited {
    color: green;
    }
 
    /* mouse over link */
    a:hover {
    color: hotpink;
    }
 
    /* selected link */
    a:active {
    color: blue;
    }
</style> 

CSS list

طبعاً انت اكيد عارف ان عناصر ال ol بيكون قبلهم ارقام وان عناصر ال ul بيكون قبلهم دوائر باللون الأسود.

1 ويُمكننا تغيير هذا ال style عن طريق هذا الكود: list-style-type: circle;
ويوجد العديد من الاشكال غير ال circle تجدها هنا

2 وبشكل افتراضي يكون مكان ال style الخاص بال list خارج حدود ال <li>
ويُمكن تغيير المكان ليصبح ال style داخل حدود ال <li> عن طريق الكود التالي: list-style-position: inside;
وبشكل افتراضي تكون القيمة outside بدلاً من inside

3 وإذا أردنا وضع صورة بدلاً من الدوائر )في حالة ال (ul او الأرقام )في حالة ال ol)
فإننا نستخدم الكود التالي: list-style-image: url('اسم الصورة');
مثال على ذلك

⚠ ويُمكننا اختصار هذه الاكواد الثلاثة في كود واحد هو:
list-style: circle inside url('اسم الصورة');
طبعاً انت الوقتي المفروض تسأل؛ مين الى هيتم عرضه ك style لل li ال circle ولا ال الصورة ؟
ج/ سوف يتم عرض الصورة بدلا من ال circle ولكن اذا حدثت مشكلة للصورة ولم يتم عرضها لأى سبب من الأسباب فسيتم عرض ال circle بدلا من الصورة.

CSS table

بص يا صاحبي انت لو عاوز تعمل style كويس لل table ف انت الأول المفروض تكون عارف جميع عناصر ال table ك html وتم شرحه مسبقاً من هنا

1 إذا أردنا عمل حدود لعناصر الجدول فأننا نستخدم الكود التالي: table, th, td { border: 1px solid black;}

2 نلاحظ وجود مشكلة في الكود العلوي هو ان جميع خلايا الجدول تكون حدودها عبارة عن خطين؛ وإذا أردنا تغيير ذلك لكي تُصبح خلايا الجدول عبارة عن خط واحد نستخدم الكود التالي: table {border-collapse: collapse;}

3 إذا أردنا تغيير شكل الصف (مثل لون الخلفية) عند وضع الماوس عليه نستخدم الكود التالي: tr:hover {property: value;}

4 إذا أردنا تغيير خلفية الصفوف الزوجية (even) بلون خلفية مختلف فإننا نستخدم الكود التالي: tr:nth-child(even) {background-color: #f2f2f2;}

5 عند عمل جدول كبير الحجم من حيث العرض او الطول فإننا سوف نواجه مشكلة عدم ظهور جزء من الجدول في حالة الشاشات الصغيرة مثل الموبايل؛ ونقوم بحل هذه المشكلة عن طريق جعل الجدول يقوم بعمل scrolling بالماوس عند اختفاء جزء من الجدول عن طريق الكود التالى:
- في حالة احتفاء جزء من عرض الجدول نستخدم: overflow-x: auto;

- في حالة إذا كان الجدول طويل جدا وأردنا تحدد طول معين للجدول وباقي الجدول نوصل له بال scrolling بالماوس نستخدم: overflow-y: auto;