Css-giris
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.
|
Bugün 22 ziyaretçi (189 klik) SpaceDesign'i Ziyaret Etti!!!
