Birkod - Css Stil Sayfasi

Birkod

Css Stil Sayfasi

Yazar: BirKod Tarih: 25.07.2015
Merhaba arkadaşlar. Önceki dersimizden bu dersimize aktardığımız CSS ile dökümanlara ulaşmayı anlatacağız. Öncelikle bahsetmek istediğimiz konu bu css özelliklerini hangi dökümanlarda, nasıl çalıştıracağımızdır. Önreğin bir h1 etiketine verdiğimiz color=red özelliğini farklı bir sayfada h1 etiketini kullanırken nasıl çağıracağız? İşte bu konumuzda genel olarak bundan bahsedeceğiz..

1. YÖNTEM: Her Sayfaya Ayrı Stil Dökümanları

Öncelikle söylemeliyim ki bu yöntemi kesinlikle tavsiye etmemekteyiz. Uzun CSS Kodlarımızın hepsini her yeni sayfaya eklemek hem siteyi yavaşlatacak, hem de düzenleme açısından büyük bir eksi alacaktır. Bu nedenle sadece çalışırken kolaylık olması açısından bahsetmek istedik.
Yukarıdaki kodda dikkatimizi çeken kısmı farketmişsinizdir. Evet, style kodlarımızı head taglarımız arasına ekledik ve tüm style taglarımızın içeriği bize css dökümanlarını kullanabilme avantajı sağlıyor. Fakat yalnızca bu sayfada...

2. YÖNTEM: Stil Dosyası Belirleme ve Çağırma

Genelde kullandığımız yöntem budur. Yeni bir döküman oluştururuz. İsmine stil.css deriz ve html dökümanımıza bu dosyamızı çağırırız. Gelin nasıl yapacağımıza bakalım..

Öncelikle yeni bir klasör oluşturalım ve içerisine yukarıda da belirttiğimiz gibi 2 adet dosya açalım. Bu dosyalarımızı Yeni › Metin Belgesi diyerek oluşturabiliriz. Yalnız dikkat edin. Uzantıları .txt olmamalıdır.. Döküman uzantılarını dikkate alarak oluşturalım..

Şimdi bu dökümanlarımızı bir not editörü ile açalım. (Notepad++, Sublime Text, Not Defteri...)

stil.css

h1 {color: red}

index.html

Dökümanlarımıza bu kodları ekledikten sonra farkettiğiniz üzere kodlarımız arasına link etiketini ve link etikinin içerisine href komutu ile dosyamızı, rel komutu ile ise sayfalar arası bağlantıyı kurmayı sağlamış oluyoruz. Bu sayede bundan sonra stil.css dökümanımız içerisine yazacağımız tüm özelliklerimiz stil.css dosyamızı çağırdığımız tüm sayfalarımızda geçerli olacaktır. Wordpress gibi web sitelerinde stil dosyamızı yalnızca header.php'ye eklemekteyiz. Daha sonrasında ise header.php içeriğimiz tüm sayfamızda görüntülenecek olmasından dolayı stil dosyamızda tüm sayfalarımızda eklenmiş olacaktır. Yani aslında 2. yöntem bizim işimizi oldukça kolaylaştıracaktır.
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol