منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

CSS link & list & table

وهنا سوف نقوم بشرح كيفية عمل style لأشهر عناصر ال html وهمHTML link+HTML list+HTML table

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;






Do not waste your time and start with us, now 😍