Css'e giriş, css kodlarını html sayfaya ekleme, css seçiciler
19741 1

CSS Nedir?

Html sayfaları biçimlendirmek için kullanılan teknolojiye CSS denir. Aşağıda sizlere css kodlarını html kodları ile birleştirmeyi, css yazım kurallarını ve ebeveyn mantığını anlatmaya çalışacağım.

Css Yazım Kuralları ve Standartları

seçici { özellik : alacağı değer }

p { color : red; }

Yukarıda yazılmış olan kod tüm paragraflardaki yazı renginin kırmızı olacağını söylüyor. Noktalı virgül ";" kullandığımıza dikkat etmişsinizdir. Özellikleri birbirinden ayırmak için koymalısınız. En son özelliğin sonuna koymaya gerek yok ama alışkanlıktan ben hep koyarım. Üstünde bulunan açıklamaya göre seçicimiz "p" yani paragraf, özellik "color" yani yazı rengi ve bu  özelliğin alacağı değer de "red" yani kırmızı olarak ayarlanmış.

Eğer bir seçiciye birden fazla özellik vermek isterseniz;

p{
    color:red;
    font-size:12pt;
    text-decoration:underline;
}

şeklinde yapabilirsiniz.


Eğer istediğiniz birden fazla seçiciye aynı özellikleri uygulamaksa;

p,h1,span{
    color:red;
    font-size:12pt;
    text-decoration:underline;
}

şeklinde yapabilirsiniz. Yani araya "," koymanız gerekmektedir.

Css Kodlarını Sayfamıza Dahil Etme

Satır Düzeyinde Css Kodu Ekleme

Css özelliğini elementin içerisinde "style" özelliği ile belirtebilirsiniz. Öncelik kuralına göre diğerlerine göre ilk sıradadır. Yazım şekli şöyledir;

<p style="color:red;">Yılmaz ARSLANTÜRK</p>

Sonuç:

Satır İçi CSS

Sayfa İçi Css Kodu Ekleme

Sayfanın en üstünde "head" etiketleri arasına "style" etiketleri yerleştirilir ve css kodları bunların arasına yazılır. Bu şekilde yapılmış biçimlendirmeye sayfa içi biçimlendirme diyebiliriz.

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                color:red;
                text-decoration:underline;
            }
        </style>
    </head>
    <body>
        <p>Yılmaz ARSLANTÜRK</p>
    </body>
</html>

Sonuç:

Sayfa İçi Css

Sayfa Dışı (Harici Dosyadan) Css Kodu Ekleme

Harici bir stil dosyası oluşturulur ve uzantısı ".css" olacak şekilde ayarlanır. "link" etiketi içerisinde "href" özelliğinde dosyanın yolu belirtilir. Aşağıda göreceli bir adres ile yol gösterilmiştir. Css dosyasında kodlar aynen yazılır.

index.html

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="stil.css"/>
    </head>
    <body>
        <p>Yılmaz ARSLANTÜRK</p>
    </body>
</html>

stil.css

p{
    color:blue;
    text-decoration:underline;
}

Sonuç:

Sayfa Dışı CSS

Seçiciler

Id(Tekil) Seçicisi

(X)Html dökümanlarda elementlerin içerisinde bir id tanımlaması yapılır ve elemana bir isim verilir.(<div id="tasiyici"></div>) (X)Html kurallarına göre bir id isminden sayfada yalnızca bir tane olmalıdır. Bu yüzden tekil seçici dememiz gayet anlamlı olacaktır. Css içerisinden id tanımlaması yapılmış bir elemana ulaşmak gayet basittir. Id tanımlaması önüne "#" diyez işareti konarak bu tanımlama yapılabilir.

#tasiyici{
    color:#00FF00;
    width:300px;
}

Class Seçicisi

