HTML and CSS: Creating Navigation Bars

Jen Kramer


1. Navigation Bar Basics
Using HTML to mark up a navbar


Understanding the box model of a navbar

* universal selector

border: 1px solid red;

block level elementler içinde bulundukları elementin genişliğine ve yüksekliğine kadar büyük olurlar. Yani onu kaplarlar.

Hiçbir stil düzenlemesi yapılmasa bile her tarayıcının kendine ait bir stil düzenlemesi vardır.

background-color: yellow;

inline level elementler içindeki içerik kadar büyük olur.


Removing default list styling
ul {
  list-style-type: none;
}
Understanding link states and styling the text
Bağlantıların (link) 5 durumu vardır. Ve bunların bir sırası vardır.
  • link - henüz tıklanmamış
  • visited - tıklanmış
  • focus - klavyeden tab ile geçişlerde anlamlı hale gelir
  • hover - mouse ile geçişlerde
  • active - şu an için anlamsız ama linke tıkladıktan sonra henüz serverdan cevap beklerkenki anda

color: blue; // yazının rengi

text-decoration: none; // linklerin altı çizili olmaması için