A CSS styled table

Tarih: Kasım 17, 2008 Yazar:  
Kategori: CSS Makaleleri

Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go. Devamını Okuyun…

Turning a list into a navigation bar

Tarih: Kasım 17, 2008 Yazar:  
Kategori: CSS Makaleleri

Turning a list into a navigation bar
I’ve received a couple of requests for a description of how I created the navigation bar that is currently used on this site. The CSS used isn’t all that advanced, and I hadn’t really thought about describing it in detail, but after being asked about it I decided to do a write-up. Devamını Okuyun…

How To Clear Floats Without Structural Markup

Tarih: Kasım 17, 2008 Yazar:  
Kategori: CSS Makaleleri

Clearing Floats The Old Fashioned Way
When a float is contained within a container box that has a visible border or background, that float does not automatically force the container’s bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say “That’s not right!” True, IE/Win does enclose a float within a container ‘automatically’, but only if the container element happens to possess the MS-only quality called hasLayout. Devamını Okuyun…

CSS Nedir?

Tarih: Ağustos 10, 2008 Yazar:  
Kategori: CSS Makaleleri


ilyas canbayİlk olarak 1995′de ortaya çıkan CSS, 1996 yılında W3C (Dünya Çapında Ağ Birliği)’ne kabul edildi. W3C’ye katılması demek bu kodlama biçiminin tüm tarayıcılar tarafından destekleneceği anlamına geliyordu. Bu tarihten itibaren W3C’ye üye olan tüm tarayıcı grupları CSS’nin yeni versiyonlar tarafından desteklenmesini kabul etmiştir. Nitekim Mayıs 1998′de gerekli güncellemeler yapılarak CSS 2′ye geçiş yapılmıştır. Ardından CSS 2.1 ile bazı özellikler yenilenmiştir.

Gelelim CSS’nin ne işe yaradığına… Web sayfalarının iki önemli öğesi sayfalarda yayınlanan bilgi ile stilin birbirine uyarlanmasıdır. Bu nedenle HTML ve CSS’nin birbiriyle uyumlu olarak çalışması ve sayfa stillerinin birkaç değişiklikle güncellenebilmesi bize kolaylık sağlayacaktır. Terim olarak CSS’nin İngilizce’deki açılımı “Cascading Style Sheets” dir. Adından da anlaşıldığı gibi içerisinde geçen “style” kelimesi sayfada yer alan bilgilerin belirli bir stil (tarz) ile sunulması olayıdır.

Kısaca CSS, HTML sayfaların stil olarak düzenlenmesinde bize kolaylık sağlar. Mesela web sitenizde yer alan tüm sayfalarda yazı tipini “verdana”, yazı tipi boyutunu da “10 punto” olarak ayarlamak istiyorsunuz. Bunu “style” dosyasında tek bir satırla halledebilirsiniz. CSS kullanmıyorsanız bu değişikliği bütün sayfalarda yapmak zorunda kalırsınız. İşte bu noktada CSS’nin çok önemli faydası vardır.

CSS’nin temel özellikleri nelerdir?

Style dosyasında yapacağınız birkaç değişiklikle web sitenizde yer alan tüm sayfaların yazı tipini, boyutunu, rengini, arka planını vb kolayca değiştirebilirsiniz.

CSS, temel olarak kullanımı kolay bir dile sahiptir. HTML’yi bilen herkes CSS’den istifade edebilir. Ayrıca HTML’de kullandığımız etiketlerin başında ve sonunda yer alan < – > gibi işaretleri kullanmamıza gerek yoktur. Bu nedenle yazımı gayet basit ve sadedir.

Diğer bir özellik de yazı tipi gibi özelliklerin “style” dosyası ile ayarlanmasıyla belirli HTML kodların diğer sayfalarda kullanılmasına gerek kalmamasıdır. Böylece sayfaların boyutundan tasarruf edebiliriz.

CSS’yi nasıl öğrenebilirim?

CSS’yi öğrenmek hiç de zor değil. Ancak CSS’ye başlarken bir parça HTML bilginizin olması gerekir. Çünkü CSS, HTML’nin kullanımını kolaylaştıran bir tür web yazılımıdır.

Stil Sayfasını HTML İçerisinde Çağırmak (CSS)

Tarih: Ağustos 10, 2008 Yazar:  
Kategori: CSS Makaleleri


Dış Stil Sayfası (External Style Sheets)

Birden fazla sayfada tek tip stil kullamak için “style” dosyası oluşturmamız gerekir. Oluşturacağımız stil dosyasının uzantısı .css şeklinde olmalıdır.

Bunu yaptıktan sonra HTML sayfalarda “style” dosyasını çağırmamız gerekir. Her sayfanın header bloğuna ekleyeceğimiz kısa satırla bunu sağlarız:

<link rel="stylesheet" type="text/css" href="stil.css" />

Bu örnekte “style” dosyasının ismi “stil.css” dir. Bu dosyanın ana dizinde olması gerekir. Başka bir dizinde bulunuyorsa bunu “dizin/stil.css” şeklinde ilgili klasörün ismini vererek belirtmemiz gerekir.

Bu tür “style” dosyalarına “dış stil sayfası” diyebiliriz. Tüm sayfalarda tek tip stil kullanmak için bunu tercih edebiliriz.

İç Stil Satırları (Internal Style Sheets)

Ayrıca “dış stil sayfası” kullanmak yerine stilimizin tamamını ilgili sayfada header bloğuna ekleyeceğimiz “iç stil satırları” ile sağlayabiliriz:

<style type="text/css">
P {color: black; font: verdana}
H1 {color: red; font: verdana}
</style>

“İç stil satırları” bazı eski tarayıcılar tarafından desteklenmeyebilir. Zaten günümüzde Firefox 2 ve Internet Explorer 6/7 gibi yeni kuşak tarayıcılar tercih edilir. Yine de eski tarayıcılarda bunu önlemek için yukarıdaki kodun başına <!– imlecini; sonuna ise –> imlecini yerleştirerek CSS komutunu aşağıdaki gibi kapatmamız gerekir:

<style type="text/css"> <!--
P {color: black; font: verdana} /* Satır Yorumu */
H1 {color: red; font: verdana} /* Satır Yorumu */
--> </style>

Ayrıca her bir satırda C dilindeki yapıya benzer şekilde /* */ iki işaret arasında ilgili satırlar hakkında yorum ekleyebilirsiniz.

Her bir sayfada farklı stil kullanmak için bu yöntemi tercih edebiliriz.

Sayfa 1 - 3123