Class seçicisi ile birden fazla elemana uygulamak istediğiniz biçimlendirmeleri tek seferde yazıp istediğiniz kadar kullanabilirsiniz yada bir elemana birden fazla class uygulayabilirsiniz.

Html Kod:

<div id="katman1" class="sari_yazi"></div>
<div id="katman2" class="siyah_zemin sari_yazi"></div>

Css Kod:

#katman1{
    width:100px;
    height:100px;
}
#katman2{
    width:250px;
    height:250px;
}
.siyah_zemin{
    background-color:yellow;    
}
.sari_yazi{
    background-color:yellow;    
}

Örnekte katmanların boyutları farklı olduğu için id tanımlamaları içerisinde boyutlandırmalar yapıldı.  Yazı rengi her ikisinde aynı olduğundan tek class tanımlaması ile bu işi hallettik, aynı zamanda katman2'de birden fazla class uygulayarak hem yazı hem zemin rengi değiştirildi.

 

CSS3 SEÇİCİLERİ
Seçici Tipi Desen Açıklama
Genel Seçici * Bütün Elementler
Element Seçici E E tipinde bir element
Özellik Seçici E[foo] foo özelliği olan bir element (id özelliği)
Özellik Seçici E[foo="bar"] foo özelliği bar olan element (id="bar") gibi
Özellik Seçici E[foo~="bar"] foo özelliği bar içeren element (id="bar barmen") gibi
Özellik alt dizesinde seçici arama E[att^="val"] Herhengi bir E elementinin özelliğinin içeriği "val" ile başlıyorsa
Özellik alt dizesinde seçici arama E[att$="val"] Herhengi bir E elementinin özelliğinin içeriği "val" ile bitiyorsa
Özellik alt dizesinde seçici arama E[att*="val"] Herhengi bir E elementinin özelliğinin içeriğinde "val" geçiyorsa
Kardeş (sibling) kombinasyonu E~F E elementi F elementinden önceyse ve kardeşseler
Çocuk Birleştiricisi E>F E elementinin çocuğu olan bir F elementi
Bitişiklik Birleştiricisi E+F E elementinden sonraki F elementi
Soy Birleştiricisi (Torun) E F E elementinin soyundan gelen bir F elementi

Dom Yapısı

Seçim işlemlerinde css, aynen bir soy ağacı mantığı ile çalışır. Yukarıda bir html dökümanın dom yapısı(soy ağacı) görülmektedir. Soy ağacının en üstünde "html" etiketi bulunuyor. Yani "html dede" demekte bir sakınca yok. "head" ve "body" etiketleri "html" in çocukları ve diğerleri de torunları olarak isimlendirilir. Bu yaptığımız tanımlar istediğimiz elemana ulaşabilmek için gereklidir.

Çocuk Seçici (">")

Bu seçim şekli ile bir elementin bir alt düzeyindeki element seçilir. Şöyle açıklayalım, 6 numaralı p elementini seçmek için;

body>p{
    color:red;    
}

"body" nin çocuğu olan "p" elementini seç demiş olduk. Eğer şöyle deseydik;

span>em{
    color:red;
}

Hem 12 numaralı, hem de 13 numaralı "em" elementi seçilmiş olur. Ama şöyle demiş olsaydık;

body>span>em{
    color:red;
}

Bu şekilde yazılırsa sadece 12 numaralı "em" elementi seçilmiş olur. Sanırım çocuk olayını anladık.

Torun Seçici (Boşluk Karakteri)

Bu seçim şekli ile bir element içerisinde bulunan tüm alt düzeydeki elementlere erişilir. Örneğin;

body em{
    color:red;    
}

şeklinde bir şeçim yapıldığında 10,12,13 numaralı "em" elementleri seçilmiş olur. Bence daha fazla örneğe gerek yok anlaşılmıştır diye düşünüyorum.

 

Yorumlar
Coder 3 yıl önce dedi ki;
Hocam allah razı olsun sizden..Seviyoruz seni Cevapla
^
X