Css Dersleri

Konu: Css Dersleri 10/5/2008, 11:08 pm

Not: Dersler fatihhayrioglu.com adresinden alıntıdır..

CSS’e başlamak..
Cascading Style Sheets (CSS) HTML ‘deki bazı problemleri halletmek için ama asıl neden olarak da; web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir standarttır.

CSS 1996′da W3C tarafından duyuruldu. Son olarak CSS2.1 versiyonu işler durumdadır. CSS3.0′da çalışmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulaşabilirsiniz.

CSS kullanımının bir çok bakından avantajları bulunmaktadır. Belli başlı avantajlarını sıralarsak:
Görünüm Avantajları

CSS HTML’e göre bir çok stil özelliğine sahiptir. CSS’in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur.

1. <h1>CSS'e Giriş</h1>

HTML’de bu elementi(h1) kalın,altı çizili, ardalanı kırmızı olarak atama gibi çeşitli stiller verbiliriz ancak bunlar içinde ayrı HTML elementleri kullanmak zorundayız (örn:strong, gibi), ancak CSS de bunu tek bir elementle yapabiliriz ve ayrıca daha fazla stil özellikleride atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)

1. h1 {color: white; font: italic 11px Arial, serif; text-decoration: underline; background: yellow url(titlebg.gif) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px;}

Kullanım Kolaylığı

HTML’de her elmente artı özellikler eklemek için başka bir element ve özellik eklmemiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptımızı düşünütseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.

1. <h1><font color="blue">Başlık</font></h1>

Bunun gibi onlarca veya yüzlerce başlığınız olduğunu düşünün, gerçekten çok zor. CSS’de aynı işlem için

1. h1 {color: blue;}

hatta daha sonra bu elementin özelliklerinde değişiklik yapmamızda kolay olacaktır. Hatta bu işlemi sadece bu etiket için değil diğer etiketlerede uygulayabiliriz.

1. h1, h2 {color: blue;}

Ayrıca tek bir CSS dosyası ile sitenin tamamının yönetmekte web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik yaparak tüm sitemizi yönetebiliriz isterse yüzlerce sayfa olsun.
Tasarım Tutarlılığı

Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz bu ayrıca sitenize tutarlılık kazandıracaktır. Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak sayfa tutarlılığını sağlayabilirsiniz. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılığınızı koruyarak ziyaretçinize düzenli bir içerik sunmuş olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmiş olacaksınız. Sayfalar hızlı yüklenecek ve doğru olarak yüklenecektir, çünkü aynı elementleri diğer sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır. CSS+XHTML ile HTML göre %50′ye varan performans ve hız artışları olacaktır.
Gelecek Vaadediyor

HTML giderek işlevselliğini kaybedeceği ve XML ve dolayısı ile XHTML’in işlevselliğini artıracağı düşünülürse, CSS gibi tümleşik bir stadardın önemi daha çok anlaşılıyor.

XHTML ile daha temiz kodlar üretilecek, farklı platformlara(pda,cep telefonu vs.) uyum sayesinde bilgi dolaşımı kolaylaşacak, sayfalarımız arama motorları programları tarafından daha anlaşılır olacaktır. CSS, XHTML teknolojisi ile tümleşik olarak çalışarak bizlere gelecek vaadediyor.

Konu: Geri: Css Dersleri 10/5/2008, 11:09 pm

CSS’in Yapısı

CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value).

Not

XML de Seçiciler HTML elementleri dışında yeni oluşturulan elementlerde olabilir.

Tüm HTML elementleri potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır.

Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında ” ; ” noktalı virgül kullanılır. özellik ve değerler birbirinden
” : ” iki nokta üstüste ile ayrılır.

1. h1 {font: medium Arial;}

şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font’un boyutunu ikincisi ise font ismini gösterir. İleride bu konuya daha ayrıntılı gireceğiz. Ayrıca sadece font etiketine özel ” / ” kullanımı vardır örnek aşağıda:

1. h1 {font: medium/120% Arial;}

Burada ” / ” Seçicinin font boyutunu ve satır yüksekliğini gösterir.(font_boyutu/satir_yuksekliği)
Gruplama

Yukarıda hep bir Seçici’yi sadece bir HTML elementine atamayı gördük, Birden fazla HTML elementine de atama yapabilirz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir.

1. p, h3 {font-family: Arial;}

Not

CSS2 ile birlikte Evrensel Seçici(universal selector) Seçiciler arasına katılmıştır,
” * ” ile gösterilir.

* {color: red;}

tüm elementleri kırmızı yapar. Bir anlamda gruplama yapar. Ayrıntılı bilgi için W3

Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için ” , ” virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar.

Bildirim’lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.

1. p, h3
2. {
3. font-family: Arial;
4. font-size:2;
5. font-weight: bold;
6. }

Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız.
Sınıf Seçicisi(Class Selector)

Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz

1. p.sagadaya {text-align: right}
2. p.ortala {text-align: center}

Bu Seçicileri sayfamızda uygulamak için;

1. <p class="sagadaya">Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p>
2. <p class="ortala">Yukarıdaki bilgiyi dikkatlice okumalısınız</p>

Birde önemli bir tanımlama yapacağınızı düşünün, ancak sadece bir HTML elementine değilde istediğiniz sayıda HTML elementinde bunu kullanmak isterseniz;

1. .ortala {text-align: center}

Bu tanımlamayı yaptıktan sonra istedğimiz her HTML elementine bu sınıfı uygulayabiliriz.

1. <span class="ortala"> Burada birşeyler yazar </span>
2. <p class="ortala">Burada da başka bişeyler yazar</p>

Çoklu sınıflar, birden fazla sınıfı bir HTML elementine uygulamak için kullanılır.

1. <p class="onemli uyari">Ã?lkemizde meydana gelen trafik kazalarının yaklaşık % 90'ı insanların hataları sonucu eydana gelmektedir.</p>

Yukarıdaki örnekte görüldüğü gibi bir uyari Sınıfımız birde onemli Sınıfımız mevcut. Bazı metinlerin önemli uyarı olacağı düşüncesi ile böyle bir atama yapılabilir. Bunun için kullanıcığımız kod;

1. .onemli {font-weight: bold;}
2. .uyari {font-style: italic;}
3. .onemli.uyari {background: silver;}

onemli metinler için kalın, uyari için italiktik atmalar yapıyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken CSS Seçicisinde .onemli.uyari şeklinde yazıyoruz.
Id Seçecileri

Id Seçicisi Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir.

1. …
2. #mavi
3. {
4. background:blue;
5. }
6. #kirmizi
7. {
8. background:red;
9. }
10. …
11. <p id="mavi">Bu yazının arkafon rengi mavi</p>
12. <p id="kirmizi">Bu yazının arkafon rengi kırmızı</p>

Sınıf mı? Id mi?

Yukarıda Id Seçicisi için her nekadar da bir sayfada sadece bir defa kullanılır desekte tasarımcının sayfada bir çok yerde kullanmasına tarayıcılar ses çıkarmaz, yani hata mesajı vermez. Ancak Bu elementleri DOM scriptlerinde kullanırken Id atamasını bir kaç yerde yaptığımızda hata alacağızdır. Bu nedenle her nekadar tarayıcılar izin versede Id Seçicisini bir kez kullanmalıyız. Birden fazla kullanacağımız elementler için Sınıf Seçicisini kullanmalıyız.

Bu kodumuzu daha kullanışlı ve temiz yapacaktır.

Sınıf ve Id Seçicileri küçük-büyük harfe karşı duyarlıdır;

1. p.onemliBilgi {font-weight: bold;}

ve kullanımıda;

1. <p class="onemlibilgi">Uygulama olmaz .</p>

Yukarıdaki kod uygulanmayacaktır çünkü ” B ” bir yerde büyük birde küçük kullanılmıştır. Bazı eski tarayıcılar bu kuralın dışında kalabilir.

Konu: Geri: Css Dersleri 10/5/2008, 11:10 pm

