ÜMİT BLOG - CSS NEDİR HTML NEDİR?

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ç:

Umi,t Blog

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ç:

Umit blog

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ç:

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.