Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS

CSS Kullanım Biçimleri ve Yöntemleri

CSS'leri sitelerimizde kullanmanın 3 farklı yolu vardır.

Satır İçi (Yerel) CSS

CSS tipi (In-line Style), özellikleri direkt öğenin içine, satıra uygular. Yani bir öğede uygulanan CSS özelliği başka bir öğede kullanılamaz. CSS yazım kurallarının değişmeden uygulandığı bu tip en yüksek önceliğe sahiptir. Öyle ki bir projede öğenin satır içi CSS'i ile beraber harici CSS'i varsa varsayılan olarak okunacak olan tip budur.

Uygulama şekli: style özelliği ile uygulanır. Örnekler ile açıklayalım.

Örnek: h1 etiketine satır içi css uygulayarak paragrafı yeşil ve ortaya hizalı yapalım.

<html>
<head>
    <title>Arda Karaçayır – CSS Dersleri</title>
</head>
<body>
        <h1 style="color: green; text-align: center;">Merhaba Dünya</h1>
</body>
</html>

Yerel CSS'in en büyük dezavantajı her satıra tek tek CSS özellikleri yazılmasını gerektirmesidir. Bu nedenle kullanımını önermemekteyiz.

Gömülü (Global) CSS

bu tip CSS kodları (Internal Style Sheet) sayfamızın <head> kısmında <style> … </style> etiketleri içinde yer alır. Hemen hemen HTML ve CSS kodları birbirinden ayrılmış olur bu kullanımda.

Örnek: <p> etiketine uygulanmak üzere yazı rengini mavi, büyüklüğünü 22px yapalım.

<html>
<head>
    <title>Arda Karaçayır – CSS Dersleri</title>
    <style>
    p {
        color: blue;
        font-size: 22px;
    }
    </style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>

Gömülü CSS kodlarımız sadece bu HTML sayfasını etkileyecektir. Diğer sayfada ki <p> etiketleri normal şekilde yazılacaktır.

Global kullanımdaki CSS'imizde seçici olarak etiket seçicisini kullandık. Seçicileri, istediğimiz kısımların özelliklerini değiştirmek için tasarlıyoruz. Bu yüzden seçicinin tipini buna göre seçmeliyiz. Çünkü bir seçiciyi aynı sayfada bir çok kez kullanmamız olasıdır. Bu yüzden etiket seçicisi yerine sınıf (class) seçiciyi kullanmalıyız. Gelin bunu örnek ile size anlatalım.

Örnek: bu örnekte içerik adında bir sınıf seçicisi tanımlayacağız ve <p> etiketinde bunu kullanacağız. Eğer ki etiket seçicini kullansaydı; sayfamızda bir çok <p> etiketi varsa hepsi aynı özellikte olacaktı.

<html>
<head>
    <title>Arda Karaçayır – CSS Dersleri</title>
    <style>
    p { /* u normal bir etiket seçici */
        color:blue;
        font-size: 38px;
    }
    .icerik { /* Bir sınıf seçicisi tanımladık */
        color: red;
        text-align: left;
    }
    </style>
</head>
<body>
    <p>Normal P seçicisi</p>
    <p class="icerik">içerik adlı sınıf seçicisinin özellikleri.</p>
</body>
</html>

Bir bilgi: CSS dilinde açıklama satırları /* ile başlar, */ ile biter. Betik olsun olmasın bütün programlama dillerinde açıklama satırları kullanılır ve kullanımları dilden dile farklılık gösterir.

Harici (Bağlantılı) CSS

Harici stil (External Style Sheet) kullanımı başlıca stil kullanım çeşididir. Stillerimizi “.css” uzantılı bir dosyaya yazıp bu dosyayı da etiketi ile HTML sayfamıza çağırıyoruz.

Harici bir CSS dosyası oluşturalım ve HTML sayfamıza çağıralım.

Önce HTML sayfamızın olduğu yere /css veya /style adında bir klasör oluşturalım. Tamamen size bağlı, anımsayacağınız bir klasör olsun.

Klasörün içine "stil.css" adına bir CSS dosyası oluşturun ve düzenlemeye başlayalım.

Örnek: stil.css dosyamızın içeriği.

.stilimiz {
	color: blue;
	text-align: center;
	font-weight: bold;
}

Hadi şimdi de bu dosyamızı HTML sayfamıza çağıralım.

<html>
<head>
    <title>Arda Karaçayır – CSS Dersleri</title>
    <link href="css/stil.css" rel="stylesheet" type="text/css">
</head>
<body>
    <p class="stilimiz">Harici CSS Denemesi</p>
</body>
</html>

Evet bu dersimizin sonuna geldik.

Umarım paylaşımı faydalı bulmuşsunuzdur. Aklınıza takılan yer olursa yorum alanında sorabilirsiniz.

Yorum Yap

Not: Yorum alanı HTML kod desteklememektedir...
Gönder
Yorum gönderildi. Onaylandıktan sonra yayınlanacaktır.
© 2020 - Arda KARAÇAYIR | Freelance Web Developer