Css Web Sayfalarına Nasıl Eklenir

Egemen Özbeyli CSS3

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 da ilginizi çekebilir  Responsive HTML5
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.


Soru ve görüşlerinizi bekliyorum…