Bir önceki yazıda bir HTML etiketi için bir stil yaratıp bundan sonra o etiket için hep o stilin geçerli olmasını sağlamayı öğrenmiştik.
Şimdi ise daha farklı bir konuya geçiyoruz. Her zaman aynı stili kullanmak istemezsek ne olacak? Yani sayfamızdaki bütün linklerin aynı şekilde görünmesini istemiyorsak… O zaman HTML etiketleri için farklı class yani sınıflar oluşturarak istediğimiz zaman istediğimizi kullanabiliriz..
Önce aşağıdaki gibi bir dosya oluşturalım ve buna main.css adını verelim.
FONT {
FONT-SIZE: 10px; FONT-FAMILY: Tahoma
}
TD {
FONT-SIZE: 10px;
FONT-FAMILY: Tahoma;
border-right-style: none;
border-bottom-style: none;
}
BODY {
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #cccccc;
SCROLLBAR-3DLIGHT-COLOR: #cccccc;
SCROLLBAR-ARROW-COLOR: #cccccc;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #cccccc;
font-family: Tahoma;
font-size: 10px;
color: #666666;
}
A:link {
FONT-SIZE: 10pt;
COLOR: #619ED4;
FONT-FAMILY: "Tahoma";
TEXT-DECORATION: none;
font-weight: normal;
}
A:visited {
FONT-SIZE: 10pt;
COLOR: #619ED4;
FONT-FAMILY: "Tahoma";
TEXT-DECORATION: none;
font-weight: normal;
}
A:hover {
COLOR: #FF9900; TEXT-DECORATION: underline
}
A.Sol:link {
FONT-SIZE: 10pt;
COLOR: #000066;
FONT-FAMILY: "Arial Narrow";
TEXT-DECORATION: none;
font-weight: normal;
}
A.Sol:visited {
FONT-SIZE: 10pt;
COLOR: #000066;
FONT-FAMILY: "Arial Narrow";
TEXT-DECORATION: none;
font-weight: normal;
}
A.Sol:hover {
COLOR: #CC3333; TEXT-DECORATION: underline
}
A.ust:link {
FONT-SIZE: 8pt;
COLOR: #619ED4;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none;
font-weight: normal;
}
A.ust:visited {
FONT-SIZE: 8pt;
COLOR: #619ED4;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none;
font-weight: normal;
}
A.ust:hover {
COLOR: #FFFFFF; TEXT-DECORATION: underline
}
A.orta:link {
FONT-SIZE: 8pt;
COLOR: #CC3333;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none;
font-weight: normal;
}
A.orta:visited {
FONT-SIZE: 8pt;
COLOR: #CC3333;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none;
font-weight: normal;
}
A.orta:hover {
COLOR: #000066; TEXT-DECORATION: underline
}
FONT {
FONT-SIZE: 9px; FONT-FAMILY: Tahoma
}
TD {
border-top-style: none;
border-left-style: none;
font-family: Tahoma;
font-size: 11px;
color: #666666;
}
HR {
COLOR: #1194FF;
HEIGHT: 1pt;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
width: 95%;
}
INPUT {
FONT-SIZE: 8pt;
COLOR: #000000;
FONT-FAMILY: Verdana;
border: 1px double #3a93d0;
background-color: whitesmoke;
}
TEXTAREA {
BORDER-RIGHT: #3a93d0 1px solid;
BORDER-TOP: #3a93d0 1px solid;
FONT-SIZE: 8pt;
BORDER-LEFT: #3a93d0 1px solid;
COLOR: #000000;
BORDER-BOTTOM: #3a93d0 1px solid;
FONT-FAMILY: tahoma;
}
.DUGME {
BORDER-RIGHT: 2px inset #999999; BORDER-TOP: 2px inset #CCCCCC; FONT-WEIGHT: bold; FONT-SIZE: 8pt; BORDER-LEFT: 2px inset #CCCCCC; COLOR: #000099; BORDER-BOTTOM: 2px inset #999999; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #E0DFE3
}
.BASLIK {
FONT-SIZE: 8pt;
FONT-FAMILY: Verdana;
font-weight: bold;
}
SELECT {
BORDER-RIGHT: #3a93d0 1px solid;
BORDER-TOP: #3a93d0 1px solid;
FONT-SIZE: 8pt;
BORDER-LEFT: #3a93d0 1px solid;
COLOR: #000000;
BORDER-BOTTOM: #3a93d0 1px solid;
FONT-FAMILY: Tahoma;
background-color: whitesmoke;
}
.BASLIK2 {
FONT-SIZE: 8pt;
FONT-FAMILY: Tahoma;
font-weight: normal;
color: #FF6600;
}
.BASLIK3 {
FONT-SIZE: 8pt;
FONT-FAMILY: Tahoma;
font-weight: bold;
color: #FFFFFF;
}
.BASLIK4 {
FONT-SIZE: 8pt;
FONT-FAMILY: Tahoma;
font-weight: bold;
color: #FE8D12;
}
.BASLIK5 {
FONT-SIZE: 8pt;
FONT-FAMILY: Tahoma;
font-weight: normal;
color: #999999;
}
.BASLIK6 {
FONT-SIZE: 9pt;
FONT-FAMILY: Tahoma;
font-weight: bold;
color: #000000;
}
.yazimavi {
FONT-SIZE: 8pt;
FONT-FAMILY: Verdana;
font-weight: normal;
color: #619ED4;
}
.BASLIK_tre_gri {
FONT-SIZE: 9pt;
FONT-FAMILY: "Trebuchet MS";
font-weight: bold;
color: #666666;
}
Yukarıdaki dosyanın uzunluğu ilk bakışta gözünüzü korkutmasın. Şimdilik sadce küçük bir kısmını kullanacağız.
Her şeyden önce dosyamızı nasıl kullanacağımıza karar vermemiz gerekiyor. CSS kodları oluşturacağımız sayfada mı olacak yoksa farklı bir sayfadan mı ithal edeceğiz. Bu yöntemleri daha önceki yazılarımda açıklamaya çalışmıştım. Eğer aynı sayfada kullanmak istiyorsanız şu yazıyı; ya da dışardan çağırmak istiyorsanız da şu yazıyı okuyabilirsiniz.
Yukarıdaki koddan anlaşıldığı gibi BASLIK2, 3, 4 vs vs gibi bir kaç başlık sitilimiz ve orta ve üst gibi değişik link kodlarımız var. Şimdi bunları istediğimiz şekilde nasıl kullanacağımıza örnek verelim.
<p class="BASLIK2">www.hayaletinyeri.com</p>
<p class="BASLIK6">www.hayaletinyeri.com</p>
Görüldüğü gibi her iki satırda da aynı ibareyi yazdırmamıza rağmen sayfa kaydedilp çalıştırıldığı takdirde sonuç iki ayrı renkte yazı olacaktır. Böylece sayfamızda görüntülemekm istediğimiz objelerin başına class ifadesini ekleyip sonra sınıfı belirtince görünüm o sınıfa göre değişmektedir. Bu örneği bir de linklerle deneyelim.
<a href="https://www.hayaletinyeri.com" class="orta">www.hayaletinyeri.com</a>
<a href="https://www.hayaletinyeri.com" class="Sol">www.hayaletinyeri.com</a>
Burada da iki aynı ifadeyi içeren link görülüyor ancak her ikisinin rengi ve fare üzerine geldiğinde değişen renkleri birbirlerinden farklı. Birine sol diğerine de orta sınıfını atayınca sonuç böyle oldu. Bu şekilde Sayfamızın sol tarafı ve üst tarafı gibi farklı alanlarında farklı şekilde linkler gösterebiliriz. Aynı şeyi sadece yazı ya da bağlantılarda değil istediğimiz her öğede uygulayabiliriz.
“Class” ifadesiyle gördüğünüz gibi istediğimiz öğeye istediğimiz stili uygulayabiliyoruz.
Daha önceki CSS ile HTML Etiketlerini Yeniden Düzenlemek yazısında HTML etiketlerini düzenleyip artık o etikete nasıl yeni bir stil vereceğimizi öğrenmiştik. Eğer etikete class eklentisini yazmazsak hep o yeni şekliyle görünüyordu şimdi de istediğimiz şekilde görülüyor. Yalnız aradaki farka dikkat edin CSS kodunda HTML etiketini tanımlarken direk HTML karşılığını yazarak adlandırıyoruz. (P HR TD gibi) Fakat bir class oluştururken onu her yerde kullanabileceğimiz için istediğimiz adı verebiliyoruz ancak vereceğiniz adın başına nokta koymayı unutmayın. (.BASLIK6 gibi.)