Biz bundan sonraki tüm Stil Şablon örneklerimizde Global Stil Şablonu kullanacağız. Bu yüzden Css ile Html dosyalarımız beraber olacak böylece de konuyu kavrama ve anında uygulamanız daha kolay olacak. Şimdi Css’in etkidiği Html etiketlerini hangi özelliklerini değiştirdiğini görelim.
[
B]3.1. Font Özellikleri[/b]
Adı üzerinde Font özelliklerini değiştirmeye yarayan bir stil şablon özelliğidir. Nasıl kullanıldığına hemen bir bakalım.
<html>
<body>
<head>
<title>Css</title>
<style type="text/css">
<!--
p
{
font-size : 12pt;
font-family : Arial;
font-weight : bold;
font-style : italic;
color : #00FFFF;
}
-->
</style> <body>
<p>Web Teknikleri</p>
</body>
</html>
Alt özellikleri tanıyalım. font-size : Font büyüklüğünü belirtir.
İsterseniz aşağıdaki gibi standart değerleri seçersiniz;
xx-large (en büyük )
x-large (biraz büyük)
large (büyük)
medium (orta)
small (küçük)
x-small (biraz küçük)
xx-small (en küçük)
isterseniz direkt olarak punto (pt) değerini verebilirsiniz.
font-family : Font tipini belirler.
Arial, Courier, Verdana gibi font isimlerini alabilir.
font-weight : Fontun kalınlı incelik durumunu belirler.
bold : Fontu kalın yapar.
normal : Fontun normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.
font-style : Fontun yatık olup olmamasını sağlar.
color : Fontun rengini belirler.
Blue, red,green gibi renklerin ingilizce karşılıklarını alabilir.
3.2 Text Özellikleri
Text özelliği ile de font özelliğinin sahip olmadığı bazı özellikleri etiketimize ekleriz. Örnek ile açıklayalım.
<html>
<body>
<head>
<title>Css</title>
<style type="text/css">
<!--
p {
text-transform : lowercase;
text-decoration : underline;
text-align : left;
line-height : 20px;
text-indent : 15px;
}
-->
</style> <body>
<p>Web Teknikleri</p>
</body>
</html>
Alt özellikleri tanıyalım. text-transform : lowercase : Yazının tümünün küçük harf olmasını sağlar.
uppercase : Yazının tümünün büyük harf olmasını sağlar.
capitalize : Yazının istenilen şekilde kalmasını sağlar.
text-decoration : underline : Yazının altının çizili olmasını sağlar.
overline : Yazının üstünün çizili olmasının sağlar.
line-through : Yazının üstünün çizili olmasını sağlar.
none : Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
text-align: left: Yazının sola bitişik olmasını sağlar.
center : Yazının ortada olmasının sağlar.
right : Yazının sağa bitişik olmasını sağlar.
line-height : Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır.
text-ident : Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır.
3.3 Background Özellikleri
Background ile html sayfamızın arkafonlarının özelliklerini değiştirmemizi sağlar.
<html>
<body>
<head>
<title>Css</title>
<style type="text/css">
<!--
p {
background-color :#00ff00;
background-image : url ("resim_adi.gif");
background-position : center;
background-repeat : repeat-y;
}
-->
</style> <body>
<p>Web Teknikleri</p>
</body>
</html>
background-color : Arka fonun rengini belirler. Css’te renkleri blue, red gibi tanımlayabileceğimiz gibi Html kodunu vererek de tanımlayabiliriz.
background-image :
Arka fonu bir resim dosyası yapmak için kullanılır. url etiketinin içine resim dosyasının yolu ve ismi tam olarak yazılmalıdır.
background-position : left : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
center : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
right : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
background-repeat : Arkafondaki resmin tekrarlanması istendiğinde kullanılır.
repeat : Tüm yönlerde tekrar edilmesini sağlar.
repeat-x : X (yatay) yönünde tekrar edilmesini sağlar.
repeat-y : Y (dikey) yönünde tekrar edilmesini sağlar.
no-repeat : Resmin tekrar edilmeyerek bir kere gösterilmesini sağlar.