1 Nisan 2014 Salı

CSS Dersleri 2 Stil Şablon Çeşitleri 1 HTML'e CSS Bağlama Yöntemleri

Merhabalar herkese. CSS derslerimizin 2. si ile yolumuza devam ediyoruz. Bugünkü dersimizin konusu Stil şablon çeşitleri olacak. Daha Türkçesi CSS i HTML dosyalarımıza nasıl ekleyebiliriz.

O zaman Bismillah diyelim ve başlayalım.

İlk olarak şunu söylemeliyim. HTML derslerimizin 15. sinde sizlere bundan sonra kullanacağımız editör diyerekten Dreamweaver ı tanıtnmıştım. CSS derslerimiz boyunca kod yazarken Dreamweaver ı kullanacağım sizlerinde bunu kullanmanızı tavsiye ederim. Ama programı bulamadıysanız Notepad++ ile de devam edebilirsiniz.Dedikten sonra asıl işimize dönebiliriz.

Bir HTML içinde 4 farklı şekilde CSS yazabiliriz. 2 sini bu dersimizde kalan 2 sinide 3. dersimizde anlatmaya çalışacağım.

1. Yerel Stil Şablonu (In-Line)


Bu yazım şekli HTML de bir etiket içinde etkili olacak şekilde kullanılan CSS yazma yöntemidir.

Nasıl yaptığımızı görmek için Dreamweaverda bir HTML dosyası oluturalım.



Açtıktan sonra şunu yapacağız. Sayfa içinde 4 tane başlık yazacağız. Bunların özellikleri de farklı olsun istiyorum.

CSS oluşturma işleminin en temel parametresi style dır. Şimdi style parametesi ve özelliklerini kullanarak bir etikette CSS özelliklerini kullanmaya çalışacağız.



Kullanımı:

<Etiket_ismi style="özellik1:değer ; özellik2:değer"></Etiket_ismi> 

şeklindedir.

Örneğimizde de çok rahat kullanım hakkında fikir sahibi olabiliriz. Ama kısa anlatmak gerekirse, açılan etiket içinde style ifadesinden sonra eşittir işareti konur ve çift tırnaklar arasına özellikler yazılır. Özellik yazılırken değer kısmı : iki noktadan sonra yazılır ve yazılan her bir özellik noktalı virgül ile bir birinden ayrılır. 

Yukarıdaki oluşturduğumuz sayfanın bir tarayıcıdan görünüşünü görelim ve sonrada bu kullanım ile ilgili biraz daha detay bilgi verelim.


Tek etiketi etkileyen CSS yazımı olduğu için yerel stil şablonu dedik ismine. İngilizce olarak In-Line da denmekte. Satır içi CSS.  Bir artısı bir de eksisi var bu kullanımın.

Eksisi şu her etiket içine tek tek yazmak bir sürü kod demek buda sayfanın aşırı kod ile şişmesi ve yüklenmesi sırasında süreden kaybımız demektir. Bu önemli bir eksiktir.

Ama bir artısı var ki bu artısı nedeni ile belkide bu kullanıma gereksinim duyuyoruz. Birazdan global  stil şablonunu anlatırken göreceksiniz, biz bir etiket için bir kere kod yazarız ve etiketin bulunduğu yerde bu CSS e o etiketi bağlar isek o özellikleri çeker. 

Ama ya ben yazılan bütün h1 etiketinin aynı özellikte olmasını istemeseydim. İşte tamda burada yerel stil şablonu dediğimiz bu kullanım imdadımıza yetişiyor. Mesela diyelim ki h1 etiketi için bir CSS yazdık bir sürü özelliğini belirledik ama h1 etiketi ile yazılan bir başlığın bir tanesinin renginin belirlenen bu renkten farklı olmasını ama diğer tüm özelliklerinin aynı olmasını istiyorum. Böyle bir durumda yazılan global ya da bağlantılı CSS e etiket bağlanır ama sadece değişik olmasını istediğimiz özellik style ile etiket içinde belirtilir. 

Etiket içinde belirttiğim özellik o etiket için birinci derecededir. Oraya ne yazdı isem onu ekran gösterecektir. Global yada CSS dosyası içindeki değer geçerli olmayacaktır. Burada ne demek istediğimi global stil şablonunu da anlatınca örnek ile gösterip daha net anlaşılmasını sağlayacağım.

Şimdi geçelim global stil şablonu tanımlamasına.

2. Global Stil Şablonu:


Global stil şablonu biraz önce de belirttim ama daha detaylı anlatmak gerekirse şöyle diyebiliriz. Bir HTML sayfasında bir etiket için aynı özelliklerin tüm sayfada kullanılması gerektiği durumlarda global stil şablonunu kullanırız.

Daha Türkçesini program üzerinden anlatalım.

Az önceki örneğimiz ile devam edelim. H1 etiketi için bir css yazacağız ve global olarak bağlıyacağız ve tüm başlıkların stili aynı olacak.






İlk olarak bilmemiz gereken işlem bir CSS global olarak nasıl bağlanır?

Bir CSS'i global olarak bağlayacaksak 

1. Kodları <head>... </head> etiketleri arasına yazılmak zorundadır.

2. CSS kodlarının başlangıç etiketi <style> bitiş etiketide </style> dır.

3. <style> etiketi içine yazacağımız stil şablonun bir CSS olduğunu bildirmemiz gerekir. 

Yoksa bunu tarayıcı algılayamaz. 

Kullanımı :

<style type="text/css"> 

şeklindedir.

4. CSS yazmanın etiketleri bağlamanın etkilemenin pek çok yöntemi var. Bunlar sonraki derslerimizin konusu olduğu için bunların detayına girmeyeceğim. Ama en temel anlamda etiket bazlı CSS de, etiket ismi yazılır süslü parantezler açılır ve özellik değer şeklinde yazılarak CSS oluşuturulabilir.

5. Her özellik noktalı virgül ile ayrılır.

6. Anlattığım 5 özelliği de ilk resme bakarak rahatça görebilirsiniz.

Az önce bahsettiğimiz olaya gelelim in-line yazılan CSS global yazılan CSS den daha önceliklidir. Şimdi bunu şöyle test edelim. Ben birinci başlığın renginin kırmızı olmasını istiyorum. Sadece şunu yapacağım birinci satırdaki başlığın kodlarına style ile renk kodunu vereceğim ve sonucu görelim.



Görüldüğü gibi yazdığım CSS de renk mavi olmasına rağmen In-Line yazdığım CSS i geçerli kabul etti.

Böylelikle 2 yöntem ile HTML dosyasında CSS yazmayı öğrenmiş olduk. Diğer 2 yöntemi 3. dersimizde anlatmaya çalışacağım diyeyim ve huzurdan ayrılayım. Çalışan arkadaşlarıma kolaylıklar dilerim vesselam. 

Derslerle ilgili olumlu, olumsuz yorumlarınızı bildirirseniz sevinirim teşekkürler.


KONUNUN YAZARI NCFKR
DİĞER KONU ANLATIMLARI İÇİN TIKLA VE ÖĞREN

Hiç yorum yok:

Yorum Gönder