(X)HTML Sayfa Yapısı ve CSS Kullanımı
CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir.
(X)HTML Döküman Hiyerarşisini Anlamak

Seçici(Selector) ve Döküman arasındaki ilişkiyi anlayabilmemiz için, dökümanların nasıl planlandığını tekrar gözden geçirmemiz gerekir. Aşağıdaki basit (X)HTML dökümanı üzerine biraz düşünelim:

1. <html>
2. <head>
3. <title> CSS (X)HTML Hiyerarşisi </title>
4. </head>
5. <body>
6. <h1>CSS<em>(X)HTML Hiyerarşisi </em></h1>
7. Sitemize hoş geldiniz <em>Merhaba</em>biz <strong>sizler için <a xhref="konu.html"> bazı <em>önemli</em> konular </a></strong>! hazırladık
8. <ul>
9. <li>Konu Başlıkları :
10. <ul>
11. <li><strong>Asıl</strong> Giriş</li>
12. <li>Önsöz</li>
13. <li><em>ilk</em> bölüm:
14. <ol>
15. <li>Elma</li>
16. <li>Armut</li>
17. <li>Karpuz</li>
18. </ol>
19. </li>
20. </ul>
21. </li>
22. <li>...vd.</li>
23. </ul>
24. <p>
25. Ayrıntılılı bilgi çin <a xhref="mailto:bilgi@zerzebvat.com"> mesaj gönder </a>
26. </p>
27. </body>
28. </html>

CSS’in güçlü olmasının en büyük nedeni (X)HTML elementleri arasındaki ilişkiden yararlanmasıdır. (X)HTML dökümanları gizli bir hiyararşi ile oluşturulur. Bu hiyerarşi içinde tüm (X)HTML elementleri kendilerine uygun bir yer bulur. Bu ilişkiyi biz soy ağacına benzete biliriz.

Yukarıdaki (x)html yapısını bir soy ağacı gibi düşünüp değerlendirirsek:

Bir elementin ebeveyn(anne-baba) olduğunu anlamak için o elementin altında başka element olup olmadığına bakmalıyız, eğer varsa o element ebeveyndir. Yukarıdaki şekilde p elementine dikkat edelim. p bir ebveyndir çünkü altında em ve strong elementleri bulunmaktadır. strong da bir ebeveyndir ki onun altında a elementi vardır. Bir elementin çocuk element olduğunu anlamak için de üstünde bir elementin olup olmadığına bakarız. Yani yukarıdaki olayın tersi. Buna göre strong elementi p elementinin bir çocuğudur.

Daha karmaşık yapılarda ata(ancestor) ve torun(descendant) ilişkisi vardır. Aradaki fark eğer bir element diğer elementin tam olarak bir seviye üstünde ise o ata diğeride torun durumundadır. Yukarıdaki şekili incelersek ilk ul elementinin iki adet li çocuk elementi bulunmaktadır ve bu iki li elementinin altındaki tüm elementler ilk ul elementinin torun elementleridir.
Torun Seçicileri (Descendant Selectors)

Bu modelin avantajlarından birisi Torun Seçicileridir(diğer bir isimleride içiçe seçicilerdir). Torun Seçicilere yapılan tanımlama sadece belitilen elementlere uygulanır bu kuralların haricinde kalanlara ise uygulanmaz. Bir örnek verecek olursak bir h1 elementinin em torun elementine belirli bir stil uygulamak istesek. Normalde bir sınıf tanımlaması yapılarak her h1 elementi altındaki em elementini tek tek seçerek bu sınıfı uygulamamız gerekir ki bunun font etiketi uygulmasından farkı yoktur. Açıkcası bu işlemi yapmak uzun zaman alacaktır. Ancak Torun Seçicisi kullanarak bu işi kolayca yapabilriz. örnek kod yazarsak:

1. h1 em {color: gray;}

Bu kod dökümandaki atası h1 olan tüm em elementlerini gri yapacaktır. Diğer em‘ler ise bu kuralı uygulamayacaktır.

Torun Seçicilerde, seçici kısmı birbirinden bir boşlukla ayrılmış iki veya daha fazla seçiciden oluşur. Aradaki boşluk bağlayıcı özellik taşır.

Sadece iki elementle sınırlı değiliz, sınırsız element tanımlayabiliriz.

1. ul ol ul em {color: gray;}

Torun Seçiciler çok kuvvetli olabilirler. Onlar (X)HTML ile yapılmasının imkanı olmayan işler yaparlar. Örnek bir dökümanda iki adet alan oluşturduğumuzu düşünün birinci alanın ardalanı(background) mavi, ikinci alanın ardaalanının beyaz olduğunu düşünün ve her iki alanın içinde de linkler olduğunu farz edelim. Tüm linkleri mavi olarak atamamız mümkün olmayacaktır çünkü ilk alanın ardaalanı mavi olduğu için linkler görünmeyecektir.

Çözüm Torun Seçicilerindedir; ilk alan içindeki linklere farklı renk diğerlerine farklı renk tanımlaması yaparak bu işi halledebiliriz.

1. td.sidebar {background: blue;}
2. td.main {background: white;}
3. td.sidebar a:link {color: white;}
4. td.main a:link {color: blue;}

Bir örnek daha verelim. blockquote ve p elementleri içindeki b elementi ile blockquote içinde ve normal paragraf içinde geçen b elementlerine özel bir atama yapmak istiyoruz bunun için kod yazarsak:

1. blockquote b, p b {color: gray;}

Koda dikkat edersek her iki atamayı ayrı ayrı yapmak yerine araya bir virgül koyarak birlikte yaptığımızı görürsünüz.
Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
Çocuk Seçicileri

Bazı durumlarda keyfi olarak bir torun seçicisi kullanmaktansa daha ayrıntılı bir ayrım yapmak isteyebiliriz. Örneğin bir h1 elementinin altındaki strong elementlerinden sadece Çocuk Elementi için tanımlamalar yapmak istersek (torun elementleri hariç), Bunun için çocuk bağlayıcısını kullanırız ( > ) büyüktür işareti

1. h1 > strong {color: red;}
2. …
3. <h1>Bu <strong>koda</strong> uygulanacaktır.</h1>
4. <h1>Bu <em>koddaki <strong> bu kısım </strong></em> uygulama dışıdır..</h1>

Yukardaki durumda sadece ilk strong elementi için tanımlama gerçekleşecektir ikincisi için herhangi bir stil tanımı uygulanmayacaktır.

Yukarıda ana örneğimizin bir kısmı gösterilemektedir. Ebeveyn-çocuk ilişkisini daha iyi anlamak için hazırlanmıştır. a elementi strong‘un ebevenynidir. p elementide a nın ebeveynidir. Ancak p elementi strong‘un ebeveyni değildir. Biz burada p > a ve a > strong şeklinde tanımlama yapabilriz ancak p > strong tanımlamasını yapamayız.

Birde aynı seçici içinde hem torun birleştiricisini hemde çocuk birleştiricisini kullanabiliriz.

1. table.summary td > p

Browser Uyumu :

Internet Explorer 5.0, 5.5, 6.0: desteklemiyor (7.0 destekliyor)
Netscape Navigator 6.0, 7.0: destekliyor
Mozilla 1.0: destekliyor
Opera 5.0 ‘ 6.0: destekliyor
Bitişik Kardeş Seçiciler

Bitişik Kardeş Seçicileri biribiri ardına gelen aynı seviyedeki elementlere stil tanımlası için kullanılır.

Örneğin bir h3 elementine stil uygulamak istiyoruz ayrıca bir sonraki h2 elementinede aynı stili uygulmak istediğimiz durumlarda kullanılır. Genel uygulamalarda kullanılan bir durumdur. Biz genelde h2 ve h3 arasındaki aralığı ayarlamak için bu durumla karşılaşırız. Örnek verecek olursak:

1. <body>
2. <h2>Başlık 2 <em>metni</em></h2>
3. <h3>Başlık 3 metni</h3>
4. <p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
5. </body>

Dökümanın yapısı:

