Ankara Üniversitesi
Nallıhan Meslek Yüksekokulu
Stil Şablonu (CSS) Özellikleri Stil Şablonu (CSS) Menü İşlemleri
NB P10 5 W E B T ASAR IM T E ME L L E R I ÖĞR . GÖR . DR . UFUK T ANYE R I
Stil Şablonu (CSS) Özellikleri [1]
p {border: 1px solid powderblue;}
CSS kenarlık özelliği, bir HTML öğesinin etrafındaki bir kenarlığı tanımlar.
p {border: 1px solid powderblue;padding: 30px;}
CSS dolgu özelliği, metin ile kenarlık arasında bir dolgu (boşluk) tanımlar.
p {border: 1px solid powderblue;margin: 50px;}
CSS kenar boşluğu özelliği sınırın dışında bir kenar boşluğu (boşluk) tanımlar.
Stil Şablonu (CSS) Menü İşlemleri [2]
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) { background-color: #555;
color: white;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Stil Şablonu (CSS) Menü İşlemleri [2]
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li { float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) { background-color: #111;
}
.active { background-color: #4CAF50; }
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Kaynaklar
[1] HTML5 Tutorial. (n.d.). Erişim Tarihi 15 Kasım 2017, https://
www.w3schools.com/html/html_css.asp
[2] HTML5 Tutorial. (n.d.). Erişim Tarihi 15 Kasım 2017, https://
www.w3schools.com/css/css_navbar.asp
