Css Web Sayfalarına Nasıl Eklenir

Merhaba arkadaşlar,

Geçen hafta yaptığım paylaşımımda Css’e Başlamak ve Css’in yapısı adlı paylaşımımda Css’e giriş yapmıştık,bu hafta ise Css’i web sayfamıza nasıl ekleyeceğimizi anlattıktan sonra artık Css üzerine somut çalışmalar yapmaya başlayacağız.

Bu paylaşımı sakın göz ardı etmeyin,Çünkü bundan önceki hafta yaptığım css’in temel yapısı ve bugünkü paylaşımım css’i web sayfasına entegre adlı paylaşımlarım Css’in temelini oluşturmaktadır,Bu 2 anlatımı kavramadan css’in temelini kavrayamayız,Neyse konuyu fazla uzatmadan paylaşımıma geçiyim.

1 – Css’i Satır İçinde Tasarıma Eklemek

Css’i direk olarak kod satırlarımıza dahil edebiliriz fakat bu fazla tercih edilen bir yöntem değildir,fakat yinede bilmenizde fayda olucağını düşünüyorum.Bunun nasıl yapıldığını merak ederseniz aşağıdaki örnekten faydalabilirsiniz.


<p style="color:#FF0000; font-size:15px;">Buraya paragraf geliyor</p>


2 – Css’i Style Yöntemiyle Tasarıma Eklemek

Bu yöntemi kullanırken <head></head> tagları arasına style satırlarımızı ekleyerek css’i kullanabiliriz.Örnek vericek olursak ;


<head>
<style type="text/css">
p {
color:#FF0000;
font-size:15px;
}
</style>
</head>

1. yönteme göre daha avantajlı olduğunu söylemek mümkün,kullanmanızı tavsiye etmesemde xhtml ve css’i birbirinden ayrı tuttuğu için ilk yönteme göre daha mantıklıdır.

3 – Css’i Harici Style Sayfası Kullanarak Tasarıma Eklemek

Benim tasarımlarımda tercih ettiğim yöntemdir bu ve sizlerede tavsiye ediyorum.Dışarıda hazırladığımız özel bir css şablonunu sayfamızdaki elementlerle etkileştiriyoruz,Bunun içinde yaptığımız tek şey bir satır kod eklemek.Örneğe bakarsanız daha iyi anlayacaksınız.

<head>
<link rel="stylesheet" type="text/css" href="cssdosyamiz.css" />
</head>
p {margin-left:20px; color:#FF0000;}
body {background-image:url("images/arkaplan.gif");}

Bu şekilde cssdosyamiz.css adlı dosyamızı kodlarımıza bir satır ile ekleyebilir ve dışarıdan kontrol edebileceğimiz bir css şablonu oluşturabiliriz,Ve bunun avantajı her sayfada tekrar tekrar eklemek zorunda kalmamamızdır,Head tagları arasında her sayfada çalışacaktır.

Bunun dışında @import yöntemiylede kullanımı vardır fakat bu yöntemi kullanmanızı tavsiye etmiyorum,Çünkü bazı browserlarda problem çıkarabilir,Siz 3. yöntemden vazgeçmeyin derim 🙂

Bu paylaşımımızda burda son buldu,Önümüzdeki hafta sayfalarımızın tasarımına css ile nasıl müdahele edeceğimizi öğreneceğiz.

Bu da ilginizi çekebilir  Css Font Özellikleri

Soru ve görüşlerinizi bekliyorum…



  • cok güzel bir egitim oldu.elinize yüreginize saglık.tebrikler. başarılar dilerim.

  • çok teşekkürler acayip işime yaradı

  • Heh aradığım şey buydu işte çok sağolasın dostum 🙂

  • Cem

    Merhaba benim şöyle bir sorunum var WordPress kullanıyorum ve premium featured posts slider eklentisi kurdum ancak slider çalışmasına rağmen düzgün görünmüyor sanırım css de bir sorun var bunu nasıl çözebilirim buyrun sorunun fotoğrafı yardımcı olursanız sevinirim

    • Cem

      yardım edecek olan var mı bu konu hakkında 🙂

      • Bu sorun eklentiyle de alakalı olabilir, sizin temanızın CSS’i ile de. Belki tanımlamalar çakışıyordur. Örneğin #slider şeklinde bir id tanımlaması hem eklentide hem de sizin temanızın CSS’in de varsa bu tarz sorunlara sebep olabilir.

        • Cem

          Anladım yardımınız için teşekkürler, bir çok temada denedim hep aynı sorun çıktı ama sade temalarda normal çalışıyor eklenti. Peki bu durumdan kurtulmak için tanımlamaları mı değiştirmek gerekiyor?

          • Dediğim gibi CSS dosyaları içerisindeki class ve id tanımlamaları çakışıyor olabilir. Aynı sorun JS dosyaları için de geçerli olabilir. Hatta ve hatta jQuery dosyasında olan bir sorun bile bu tarz görüntü bozukluklarına sebep olabilir. Birçok sebebi olabilir. Elimden gelen sadece bunları belirtmek. Ama şu kısmı böyle yapın düzelir demek inanın imkansız. Kolay gelsin.

          • Cem

            Peki teşekkürler yardımınız için