CSS Giriş

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.