دورة css للمبتدئين الدرس الرابع


فهاد الدرس الرابع من دورة css للمبتدئين غادي نشوفوا كيفاش نزيدو des styles css ل les listes فكيف سبق شفنا فالدروس السابقة ديال html عندنا deux types ديال les listes كاين المرقمة المرتبة وكاين العادية لي ممرتباش فهنا غادي نشوفوا كيفاش نتعاملو معاهم ب css.


1- إضافة css للعنصر الأول من la liste ul

فيلا بغيت نزيد css للعنصر الأول من une liste ul عندي la propriété li:first-child  لي كتمكن من التعامل مع اول عنصر عندي ف liste فكيف كتشوف فالكود المرفق فالملف html زدنا une liste لي فيها 4 ديال لغات البرمجة فالكود css وباش نستهدف العنصر الأول من liste ul خدمت بل الكود css لي كنقول فيه بلي بغيت liste ul ولعنصر li ديالها وبغيت أول li لي هي ل firstchild فعطيتها ل couleur وletter-spacing و text-transform كيف سبق وشفنا فالدروس السابقة الكود لي زدنا هو :

                                //index.html code
    <ul>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>php</li>
    </ul>
//style.css code

ul li:first-child{
	color: #ff00ff;
	text-transform: uppercase;
	letter-spacing: 5px;
}
                            

2- إضافة css للعنصر الأخير من la liste ul

فيلا بغيت نزيد css للعنصر الأخير من une liste ul عندي la propriété li:last-child  لي كتمكن من التعامل مع آخر عنصر عندي ف liste فدرنا تقريبا نفس الشي لي درناه مع أول عنصر الكود لي زدنا هو :

                                //style.css code

ul li:last-child{
	color: #ff8800;
	text-transform: capitalize;
	letter-spacing: 5px;
}
                            

3- إضافة css لعنصر من اختياري من la liste

فيلا بغيت نزيد css لعنصر من اختياري من une liste ul عندي
la  propriété ul li:nth-child
لي كتمكن من التعامل مع عنصر من اختيارنا فقط كنعطي الرقم ديالو فهنا اختارينا الرقم 3 لي هو javascript وزدنالو لكود css الكود لي زدنا هو :

                                //style.css code 

ul li:nth-child(3){
	color: #ff8800;
	text-transform: capitalize;
	letter-spacing: 5px;
}
                            

4- كيفاش نحيد الدائرة السوداء من liste ul

فكيف كتشوف ف liste ul عندها par défaut style عبارة على عناصر كل واحد فيهم مسبوق بنقطة سوداء عبارة عن دائرة يلا بغيت نبدل هاد style عندي ل propriété list-style-type ديال ul لي كتاخد disc لي هو style par défaut أو square لي هو مربع أو circle لي هو دائرة وكاين ايضا none ولي هي لي غادي نخدموا بها ولي كتحيد داك style فمرة الكود لي زدنا هو :  

                                    //style.css code

ul{
	list-style-type: none;
}
                                

5- كيفاش نعرض العناصر ديال liste ul على شكل menu

فكيف كنشوفو دائما فالمواقع ال menu هو عبارة عن liste ul لي فيها مجموعة من العناصر وهاد العناصر حيدنلها style من liste ul كيف شفنا قبل وعرضناها فسطر واحد مع إضافة css لتحسين المظهر ديالها كيف غادي نشوفوا دبا فباش نديرو هادشي عندنا ل propriété display لي كتاخد block أو inline-block يعني فسطر واحد فهنا اختارينا ل ul منبعد li ديالها عطيناها ف display inline-block منبعد درنا texte ف centre وعطيناها margin-left لي هو l'espace فليسرديال كل عنصر وعطيناها حجم الخط بل font-size وزدناها ل padding لي كيمكن من إضافة espace داخلي عندنا ايضا ل border-radius لي كتمكن من جعل الحواف معقوفة وردينا texte majuscule ب text-transform وفل hover ديال li يعني ملي la souris تكون فوقها عطيناها background-color اورونج وcouleur du texte بيض الكود لي زدنا هو :

                                    //style.css code

ul li{
	display: inline-block;
	text-align: center;
	margin-left: 30px;
	font-size: 20px;
	padding: 10px;
	border-radius: 5px;
	cursor: pointer;
	text-transform:uppercase;
}
ul li:hover{
	background-color: #ff8800;
	color: #fff;
}