دورة css للمبتدئين الدرس الرابع
1- إضافة css للعنصر الأول من la liste ul
//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
//style.css code
ul li:last-child{
color: #ff8800;
text-transform: capitalize;
letter-spacing: 5px;
}
3- إضافة css لعنصر من اختياري من la liste
لي كتمكن من التعامل مع عنصر من اختيارنا فقط كنعطي الرقم ديالو فهنا اختارينا الرقم 3 لي هو javascript وزدنالو لكود css الكود لي زدنا هو :
//style.css code
ul li:nth-child(3){
color: #ff8800;
text-transform: capitalize;
letter-spacing: 5px;
}
4- كيفاش نحيد الدائرة السوداء من liste ul
//style.css code
ul{
list-style-type: none;
}
5- كيفاش نعرض العناصر ديال liste ul على شكل menu
//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;
}