YERLEŞTİRİLMESİ:
Dışarıda ayrı bir dosya olarak kullanılması: Bu da iki şekilde olabilir:
Style özelliklerini bir metin editörüyle yazdıktan sonra *.css uzantısıyla kaydederiz ve sayfamızın “head” bölümünde bu dosyaya bir baglantı kurarız.
Örnek:
<html>
<head>
<link type=”text/css” rel=”stylesheet” href=”style/css.css”>
</head>
Aynı şekilde bir css dosyası oluştururuz.Dışardaki bu dosyaya da yine “head” bölümünde aşagıdaki gibi bir baglantı kurarız.
Örnek:
<html>
<head>
<style> @import url(style.css); </style>
</head>
Sayfanın “head” bölümüne yerleştirilmesi : Hazırladıgımız style özelliklerini sayfanın “head” bölümüne örnekte oldugu gibi yerleştirebiliriz.
Örnek:
<html>
<head>
<style>
P {font-family:arial; font-size:12px;}
</style>
</head>
Style özelliklerinin etiketin içine yerleştirilmesi : Bu durumda etiketin içine diger parametreler gibi yerleştirilir.
Örnek :
<p style=”font-family:arial; font-size:12px;font-color:black;”>…</p>
YAPISI :
ılk iki durumda style’in yapısı şöyledir:
<style>
<!–
P {font-family:arial; font-size:12px;}
H3 {font-family:arial; font-size:14px;font-color:navy;}
–>
</style>
NOT : <!– ve –> etiketleri style özelliklerini CSS’yi desteklemeyen tarayıcılardan saklamaya yarar.
Üçüncü durumda style özelliklerinin yazımı aynı olsa da “<style> <!–” ve “–> </style>” etiketleri kullanılmaz.Parametre ve degerler ilgili etiketin içinde ve style=”…” parametresinin içine yazılır.
KULLANILMASI :
Genel Biçimlendirme : Sayfada geçen bir etiketin her yerde aynı nitelikleri taşımasını istedigimizde bu metodu kullanırız.
Örnek:
P {font-family:arial; font-size:12px;font-color:black;}
Seçerek Biçimlendirme : Bir etiketin farklı yerlerde farklı niteliklere sahip olmasını istedigimizde bu metodu kullanabiliriz.Bu da şu şekillerde olabilir:
.isim : Bu metodla sayfa içinde kullanılan her etiket için birden fazla farklı biçimlendirme yapılabilir.Bu durumda seçilen etikete class=”isim” parametresini eklemeliyiz.
Örnek :
.italik {font-style : italic;}
<p class=”italik”>Deneme</p>
veya
P.italik {font-style : italic;}
<p class=”italik”>Deneme</p>
#isim : Yukardakine benzemekle birlikte style bölümünde öncesinde etiket kullanılmaması ile ondan ayrılır.Ayrıca ilişkilendirilen etiket ile kullanılırken de class yerine id=”isim” kullanılır.
Örnek :
#italik {font-style : italic;}
<p id=”italik”>Deneme</p>
etiket+etiket : ıçiçe etiket kullandıgımızda ikinci etiketin etki alanını birincisinden farklı biçimlendirebiliriz.
Örnek:
P {color : black;}
P B {color : red;}
<p> Deneme <b> Deneme </b> Deneme </p>
Bu durumda P etiketi içerisinde, B etiketinin etkiledigi alanlardaki karakterler kırmızı olurken kalan alanlar ise siyah olacaktır.
Kaynak: www.css-dersleri.ucoz.com