Biz burada h2 ve h3 arasında boşluk vermek için aşağıdaki kodu kullanırız:

1. h2 + h3 {margin: -1em; }

Browser Uyumu :

Internet Explorer 5.0, 5.5, 6.0: desteklemiyor (7.0 destekliyor)
Netscape Navigator 6.0, 7.0: destekliyor
Mozilla 1.0: destekliyor
Opera 5.0 ‘ 6.0: destekliyor

Sonuç olarak konunun başında söylediğimiz gibi CSS, (X)HTML elementlerinin kendi aralarındaki ilişkileri kullanarak bize bir çok avantaj sağlar. Bu sayede bir çok kod yığınından kurtulmuş oluruz ve kodlarımız bir düzene girer. Bu kuralları uyguladıkça önemini daha iyi anlayacağız.

Çocuk Seçicileri ve Bitişik Kardeş Seçicileri‘ni Internet Explorer 7 versiyonundan itibaren desteklemeye başlamıştır. Bu nedenle kullanımı konusunda dikkat etmeliyiz.
Genel Seçiciler

Genel Seçiciler bir elementi bütüne uygulamak için kullanılır bu işlem için * işareti kullanılır. Aşağıdaki kod tüm elementleri kırmızı yapacaktır.

1. * { color:red;}

Ayrıca bir katmanın içindeki sınıflara uygulamak istersek

1. div .uyari * { color:red;}

katman, .uyari sınıfı içindeki tüm elementler kırmızı olacaktır.
Browser Uyumu :

Internet Explorer 5.0, 5.5, 6.0,7.0 destekliyor
Netscape Navigator
6.0, 7.0: destekliyor
Mozilla 1.0: destekliyor
Opera 5.0 ‘ 6.0: destekliyor

Konu: Geri: Css Dersleri 10/5/2008, 11:10 pm

Özellik Seçicileri(Attribute Selectors)
Bu konuya biraz geç değindik biliyorum. Ancak bu konuyu (X)HTML Sayfa Yapısı ve CSS Kullanımı makalesi içinde yazmayı düşündüğümde IE bu özelliği desteklemiyordu(şžimdi IE7 bu özelliği desteklemektedir.) bu nedenle yazımını ertelemiştim, sonrada unuttum gitti açıkçası neyse sonunda yazıyorum işte:)

CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı - Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri.
Javascript gibi id’si olan her elemente(hata daha fazlası da var) css özelliği atanması bize bir çok bakımdan avantaj sağlar.

Özellik Seçicileri HTML, XHTML veya XML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre tanımlama yapmamızı sağlar. Bir örnek verecek olursak sayfamızdaki bir resme(örn: grafik.gif) kenarlık ataması yapmak istersek:

