Style.Css Nedir Ne İşe Yarar ?

Merhaba sayın webmaster adayı arkadaşlar.Adayı diyoruz çünkü webmaster arkadaşlar style.css nedir bilirler.Bu yazımda acemi düzey arkadaşlara style.css tanıtacağım.Böylece yapacakları html siteleri daha kolay hale getirebilecekler.

Style.Css yapacağınız html sitenin içeriği kaç sayfadan oluşursa oluşsun tüm sayfalarınızın zemin rengi, font, yazı tipi ve büyüklükleri,yazı renkleri hatta ve hatta menülerinizi ve menülerinizin efektlerini bile kaydettiğiniz tek bir dosyadır.Ve sadece bir tek bu dosyayı kullanarak tüm html sayfalarınızın aynı özellikle olmasını sağlayabilirsiniz.Yani her web sayfası için ayrı ayrı uğraşmanıza gerek kalmaz.

İşte size örnek bir style.css dosyası.



“”TD {
font-family: “Courier New”;
FONT-SIZE: 12px;
}
BODY {
margin: 0px;
background: #ffff00
}
.sayfa {
background: #006600
width: 760px;
padding: 5px;
border-left: 5px solid #ffffff
border-right: 5px solid #ffffff
}
.ustmenu {
border-bottom: 4px solid #ffffff
border-left: 1px solid #ffffff
border-right: 1px solid #ffffff
border-top: 1px solid #ffffff
line-height: 20px;
font-family: “Courier New”;
font-size: 11px;
text-align: center;
background: #000000
}
.ustmenu a {
text-decoration: none;
color: #ffffff
}
.ustmenu a:hover {
text-decoration: underline;
color: #ffffff
}
.menubaslik {
border-bottom: 1px solid #ffffff
border-left: 1px solid #ffffff
border-right: 1px solid #ffffff
border-top: 1px solid #ffffff
line-height: 20px;
text-align: left;
background: #000000
color: #ffffff
font-family: “Courier New”;
}
.menuayar {
border-bottom: 1px solid #D9E0E6
border-left: 1px solid #D9E0E6
border-right: 1px solid #D9E0E6
border-top: 1px solid #D9E0E6
line-height: 20px;
font-size: 11px;
font-family: “Courier New”;
background: #006600
}
.menuayar a {
text-decoration: none;
color: #ffffff
}
.menuayar a:hover {
text-decoration: underline;
color: #ffffff
}
.ortablo {
border: 1px solid #ffffff
background: #ffffff
}
.adsense {
border-right: 1px solid #ffffff
border-bottom: 1px solid #ffffff
border-left: 1px solid #ffffff
border-top: 1px solid #ffffff
font-size: 11px;
background: #ffffff
text-align: center;
}
.arama {
margin:1px solid #ffffff border: 1px solid #ffffff
font-size: 12px
}
.aramayazi {
font-size: 11px;
color:#8ea3b4
}
.copyright {
border-right: 1px solid #ffffff
border-bottom: 1px solid #ffffff
border-left: 1px solid #ffffff
border-top: 1px solid #ffffff
font-size: 11px;
background: #ffffff
font-family: “Courier New”;
TEXT-ALIGN: center
}
.copyright a {
text-decoration: none;
color: #8ea3b4
font-size:9;
}
.copyright a:hover {
text-decoration: underline;
color: #ff0000
font-family: “Courier New”;
}”"



Yukarıda gördüğünüz özelliklerden kısaca bahsedelim.



“”font-family: “Courier New”;
FONT-SIZE: 12px;”"



Courier New kullanılacak tüm html sayfalarının yazısında ve boyutu on iki.



background: #006600



Sayfanın zemin rengi renk kodu.Kodlarla oynayarak istenilen renk yapılır.



“”.ustmenu {
border-bottom: 4px solid #ffffff
border-left: 1px solid #ffffff
border-right: 1px solid #ffffff
border-top: 1px solid #ffffff
line-height: 20px;
font-family: “Courier New”;
font-size: 11px;
text-align: center;
background: #000000“”

Burda bir menü oluşturma kodu var.Menü bir kutu halinde.Menünün ölçüleri, normal rengi, mouse ile gelindiğinde çıkan rengi, yazı tipi, fontu,boyutu,rengi,büyüklüğü gibi bilgiler var.İstenildiği gibi ayarlanır.



Kısacası anlatmak istediğim bir style.css oluşturarak istediğiniz tüm html sayfalarınızın özelliklerini standart tutabilir ve tek tek hepsi ile uğraşmak zorunda kalmassınız.


Kaynak: http://aleminsitesi.com/forum/Konu-style-css-nedir-ne-ise-yarar.html