🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ramazan HABER / CSS / Menuler

 

1-) CSS -  Menuler

 

1-) CSS - ul etiketi sırasız etikettir ve "a" etiketi ise link vermek için

  1. <ul>
  2. <li><a href="">Anasayfa</a></li>
  3. <li><a href="">Hakkımızda</a></li>
  4. <li><a href="">Çalışmalarımız</a></li>
  5. <li><a href="">İletişim</a></li>
  6. </ul>

2-) .menu ul{margin:0px;padding:0px;list-style:none;}

  1. menu diye bir css var yani class olarak tanımlanmış .. bunun içinde ul diye bir etiket var o etikete bu özellikleri uygula demek
  2. list-style:none; yani ul etiketinin sitilini yok ettik normalde başına "." koyuyordu o yok oldu

3-) .menu ul li{float:left}

  1. class olarak menu ve içerisinde ul ve onun içerisindeki li etiketleri etkilensin demek. Burada menu diye bir class olduğundan direk etkilenme söz konusudur ayrı bir tanıma gerek yok etkilensin diye
  2. burada etiketlerin başında nokta yok o yuzden dırek etkileniyor ul misal

4-).menu ul li a{display:block;width:120px;height:15px;text-decoration:none;text-align:center;color:white;padding-top:15px}

  1. çok önemli birşey burada "a" etiketini kutu yapıyoruz yani "a" etiketi kutu gibi davranıyor
  2. display:block; özelliği kutu yapıyor div gibi
  3. genişlik ve yükseklik vermemiz lazım çünkü kutu oldu.
  4. text-decoration:none; altı çiziliydi "a" etiketinin onu yok ettik

5-).menu ul li a:hover{text-decoration:underline;background:#C35B5D;}

  1. a:hover: burada ise "a" etiketinin üzerine gelince demek 
  2. text-decoration:underline; üzerine gelince altı çizili olsun demek



 2021 Ocak 18 Pazartesi
 449