1. img[src="grafik.gif"] { border: 1px solid #000; }

Dört çeşit Özellik Seçicisi vardır.
1- Basit Özellik Seçicisi

Belirli bir etiketin özelliğine göre tanımlama yapmamızı sağlar.

1. h1[class] {color: silver;}
2. …
3. <h1 class="selam">Selam</h1>
4. <h1 class="dunya">Dünya</h1>
5. <h1 class="ben">ben geldim </h1>

2- Özellik Değeri Seçicisi

Bir etiketin özellik değerine göre tanımlama yapmamızı sağlar.

1. img[src="grafik.gif"] { border: 1px solid #000; }

3- Kısmi Özellik Değeri Seçicisi

Bir etiketin özellik değerindeki boşluklarla ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.

1. a[title~="seç"] {color:#000;;}
2. …
3. <a href="google.html" title="Google seç">gooogle </a>
4. <a href="google.html" title="Yahoo seç">yahoo </a>
5. <a href="google.html" title="Fatih">fatih </a>

Türkçe karkaterde sorun çıkarmadı.
4- Dikkate Değer Özellik Seçicisi

Bir etiketin özellik değerindeki kesik çizgi(-) ile ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.

1. *[lang|="en"] {color: white;}
2. …
3. <h1 lang="en">Hello!</h1>
4. <p lang="en-us">Greetings!</p>
5. <div lang="en-au">G’day!</div>
6. <p lang="fr">Bonjour!</p>
7. <h4 lang="cy-en">Jrooana!</h4>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0: desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 7.0+: destekliyor

Bunların dışında CSS3 ile birlikte gelen dört tane daha yeni Özellik Seçicisi vardır. "Belirlenen Sözdizimi ile Başlayan Özellik Değer Seçicisi", "Belirlenen Sözdizimi ile Biten Özellik Değer Seçicisi", "İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi" ve Aduzayı Özellik Değer Seçicisi diye 4 adet yeni Özellik Seçicisi daha vardır. Bunlara daha sonra vakti geldiğinde değineceğiz.
Kaynaklar

* http://www.blooberry.com/
* http://www.456bereastreet.com/
* http://css.maxdesign.com.au/
* http://westciv.com/

Konu: Geri: Css Dersleri 10/5/2008, 11:11 pm

Doğru DOCTYPE Kullanımı
DOCTYPE, HTML veya (X)HTML dökümanımızın tipini göstermek için kullandığımız bir koddur.

DOCTYPE bildirimi (X)HTML kodunun başına bir veya iki satır olarak eklenir. Genel kullanımı:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Burada dökümanımızın XHTML 1.0 verisyonu dikkate alınarak yazıldığı ve kullanılan bu kuralların linki verilmiştir. Linkin kullanılmadığı şeklide vardır.

Bu tanımlamadan sonra web tarayıcıları bu kurallara göre sayfayı yorumlayacak ve buna göre bir görünümü kullanıcıya sunacaktır. Web tarayıcıları kullanılan Döküman tip tanımlamasına(DTD-document type definition)göre sayfayı analiz eder.
Web Sayfalarını Doğrulama "Onaylama"

Güzel bir kodlama, (X)HTML dökümanın onyalanmış halidir. Web sayfalarımız doğrulamak için genelde http://validator.w3.org/ adresi kullanılırız. Ancak bir çok web sayfası hazırlama editörü bu aracı içinde barındırır.Web sayfalarımız doğrulattığımızda sonuç olarak bize sayfamızda bir sorun varsa bunuve niçin olduğunubelirtir.

Doğrulam işlemi önemlidir çünkü bizim kodlarımızı doğru yazdığımızı kontrol eder. Kodlarınızı belirli aralıklarla doğrulmayı unutmayın. şžunu unutmayalım ki web sayfasını doğrulamamız bunu en mükemmel kod olduğu anlamına gelmez. Ayrıntı için tıklayınız.
Web tarayıcı mod’ları

Web tarayıcı üreticileri geriye dönük uyumluluğu sağlamak için standarlara uygun tarayıcılar çıkardıklar. Bunu başardılar, bu işlem için iki mod ürettirler: standart mod(standards mode) ve garip mod(Quirks mode). Standart mod sayfa ayrıntılı olarak ve en iyi şekilde yorumlayacaktır,Garip mod da ise eski moda tarayıcılardaki gibi daha duyarsız davranacaklardır. Örneğin IE4 ve NN4 gibi.

Bu iki mod arasındaki farkı görebilemke için Windows üzerindeki IE’de kutu modeline bakmalıyız. IE6 başlangıçta Standart Mod da Kutu Modeli doğru görünürken Garip Mod da ise sorun çıkarır. IE5 ve aşağısında bu sorun vardır, ayrıca Opera 7 ve üsrü Garip Mod da IE gibi davranır. Bunun dışında ufak tefek sorunlar da vardır. Hekzedesimal renk tanımında # kullanımına ihtiyaç duymama, CSS’de değer kullanılmadığında birimi piksel olarak tanınması vb. sorunlar olarak sıralayabiliriz.

Mozilla ve Safaride bir üçüncü mod vardır, ancak Standart Mod’dan çok önemli bir farkı yoktur.
DOCTYPE Geçişleri

Web tarayıcıları DOCTYPE bildirimi ve kullanılan DTD’ye göre tarama metodunu belirler. Bişr dökümanda DOCTYPE tanımı yapılırsa bu sayfa Standart Mod da, yapılmazsa Garip Mod da yorumlanacaktır bu geçişe DOCTYPE Geçişi(DOCTYPE switching) adı verilir.

* XHTML dökümanında tam bir DOCTYPE tanımı yapıldı ise web tarayıcısı taramayı Standart Mod da yapacaktır.
* HTML 4.01 dökümanı için DOCTYPE ve strict DTD tanımı yapıldığında sayfa web tarayıcısı tarafından StandartMod da yorumlanacaktır.
* DOCTYPE ve transtional DTD URI tanımlı halin de Standart Mod da yorumlanacaktır.
* DOCTYPE ve transtional DTD URI’siz ise Garip Mod da yorumlanacaktır.
* Kötü formatlanan veya DOCTYPE kullanımılmayan dökümanlar HTML ve XHTML tarafında Garip Mod da yorumlanacaklardır.

Web tarayıcılarının DOCTYPE tiplerine göre farklılıklarını görmek için http://www.ericmeyeroncss.com/bonus/render-mode.html bir göz atın.

Çok uğraşıp en iyi ve en doğruCSS kodunu yazdıktan sonra yanlış DOCTYPE kullandığınızda sayfanız Garip Mod da yorumlanacaktır ve bu size bir çok sorun oluşturacaktır. Sitenizde tam DOCTYPE bildirimive strict DTD kullanmanız çok önelidir.

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Bu kullanım sayfanın HTML 4.01 kurallarının geçerli olduğu bir HTML dosyası olduğunu gösterir.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Bu kullanım sayfanın hem HTML hemde XHTML kurallarının geçerli olduğunu bir XHTML dosyası olduğunu gösterir.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Bu kullanım sayfanın sadece XHTML1.0 kurallarının geçerli olduğu bir XHTML sayfası olduğunu gösterir. Bu kodlama yapıldığıında tüm XHTML kurallarına harfiyen uyulmalıdır. Örneğin kodların hepsinin küçük harfle yazılması gibi.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Bu kullanım sayfanın bir XHTML çerçeve(frame) sayfası olduğunu gösterir. Kullanımı azaldı.

Biz burada sizlere DOCTYPE tanımlamanın nasıl olduğunu ve önemini anlatmaya çalıştık. Bir çok HTML ediötürü DOCTYPE taınımını otomatik ekleyecektir.

Konu: Geri: Css Dersleri 10/5/2008, 11:11 pm

Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi.)

Pseudo sınıfına örnek:

1. a:visited {color: red;}

Pseudo elementine örnek:

1. p:first-line { font-weight: bold; }

Pseudo sınıf ve elemtleri HTML class özelliği olarak belirtilmemiştir. Normal sınıflar pseudo sınıf ve elementleri ile kullanılabilir.

1. a.disariyalinkller:link, a.disariyalinkller:visited {color: maroon;}

Aynı şekilde id seçicileri ile birlikte de kullanılabilirler

1. a#altkisim:link{font-weight: bold;}

Pseudo sınıflarını da ikiye ayıra biliriz. Link Pseduo Sınıfıları ve Dinamik Pseudo Sınıfları
Link Pseudo sınıfı

Yanlızca linklere uygulanan iki Link Pseduo sınıfı vardır. :link ve :visited

:link - Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır. Ancak bir çok web tarayıcısı yapılan stil tanımlarını ziyaret edilmiş sayfa linklerine de uygular.

:visited - Henüz ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için kullanılır.

1. a:link {color: blue;}
2. a:visited {color: red;}

Bunun yerine genelde aşağıdaki gibi bir kod da kullanılır

1. a {color: blue;}
2. a:visited {color: red;}

Bu kodlama ile kullanıcaya ziyaret ettiği sayfa linkleri farklı renkte gösterilerek içeriksel bir bilgi görsel olarak verilebilir.
Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: kısmen ;
Opera 5.0 ‘ 6.0: destekliyor
Dinamik Pseudo Sınıfları

Dinamik Pseudo Sınıfları sayfa görünümüne çok büyük katkılar yapabilir. Bu sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları vardır. tanedir :focus, :active ve :hover
Not

Pseudo sınıflarında sıralama önemlidir. Genel kullanımda “link-visited-hover-active,” sıralaması yapılmalıdır. Tüm sınıflar içinse “link-visited-
focus-hover-active.” sıralaması yapılmalıdır.

:focus - Odaklanan elemente stil tanımlası yapmak için kullanılır Örn: input alanına içerik girerken

:active - Aktif olan elemente stil atamak için kullanılır.

:hover - Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama için Örn: bir linkin üzerine fare ile geldiğimizde renk değiştirmesini sağlamak için

Linkler için genel kullanım

1. a:link {color: navy;}
2. a:visited {color: gray;}
3. a:hover {color: red;}
4. a:active {color: yellow;}

:focus için bir örnek verecek olursak

1. input:focus {background: silver; font-weight: bold;}

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
İlk Çocuk Elementi seçmek

Diğer bir pseudo sınıfımız :first-child‘dır.

first:child: Belirtilen elementin ilk Çocuk Elementine stil atamak için kullanılır.

1. p:first-child {font-weight: bold;}
2. li:first-child {color:#f00;}
3. …
4. <div>
5. <p>Bu paragraf ilk çocuk elementtir ve sonuç olarak kalın olacaktır</p>
6. <ul> <li>Bu liste ilk çocuk elementtir ve font rengi kırmızı olacak</li> <li>Bu <strong>çocuk element </strong>değil</li> <li>Bu da değil</li> </ul>
7. <p>Bu pragraf <em>bir</em> çocuk element değil.</p>
8. </div>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: desteklemiyor
:lang Pseudo Sınıfı

Lang pseudo sınıfı içerikteki bir elemente farklı bir dil de yazmamızı sağlar.

Atanabilecek dil listesi ve kullanılacak kısaltmalara ISO 639 and RFC 1776 standards erişebilirsiniz.

1. <html><head> <title>lang test</title>
2. <style type="text/css">
3. p:lang(fr) {color: red;}
4. </style>
5. </head><body>
6. <p lang="fr">
7. Bonjour le monde!
8. </p>
9. </body></html>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0 desteklemiyor
Mozilla 1.0: destekliyor ;
Opera 7.5 ‘ 8.5 - 9.0: destekliyor
Pseudo Sınıflarını birleştirmek

CSS2.1 ile birlikte aynı seçiciye ait pseudo elemntlerini birleştirme özelliği de gelmiştir. Örneğin ziyaret edilmiş linklerin hover özelliği ile ziyaret edilmemiş linklerin hover özelliğini farklı atamak istesek

1. a:link:hover {color: red;}
2. a:visited:hover {color: pink;}

Sıralama önemli değildir.
Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0 desteklemiyor
Mozilla 1.0: destekliyor ;
Opera 9.0: desteklemiyor
Pseudo Element Seçicileri

Bu elementler hayali elementlerdir. (X)HTML hiyerarşisi içinde bu elemntlere yoktur. CSS2.1 de Dört adet Pseudo Element Seçicisi vardır: first-letter, first-line, before ve after
first-letter (ilk harf)

Bir blok-level elementin ilk harfine stil tanımlması yapmak için kullanılır. Örnek verecek olursak h1 elementinin baş harfinin büyük olması için :

1. h1:first-letter {font-size: 200%;}
2. …
3. <h1>Bu büyük bir başlık</h1>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
first-line (ilk satır)

Bir metnin ilk elementine stil atamak için kullanılır. Örneğin paragraflarınızın ilk satırlarını renklendirmek isitiyorsunuz.

1. p:first-line {color: red;}

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0,7.0 destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
before ve after elementleri

Bir elementin öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır.

Notlarımızın başına otomatik oalrak Not yazmak için

1. P.not:before { content: “Not.” }

kodu yeterlidir. Aynı şekilde paragraflarımzın sonuna otomatik bitti yazıp nokta koymak istersek

1. body:after {content: ” Bitti.”;}

yeterlidir.
Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0,7.0 desteklemiyor
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 7.5 ‘ 8.5: destekliyor

Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi.)

Pseudo sınıfına örnek:

1. a:visited {color: red;}

Pseudo elementine örnek:

1. p:first-line { font-weight: bold; }

Pseudo sınıf ve elemtleri HTML class özelliği olarak belirtilmemiştir. Normal sınıflar pseudo sınıf ve elementleri ile kullanılabilir.

1. a.disariyalinkller:link, a.disariyalinkller:visited {color: maroon;}

Aynı şekilde id seçicileri ile birlikte de kullanılabilirler

1. a#altkisim:link{font-weight: bold;}

Pseudo sınıflarını da ikiye ayıra biliriz. Link Pseduo Sınıfıları ve Dinamik Pseudo Sınıfları
Link Pseudo sınıfı

Yanlızca linklere uygulanan iki Link Pseduo sınıfı vardır. :link ve :visited

:link - Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır. Ancak bir çok web tarayıcısı yapılan stil tanımlarını ziyaret edilmiş sayfa linklerine de uygular.

:visited - Henüz ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için kullanılır.

1. a:link {color: blue;}
2. a:visited {color: red;}

Bunun yerine genelde aşağıdaki gibi bir kod da kullanılır

1. a {color: blue;}
2. a:visited {color: red;}

Bu kodlama ile kullanıcaya ziyaret ettiği sayfa linkleri farklı renkte gösterilerek içeriksel bir bilgi görsel olarak verilebilir.
Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: kısmen ;
Opera 5.0 ‘ 6.0: destekliyor
Dinamik Pseudo Sınıfları

Dinamik Pseudo Sınıfları sayfa görünümüne çok büyük katkılar yapabilir. Bu sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları vardır. tanedir :focus, :active ve :hover
Not

Pseudo sınıflarında sıralama önemlidir. Genel kullanımda “link-visited-hover-active,” sıralaması yapılmalıdır. Tüm sınıflar içinse “link-visited-
focus-hover-active.” sıralaması yapılmalıdır.

:focus - Odaklanan elemente stil tanımlası yapmak için kullanılır Örn: input alanına içerik girerken

:active - Aktif olan elemente stil atamak için kullanılır.

:hover - Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama için Örn: bir linkin üzerine fare ile geldiğimizde renk değiştirmesini sağlamak için

Linkler için genel kullanım

1. a:link {color: navy;}
2. a:visited {color: gray;}
3. a:hover {color: red;}
4. a:active {color: yellow;}

:focus için bir örnek verecek olursak

1. input:focus {background: silver; font-weight: bold;}

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
İlk Çocuk Elementi seçmek

Diğer bir pseudo sınıfımız :first-child‘dır.

first:child: Belirtilen elementin ilk Çocuk Elementine stil atamak için kullanılır.

1. p:first-child {font-weight: bold;}
2. li:first-child {color:#f00;}
3. …
4. <div>
5. <p>Bu paragraf ilk çocuk elementtir ve sonuç olarak kalın olacaktır</p>
6. <ul> <li>Bu liste ilk çocuk elementtir ve font rengi kırmızı olacak</li> <li>Bu <strong>çocuk element </strong>değil</li> <li>Bu da değil</li> </ul>
7. <p>Bu pragraf <em>bir</em> çocuk element değil.</p>
8. </div>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: desteklemiyor
:lang Pseudo Sınıfı

Lang pseudo sınıfı içerikteki bir elemente farklı bir dil de yazmamızı sağlar.

Atanabilecek dil listesi ve kullanılacak kısaltmalara ISO 639 and RFC 1776 standards erişebilirsiniz.

1. <html><head> <title>lang test</title>
2. <style type="text/css">
3. p:lang(fr) {color: red;}
4. </style>
5. </head><body>
6. <p lang="fr">
7. Bonjour le monde!
8. </p>
9. </body></html>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0 desteklemiyor
Mozilla 1.0: destekliyor ;
Opera 7.5 ‘ 8.5 - 9.0: destekliyor
Pseudo Sınıflarını birleştirmek

CSS2.1 ile birlikte aynı seçiciye ait pseudo elemntlerini birleştirme özelliği de gelmiştir. Örneğin ziyaret edilmiş linklerin hover özelliği ile ziyaret edilmemiş linklerin hover özelliğini farklı atamak istesek

1. a:link:hover {color: red;}
2. a:visited:hover {color: pink;}

Sıralama önemli değildir.
Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0, 7.0 desteklemiyor
Mozilla 1.0: destekliyor ;
Opera 9.0: desteklemiyor
Pseudo Element Seçicileri

Bu elementler hayali elementlerdir. (X)HTML hiyerarşisi içinde bu elemntlere yoktur. CSS2.1 de Dört adet Pseudo Element Seçicisi vardır: first-letter, first-line, before ve after
first-letter (ilk harf)

Bir blok-level elementin ilk harfine stil tanımlması yapmak için kullanılır. Örnek verecek olursak h1 elementinin baş harfinin büyük olması için :

1. h1:first-letter {font-size: 200%;}
2. …
3. <h1>Bu büyük bir başlık</h1>

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
first-line (ilk satır)

Bir metnin ilk elementine stil atamak için kullanılır. Örneğin paragraflarınızın ilk satırlarını renklendirmek isitiyorsunuz.

1. p:first-line {color: red;}

Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0,7.0 destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
before ve after elementleri

Bir elementin öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır.

Notlarımızın başına otomatik oalrak Not yazmak için

1. P.not:before { content: “Not.” }

kodu yeterlidir. Aynı şekilde paragraflarımzın sonuna otomatik bitti yazıp nokta koymak istersek

1. body:after {content: ” Bitti.”;}

yeterlidir.
Browser Uyumu:

Internet Explorer 5.0, 5.5, 6.0,7.0 desteklemiyor
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 7.5 ‘ 8.5: destekliyor

Konu: Geri: Css Dersleri 10/5/2008, 11:12 pm

CSS Birimleri
Bu makalede CSS’de kullanılan tüm birimleri göreceğiz. Birimler genelde mesafe ve renkleri tanımlamak için kullanılır.

Birimleri dört gruba ayıra biliriz. uzunluk birimleri, yüzde birimleri, renk birimleri ve URL birimleri
Uzunluk Birimleri

CSS’de tanımlanan 8 uzunluk birimi vardır. Bunların üç tanesi göreceli(relative) uzunluklar ve kalan beş tanesi kesin(absolute)uzunluklardır.

Göreceli Uzunluklar

Bu birimler diğer uzunluk birimlerine göre görecelidir. Sayfalarımızın ölçeğinin değiştiği ve çıktısının alındığı durumlarda bu uzunluk birimlerini kullanmamız bize avantaj sağlayacaktır.

em: Elementin fontunun yüksekliğidir. Mesela font-size değeri 14 px olarak atanmış ise 1em 14piksel eşit demektir.

ex: Elementin "x" harfinin yüksekliğidir. Atanmış olan fontun küçük "x" değeri yüksekliğidir.

px: piksel değeri. Eğer monitörünüze yeterince yakından bakarsanız, çok küçük kutulardan oluşmuş bir ızgaraya benzer. Burdaki her kutu bir pikseldir. Bu da her monitöre göre farklı değer demektir.

Kesin Uzunluklar

Bu uzunluklar gerçek hayatta kullanılan birimlerdir.

in: inç. 1 inch=2,54 cm’dir. Örn: line-height:0.5in

cm: Santimetre. Bizim gerçek hayatta kullandığımız santimetere değeridir. Örnek: margin:2cm

mm: Milimetre. Bizim gerçek hayatta kullandığımız milimetere değeridir. Örnek: letter-spacing:1mm

pt: Point. Standart baskı birimidir. (1pt = 1/72in) Örn: font-size:14pt

pc: Pika. Bir inçin altıda birine eşit olan bir baskı ölçü birimi. Bir pika 12 noktaya bölünür. Örnek: font-size:2pc
Yüzde Birimleri

Yüzde değerleri her zaman diğer elementlere göre göreceli değerlerdir.

1. /* elementin font-size değerinin %150 si dir */
2. h4 { line-height: 150% }
3. /* satır genişliğinin 10% nu */
4. p { text-indent: 10% }

Renk Birimleri

CSS’de renk değerleri isim olarak ve RGB değeri olarak tanımlanabilir. RGB tanımlamasıda dört çeşittir.

Renk İsimleri

Renklerin ingilizce isimleri kullanılarak tanımlama yapılabilir.

1. p {color:black; } /* renk tanımı siyah olarak yapılıyor*/
2. h1{ background-color: red;} /* h1 başlığının ardalanı kırmızı tanımlanıyor */

RGB Renk Değerleri

CSS’de renk tanımlamak için kullanılan asıl yöntem budur. RGB tanımlamanında dört çeşidi vardır.

#RRGGBB : Burada, RR, GG, ve BB, sırasıyla kırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal sayılardır. Örnek: color:#ff0000; (kırmızı)

#RGB: Yukardaki yöntemin kısaltmasıdır. Aynı değerleri taşıyan grup değerleri birleştirilir. Örnek: color:f00; (kırmızı)

rgb(R,G,B): Bu RGB renklerinin ondalık sayma düzeninde 0 ile 255 arasında bir tanımı vardır. Buna göre tanımlama yapılabilir. Örnek h1 {color: rgb(191,127,127);}

rgb(R%,G%,B%): Bu RGB renklerinin yüzdesel olarak %0 ile %100 arasında bir tanımı vardır. Buna göre tanımlama yapılır. Örnek: h1 {color: rgb(75%,0%,0%);}
URL Değerleri

URL tanımlaması için aşağıdaki gib bir tanımlama yapılır.

1. url("http://www.fatihhayrioglu.com/images/kucuk.gif")

Burada tırnaksız ve tek tırnaklı kullanımları da standarda uygundur.

Not : Birde bunların dışında CSS2.0 ile birlikte gelen ekstra birimlerde mevcuttur. Ancak bunlar kullanımda değildir.

Açı Değerleri : deg(derece), grad(gradyen) ve rad(radyan) Örnek: -90deg, 100grad ve 1.57rad

Zaman Değerleri: milisaniye (ms) ve saniye (s) Örnek : 100ms ve 0.1s

Frekans Değerleri : Herz(Hz) ve MegaHerz(mHz) Örnek: 10mHz

Konu: Geri: Css Dersleri 10/5/2008, 11:12 pm

CSS’i Web Sayfalarına Eklemek
CSS’i (X)HTML sayfalarımıza eklemenin 4 yöntemi vardır.
1- Kod içinde (In-line)

Direk olarak (X)HTML elementin içine style özelliği kullanılarak uygulamak.

1. <div style="color:red">Deneme yazımız</div>

Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama şekli değildir. Ancak özel durumlarda kullanılabilir.
2- style Elementi kullanılarak

<head> kısmında <style> elementi içinde CSS kodumuzu yazarak uygulamak.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
5. <title>CSS’i Uygulamak </title>
6. <style type="text/css">
7. div{
8. color:red;
9. }
10. </style>
11. </head>

Birinci yönteme göre avantajı (X)HTML kod ile CSS bir birinden ayrıştırılmış olmasıdır.
3- Harici Stil şžablonu Kullanımı

Bu metod da CSS kodlarımzı .css uzantılı bir dosyaya kaydederiz. ornek.css

1. p {
2. color: red;
3. }
4. a {
5. color: blue;
6. }

Daha sonra bu kodu gereken sayfalarımıza uygularız.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
5. <title>CSS’i Uygulamak</title>
6. <link rel="stylesheet" type="text/css" href="ornek.css" />
7. </head>

Bu yöntemin diğerlerine göre en büyük avantajı bir kere yazılan kod lazım olan tüm sayfalara eklenebilmesidir. Bu sayede harici eklenen css kodu bir kere yüklendikten sonra diğer kullandığımız sayfalarda tekrar yüklenemeyerek bize hız kazandıracaktır.
4- @import ile eklemek

üncü yöntem ile kullanımı benzerdir.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
5. <title>CSS’i Uygulamak</title>
6. <style type="text/css">
7. @import "ornek.css";
8. </style>
9. </head>

Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından görüntülenemeyecektir.(Örn: NN4)

@import ile eklenen kod link ile eklenen kodlamadan önce yorumlanır web tarayıcıları tarafından. Ayrıca css dosyalarımızda @import özelliğini kullanarak devamlı kullandığmız kodları css dosyamıza harici olarak ekleyebilriz böylelikle tekrarlardan kurtulmuş oluruz. (11.10.2006 güncellendi )

Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metodlardan dördüncüsü avantajları bakımından önerilen bir yöntemdir.

Ayrıca içeriği büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS’inde hangi parçalar gerekli ise onların import edilmesi önerilir. Bu sayfade kodun bir kısmında yaptığımız değişiklik için tüm css kodu incelenip değiştirlmesi gerekmez ve kod yönetimi kolaylaşır.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
5. <title>CSS’i Uygulamak</title>
6. <style type="text/css">
7. @import "urunler.css";
8. </style>
9. </head>

Ürünler bölümü için bir css dosyası ekleyelim sonra parçalara ayırdığımız css kodlarının ürünlere lazım olanlarını urunler.css içine ekleyelim.

urunler.css

1. @import url(/css/iskelet.css);
2. @import url(/css/fontlar.css);
3. @import url(/css/renkler.css);
4. @import url(/css/urunlereozel.css);

Konu: Geri: Css Dersleri 10/5/2008, 11:13 pm

CSS’de Kısaltmalar
CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını en aza indirmiş oluruz.
1. Font

Normalde bir font tanımlarken 4 adet CSS kodu kullanılır:

1. font-weight: bold;
2. font-family: verdana, sans-serif;
3. font-size: 11px;
4. line-height: 15px;

Kısaltma olarak kullanlan kod ise tek satır:

1. font: bold 11px/15px verdana, sans-serif;

2. Background

Background tanımlarken 5 adet atama yapmamız gerekirken kısaltma kullanarak tek tanıma indirebilriz.

1. background-color: #000;
2. background-image: url(ard.jpg);
3. background-repeat: no-repeat;
4. background-attachment: fixed;
5. background-position: 50px 50px;

Kısaltırsak:

1. background: { #000 url(ard.jpg) no-repeat fixed 50px 50px; }

3. Renkler(Hex-decimal)

CSS stillerinde renkler genelde hex-decimal renk kodu ile tanımlanır örneğin color: #ff0000; kırmızı. Renkler 6 karakterle gösterilsede bir çok renk(web tabanlı) 3 karakterin tekrarlanması ile oluşturulur. Örneğin, kırmızı’nın hex-decimal kodunun kısaltırsak color: #f00;. Buradaki her karakter hex-decimal koddaki iki karaktere karşılık gelmektedir. Mesela, beyaz renk kullanacağınızda, color: white; veya color: #ffffff; kulanımı önermeyiz. Kısaltılmış olanı color: #fff; kullanmanız daha avantajlıdır.
4. Border

Kenarklık tanımlamalarında her özellik için bir tanımlama yapılır. örnek olarak bir elementin üst kenarına atama yapmak için:

1. border-top-width: 2px;
2. border-top-style: dashed;
3. border-top-color: #f00;

Kısaltırsak:

1. border-top: 2px dashed #f00;

Bu özellikleri tüm kenarlara uygulmak için:

1. border: 2px dashed #f00;

5. Margin ve Padding’ler

Margin ve paddingler de normal tanımlama şöyledir:

1. margin-top: 10px;
2. margin-right: 5px;
3. margin-bottom: 20px;
4. margin-left: 15px;

kıslatılmış hali:

1. margin: 10px 5px 20px 15px;

Burada öznitelikler sağdan başlayarak saat yönünde devam eder. Aşağıda çeşitli kısaltma yöntemleri birlikte verilmiştir:

4 Değer: (margin: 20px 15px 10px 5px;) birinci - üst, ikinci - sağ, üçüncü - alt, dördüncü - sol.

3 Değer: (margin: 20px 15px 10px;) birinci - üst, ikinci - sol ve sağ, üçüncü - alt.

2 Değer: (margin: 20px 15px;) birinci - üst ve alt, ikinci - sol ve sağ.

1 Değer: (margin: 10px;) birinci - üst, sağ, alt ve sol
6. Listeler

Liste tanılmalrında da kısaltmalar mümkündür

1. ul {
2. list-style-type:square;
3. list-style-position:inside;
4. list-style-image:url(image.png);
5. }

Kısaltırsak;

1. ul li {
2. list-style:square inside url(image.png);
3. }
4. /* burda özel bir durum vardır
5. eğer resim yoksa yedek olarak square özelliği gösterilecektir. */

7. Sıfır ‘0′ ın Kısaltma olarak kullanılması

Kısaltmalarda son olarak ‘0′ ın kullanımına değineceğiz. Normalde bir elemente değer ataması yapılırken değerin yanına birimi de yazılır(örn: 3px, 0.2em vd.), Ancak sıfır ‘0′ için bu zorunlu değilidir.

1. padding:0;

Bu durumun bir istisnası mevcuttur oda yüzde değerlerinde atama yapılırken 0% olarak atama yapılmalıdır.
Kaynaklar

* http://www.w3schools.com/css/default.asp
* http://www.eyeofdesign.com
* http://www.spoono.com
* http://www.dustindiaz.com/css-shorthand/

Konu: Geri: Css Dersleri 10/5/2008, 11:14 pm

Hızlı CSS Referansı
CSS, web kodlayıcılarına (X)HTML dökümanlarına stil uygulamalarını sağlar. (X)HTML kodu ile stil kodunu birbirinden ayırarak web kodlayıcılara büyük kolaylıklar sağlar. Burada genel kullanılan CSS özelliklerini hep beraber tek tek kısaca inceleyeceğiz.

Burada tanımlanacak CSS özellikleri 15 Haziran 2005′de yürürlüğe giren CSS2.1 standartlarına göre yazılmıştır.

Sırası ile aşağıdaki özelliklere değinilecektir.

* Zemin (Background) Özellikleri
* Kenarlık (Border) Özellikleri
* Font Özellikleri
* Liste Özellikleri
* Margin Özellikleri
* Padding Özellikleri
* Metin Özellikleri
* Floating ve Positioning Özellikleri
* Tablo Özellikleri

Burada standart bir özellik tanımı kullanılacaktır.
Yapısı : özellik_ismi: <deger>
Aldığı Değerler : alınan_deger1 | alınan_deger2 {1,4}*
Başlangıç değeri: Özelliğin atama yapılmadığı zaman ki değeri
Uygulanabilen elementler: özelliğin uygulanacağı elementlerin isimleri
Kalıtsallık: Bu özelliğin atanması halinde alt elementlerini(örn: çocuk ve torun elementlerini) etkileyip etkilemeyeceği

* Bu işaretin anlamı bu özelliğin 1′den 4′e kadar değer alabileceğini gösterir. Örneğin:

1. p.deneme {border-style: solid dashed dotted solid;}

CSS - Zemin(BACKGROUND) Özellikleri

Kutu Modeli

Zemin(Bacground) yukarıdaki resimde padding alanı ve içerik alanını(paragraf) kapsar.

Zemin özellikleri ile elementlere tek bir renk atanabildiği gibi background-image özelliği ile (X)HTML’in çok üzerinde eklemelerde yapılabilir.

Zemin özelliklerini tek tek incelersek:

* background-color
* background-image
* background-repeat
* background-attachment
* background-position
* background

background-color

Elementlerin zeminine bir renk atamak için kullanılır.

Yapısı : background-color: <deger>
Aldığı Değerler : renk | transparent
Başlangıç değeri: transparent
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

1. p {background-color: #ddd;}

Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
background-image

Elementlerin zeminine resim eklemek için kullanılır.

Yapısı : background-image: <deger>
Aldığı Değerler : url | none
Başlangıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

1. body { background-image: url(/images/deneme.gif) }

Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
background-repeat

background-repeat özelliği background-image ile zemine eklenen resmin tekrarı ile özellikleri belirler.

Yapısı : background-image: <deger>
Aldığı Değerler : repeat | repeat-x | repeat-y | no-repeat
Başlangıç değeri: repeat
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

1. body {
2. background: white url(deneme.gif);
3. background-repeat: repeat-x;
4. }

Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
background-attachment

background-attachment özelliği zemine eklenen resmin sayfa ile scroll
etmesini veya sayfanın zeminin de çakılı kalmasını sağlar.

Yapısı : background-attachment: <deger>
Aldığı Değerler : scroll | fixed
Başlangıç değeri: scroll
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

1. body {
2. background: white url(deneme.gif);
3. background-attachment: fixed;
4. }

Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 4+
W3C’s CSS Level 1+
CSS Profile 1.0
background-position

background-position özelliği background-image ile belirlenen resmin başlangıç noktasını belirler. Bu özellik sadece block-level ve replaced(Bu elementler kendine özgü boyutları olan elementler olarak tanımlanabilir. Örn: IMG, INPUT, TEXTAREA, SELECT, ve OBJECT) elementlere uygulanır.

Yapısı : background-position: <deger>
Aldığı Değerler : [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Başlangıç değeri: 0% 0%
Uygulanabilen elementler: Block-level ve replaced elementler
Kalıtsallık: Yok

En kolay kullanım şekli;
Yatay değerler için: left,center,right
Dikey değerler için: top, center, bottom

Yüzde değerleri ve uzunluk değerleri de kullanılır. Yüzde değerleri elemtin boyuta bağlı olarak görecelidir. Uzunluk değerleri de kullanılabilir. Ancak farklı ekran çözünürlklerinde farklı görüntülere sebebiyet vermesi nedeni ile pek önerilmez.

Yüzde değerler ve uzunluk değerleri verildiğinde ilk değer yatay içindir sonra gelen dikey değerdir. Örneğin %10 %60 değeri bir zemin resmi için verilmiş ise %10 değeri yataydaki değeri %60 ise dikey olarak değerini gösterir. 5px 10px gibi değerler verilmişse resmin sol üstden 5px sağa ve 10px aşağıdan başlayacağını belirler.

Eğer yanlızca yatay değer verilmiş ise, dikey değer %50 olarak kabul edilecektir. Yüzde değerler ve uzunluk değerleri eksi değerler alabilir. Örn -2px %10 gibi. Aşağıdaki örnekler genel kullanım için yararlıdır:

* top left = left top = 0% 0%
* top = top center = center top = 50% 0%
* right top = top right = 100% 0%
* left = left center = center left = 0% 50%
* center = center center = 50% 50%
* right = right center = center right = 100% 50%
* bottom left = left bottom = 0% 100%
* bottom = bottom center = center bottom = 50% 100%
* bottom right = right bottom = 100% 100%

Örnek:

1. body
2. {
3. background-image: url(deneme.gif);
4. background-repeat: no-repeat;
5. background-position: center;
6. }

Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
background

Bu özellik Zemin(background) ile ilgili tüm özelliklerin bir arada kullanımı sağlar.

Yapısı : background: <deger>
Aldığı Değerler : <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Başlangıç değeri: Tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

1. body{
2. background: white url(deneme.gif)
3. }
4. blockquote {
5. background: #f00
6. }
7. p {
8. background: url(../images/deneme.png) #f00 fixed
9. }
10. table {
11. background: #0c0 url(deneme.jpg) no-repeat bottom right
12. }

Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

Konu: Geri: Css Dersleri 10/5/2008, 11:15 pm

Hızlı CSS Referansı
CSS, web kodlayıcılarına (X)HTML dökümanlarına stil uygulamalarını sağlar. (X)HTML kodu ile stil kodunu birbirinden ayırarak web kodlayıcılara büyük kolaylıklar sağlar. Burada genel kullanılan CSS özelliklerini hep beraber tek tek kısaca inceleyeceğiz.

Burada tanımlanacak CSS özellikleri 15 Haziran 2005′de yürürlüğe giren CSS2.1 standartlarına göre yazılmıştır.

Sırası ile aşağıdaki özelliklere değinilecektir.

* Zemin (Background) Özellikleri
* Kenarlık (Border) Özellikleri
* Font Özellikleri
* Liste Özellikleri
* Margin Özellikleri
* Padding Özellikleri
* Metin Özellikleri
* Floating ve Positioning Özellikleri
* Tablo Özellikleri

Burada standart bir özellik tanımı kullanılacaktır.
Yapısı : özellik_ismi: <deger>
Aldığı Değerler : alınan_deger1 | alınan_deger2 {1,4}*
Başlangıç değeri: Özelliğin atama yapılmadığı zaman ki değeri
Uygulanabilen elementler: özelliğin uygulanacağı elementlerin isimleri
Kalıtsallık: Bu özelliğin atanması halinde alt elementlerini(örn: çocuk ve torun elementlerini) etkileyip etkilemeyeceği

* Bu işaretin anlamı bu özelliğin 1′den 4′e kadar değer alabileceğini gösterir. Örneğin:

1. p.deneme {border-style: solid dashed dotted solid;}

CSS - Zemin(BACKGROUND) Özellikleri

Kutu Modeli

Zemin(Bacground) yukarıdaki resimde padding alanı ve içerik alanını(paragraf) kapsar.

Zemin özellikleri ile elementlere tek bir renk atanabildiği gibi background-image özelliği ile (X)HTML’in çok üzerinde eklemelerde yapılabilir.

Zemin özelliklerini tek tek incelersek:

* background-color
* background-image
* background-repeat
* background-attachment
* background-position
* background

background-color

Elementlerin zeminine bir renk atamak için kullanılır.

Yapısı : background-color: <deger>
Aldığı Değerler : renk | transparent
Başlangıç değeri: transparent
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

1. p {background-color: #ddd;}

Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
background-image

Elementlerin zeminine resim eklemek için kullanılır.

Yapısı : background-image: <deger>
Aldığı Değerler : url | none
Başlangıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

1. body { background-image: url(/images/deneme.gif) }

Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
background-repeat

background-repeat özelliği background-image ile zemine eklenen resmin tekrarı ile özellikleri belirler.

Yapısı : background-image: <deger>
Aldığı Değerler : repeat | repeat-x | repeat-y | no-repeat
Başlangıç değeri: repeat
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

1. body {
2. background: white url(deneme.gif);
3. background-repeat: repeat-x;
4. }

Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
background-attachment

background-attachment özelliği zemine eklenen resmin sayfa ile scroll
etmesini veya sayfanın zeminin de çakılı kalmasını sağlar.

Yapısı : background-attachment: <deger>
Aldığı Değerler : scroll | fixed
Başlangıç değeri: scroll
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

1. body {
2. background: white url(deneme.gif);
3. background-attachment: fixed;
4. }

Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 4+
W3C’s CSS Level 1+
CSS Profile 1.0
background-position

background-position özelliği background-image ile belirlenen resmin başlangıç noktasını belirler. Bu özellik sadece block-level ve replaced(Bu elementler kendine özgü boyutları olan elementler olarak tanımlanabilir. Örn: IMG, INPUT, TEXTAREA, SELECT, ve OBJECT) elementlere uygulanır.

Yapısı : background-position: <deger>
Aldığı Değerler : [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Başlangıç değeri: 0% 0%
Uygulanabilen elementler: Block-level ve replaced elementler
Kalıtsallık: Yok

En kolay kullanım şekli;
Yatay değerler için: left,center,right
Dikey değerler için: top, center, bottom

Yüzde değerleri ve uzunluk değerleri de kullanılır. Yüzde değerleri elemtin boyuta bağlı olarak görecelidir. Uzunluk değerleri de kullanılabilir. Ancak farklı ekran çözünürlklerinde farklı görüntülere sebebiyet vermesi nedeni ile pek önerilmez.

Yüzde değerler ve uzunluk değerleri verildiğinde ilk değer yatay içindir sonra gelen dikey değerdir. Örneğin %10 %60 değeri bir zemin resmi için verilmiş ise %10 değeri yataydaki değeri %60 ise dikey olarak değerini gösterir. 5px 10px gibi değerler verilmişse resmin sol üstden 5px sağa ve 10px aşağıdan başlayacağını belirler.

Eğer yanlızca yatay değer verilmiş ise, dikey değer %50 olarak kabul edilecektir. Yüzde değerler ve uzunluk değerleri eksi değerler alabilir. Örn -2px %10 gibi. Aşağıdaki örnekler genel kullanım için yararlıdır:

* top left = left top = 0% 0%
* top = top center = center top = 50% 0%
* right top = top right = 100% 0%
* left = left center = center left = 0% 50%
* center = center center = 50% 50%
* right = right center = center right = 100% 50%
* bottom left = left bottom = 0% 100%
* bottom = bottom center = center bottom = 50% 100%
* bottom right = right bottom = 100% 100%

Örnek:

1. body
2. {
3. background-image: url(deneme.gif);
4. background-repeat: no-repeat;
5. background-position: center;
6. }

Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
background

Bu özellik Zemin(background) ile ilgili tüm özelliklerin bir arada kullanımı sağlar.

Yapısı : background: <deger>
Aldığı Değerler : <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Başlangıç değeri: Tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

1. body{
2. background: white url(deneme.gif)
3. }
4. blockquote {
5. background: #f00
6. }
7. p {
8. background: url(../images/deneme.png) #f00 fixed
9. }
10. table {
11. background: #0c0 url(deneme.jpg) no-repeat bottom right
12. }

Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

Konu: Geri: Css Dersleri 10/5/2008, 11:15 pm

CSS Editörleri
Kendinize hala CSS için hangi editörü kurmalıyım diye soruyorsanız işte size cevap
Metin Editörleri

Eğer ben bu iş için ayrıca bir program kurmak istemiyorum. Zaten o kadar da kullanmıyorum. Ayrıca böyle hızlı oluyor diyorsanız. İşte size CSS yazabileceğiniz editörler.

* Windows için NotePad veya WordPad
* MacOs için TextEdit
* Linux için vi, vim veya emacs

Ancak şunu da belirtmeliyim ki bu editörlerden fazla bir özellik beklemeyin.
Stil Dosyası Editörleri

Bu editörler sadece css yazmak için üretilen programlardır. Başlangıç seviyesi için kullanışlıdır. Kod yazmanız için size kolaylık sağlayan özellikleri mevcuttur. Örneğin kodlarınız renklendirme, kodlara hızlı erişim vb.

*

Windows için TopStyle http://www.bradsoft.com/topstyle/
*

Windows ve Mac OS X için Style Master http://www.westciv.com/style_master/
*

Mac OS X CSSEdit http://www.macrabbit.com/cssedit/

HTML ve Web Programlama Editörleri

İşin aslı bir çok kullanıcı css yazmak için bu editörleri tercih etmektedir. Web kodlamacıları için gereken tüm araçları içermeleri, css kodlama da yardımcı özellikleri, kod düzeltme gibi bir çok özelliği barındırmalarından dolayı çoğu web kodlamacısı bu editörleri tercih etmektedir.

*

Windows için Microsoft FrontPage http://www.microsoft.com/frontpage/
*

Windows and Mac OS X Macromedia Dreamweaver http://www.macromedia.com/software/dreamweaver/
*

Windows için CoffeeCup HTML Editor http://www.coffeecup.com/editor/
*

Mac OS X için BBEdit http://www.barebones.com/products/bbedit/
* Son olarak Microsft’un yeni gözdesi MicrosoftÂ® Expression http://www.microsoft.com/products/expression/

Ben Macromedia Dreamweaver kullanıyorum

Biz burda sizlere genel editörleri sunduk bunların dışında bir çok editör daha mevcuttur.