CSS "Cascading Style Sheets" Dersleri
CSS ( Cascading Style Sheets ) Web Tasarım Dersleri - Niçin CSS ? - Css Giriş - Link Özellikleri / Örnekleri - Liste Özellikleri / Örnekleri - Katman Özellikleri / Örnekleri - Font Özellikleri / Örnekleri - Metin Özellikleri / Örnekleri- İmleç Özellikleri / Örnekleri - Zemin Özellikleri / Örnekleri - Tablo Özellikleri / Örnekleri - Kaydırma Çubuğu Özellikleri / Örnekleri - Araçlar- Birimler - Parametreler - Örnek Sayfa
AnaSayfa / Bu Siteyi Unutma

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.