Jump to content
Son zamanlarda artan kullanıcı hesap hırsızlıkları sebebiyle tüm kullanıcılara şifre sıfırlama maili gönderilmiştir. Lütfen güveli şifreler seçiniz. Mevcut e-mail adresinize erişemiyorsanız, en aşağıdaki destek linkinden bize ulaşınız. ×

Css Kodları & Örnekleri


Recommended Posts

Arkadaşlar bildiğimiz gibi nette sürüyle css kodları örnekleri var. Bunları paylaşmak istediğim zaman dağınıklık olcak diye paylaşmıyordum. Bundan sonra bu topic altında paylaşmayı düşünüyorum.

Diğer arkadaşlarda paylaşmak istedikleri kodları & örnekleri burdan paylaşabilir. Soru sormazsak biras daha düzenli bir konu olmuş olur. Ben şimdilik Fatih Hayrioğlu abimizin dökümanlarını paylaşmaya çalışacağım. Kendi sitesinden de ulaşabilirsiniz. Çok teşekkür ederim abime..

Bütün postlara teşekkür etmektense sadece bu posta teşekkür etmeniz yeterli <_<

Link to comment
Share on other sites

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

Please register to see this content.
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.

<h1>CSS'e Giriş</h1>[/CODE]

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.)

[CODE]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;}[/CODE]

[color=#FF0000][b]Kullanım Kolaylığı[/b][/color]

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.

<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

[CODE]h1 {color: blue;}[/CODE]

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.

[CODE]h1, h2 {color: blue;}[/CODE]

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.

[color=#FF0000][b]Tasarım Tutarlılığı[/b][/color]

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.

Link to comment
Share on other sites

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).

css_genel_yapi.gif

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.

h1 {font: medium Arial;}[/CODE]

ş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:

[CODE]h1 {font: medium/120% Arial;}[/CODE]

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.

p, h3 {font-family: Arial;}

[color=#0000FF]Not

CSS2 ile birlikte Evrensel Seçici(universal selector) Seçiciler arasına katılmıştır,[/color]

” * ” ile gösterilir.

[CODE]* {color: red;}[/CODE]

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.

[CODE]p, h3
{
font-family: Arial;
font-size:2;
font-weight: bold;
}[/CODE]

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.

[color=#FF0000][b]Sınıf Seçicisi(Class Selector)[/b][/color]

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

[CODE]p.sagadaya {text-align: right}
p.ortala {text-align: center}[/CODE]

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

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

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;

[CODE].ortala {text-align: center}[/CODE]

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

[CODE]<span class="ortala"> Burada birşeyler yazar </span>
<p class="ortala">Burada da başka bişeyler yazar</p>[/CODE]

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

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

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;

[CODE].onemli {font-weight: bold;}
.uyari {font-style: italic;}
.onemli.uyari {background: silver;}[/CODE]

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.

[color=#FF0000][b]Id Seçecileri

[/b][/color]

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.

[CODE]…
#mavi
{
background:blue;
}
#kirmizi
{
background:red;
}

<p id="mavi">Bu yazının arkafon rengi mavi</p>
<p id="kirmizi">Bu yazının arkafon rengi kırmızı</p>[/CODE]

[color=#FF0000][b]Sınıf mı? Id mi?[/b][/color]

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;

[CODE]p.onemliBilgi {font-weight: bold;}[/CODE]

ve kullanımıda;

[CODE]<p class="onemlibilgi">Uygulama olmaz .</p>[/CODE]

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.

Link to comment
Share on other sites

(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:

<html>
<head>
<title> CSS (X)HTML Hiyerarşisi </title>
</head>
<body>
<h1>CSS<em>(X)HTML Hiyerarşisi </em></h1>
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
<ul>
<li>Konu Başlıkları :
<ul>
<li><strong>Asıl</strong> Giriş</li>
<li>Önsöz</li>
<li><em>ilk</em> bölüm:
<ol>
<li>Elma</li>
<li>Armut</li>
<li>Karpuz</li>
</ol>
</li>
</ul>
</li>
<li>...vd.</li>
</ul>
<p>
Ayrıntılılı bilgi çin <a xhref="mailto:[email protected]"> mesaj gönder </a>
</p>
</body>
</html>[/CODE]

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.

hiyerarsi.gif

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.

[color=#FF0000][b]Torun Seçicileri (Descendant Selectors)[/b][/color]

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:

[CODE]h1 em {color: gray;}[/CODE]

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.

[CODE]ul ol ul em {color: gray;}[/CODE]

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.

[CODE]td.sidebar {background: blue;}
td.main {background: white;}
td.sidebar a:link {color: white;}
td.main a:link {color: blue;}[/CODE]

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:

[CODE]blockquote b, p b {color: gray;}[/CODE]

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

[color=#FF0000][b]Çocuk Seçicileri[/b][/color]

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

h1 > strong {color: red;}

[CODE]<h1>Bu <strong>koda</strong> uygulanacaktır.</h1>
<h1>Bu <em>koddaki <strong> bu kısım </strong></em> uygulama dışıdır..</h1>[/CODE]

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

hiyerarsi02.gif

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.

table.summary td > p

[color=#FF0000][b]Bitişik Kardeş Seçiciler[/b][/color]

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:

[CODE]<body>
<h2>Başlık 2 <em>metni</em></h2>
<h3>Başlık 3 metni</h3>
<p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
</body>[/CODE]

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:

[CODE]h2 + h3 {margin: -1em; }[/CODE]

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.

[color=#FF0000][b]Genel Seçiciler[/b][/color]

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.

[CODE]* { color:red;}[/CODE]

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

[CODE]div .uyari * { color:red;}[/CODE]

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

Link to comment
Share on other sites

Ö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:

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

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

[color=#FF0000][b]1- Basit Özellik Seçicisi[/b][/color]

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

[CODE]h1[class] {color: silver;}

<h1 class="selam">Selam</h1>
<h1 class="dunya">Dünya</h1>
<h1 class="ben">ben geldim </h1>[/CODE]

[color=#FF0000][b]2- Özellik Değeri Seçicisi [/b][/color]

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

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

[color=#FF0000][b]3- Kısmi Özellik Değeri Seçicisi [/b][/color]

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

[CODE]a[title~="seç"] {color:#000;;}

<a href="google.html" title="Google seç">gooogle </a>
<a href="google.html" title="Yahoo seç">yahoo </a>
<a href="google.html" title="Fatih">fatih </a>[/CODE]

Türkçe karkaterde sorun çıkarmadı.

[color=#FF0000][b]4- Dikkate Değer Özellik Seçicisi[/b][/color]

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

[CODE]*[lang|="en"] {color: white;}

<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">G’day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>[/CODE]

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.

[CODE]Kaynaklar
http://www.blooberry.com/
http://www.456bereastreet.com/
http://css.maxdesign.com.au/
http://westciv.com/[/CODE]

Link to comment
Share on other sites

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ı:

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

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.

[color=#FF0000][b]Web Sayfalarını Doğrulama "Onaylama" [/b][/color]

Güzel bir kodlama, (X)HTML dökümanın onyalanmış halidir. Web sayfalarımız doğrulamak için genelde 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.

[color=#FF0000][b]Web tarayıcı mod’ları [/b][/color]

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.

[color=#FF0000][b]DOCTYPE Geçişleri [/b][/color]

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

Please register to see this content.
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.

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

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

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

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

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

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.

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

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.

Link to comment
Share on other sites

Pseudo-sınıfları ve Pseudo-elementleri

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:

a:visited {color: red;}[/CODE]

Pseudo elementine örnek:

[CODE]p:first-line { font-weight: bold; }[/CODE]

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.

[CODE]a.disariyalinkller:link, a.disariyalinkller:visited {color: maroon;}[/CODE]

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

[CODE]a#altkisim:link{font-weight: bold;}[/CODE]

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

[color=#FF0000][b]Link Pseudo sınıfı[/b][/color]

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

[color=#0000FF]:link[/color] - 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.

[CODE]a:link {color: blue;}
a:visited {color: red;}[/CODE]

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

[CODE]a {color: blue;}
a:visited {color: red;}[/CODE]

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

[color=#FF0000][b]Dinamik Pseudo Sınıfları[/b][/color]

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.

[CODE]: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[/CODE]

[color=#FF0000][b]Linkler için genel kullanım[/b][/color]

[CODE]a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}

:focus için bir örnek verecek olursak
input:focus {background: silver; font-weight: bold;}[/CODE]

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

[color=#FF0000][b]İlk Çocuk Elementi seçmek[/b][/color]

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

[CODE]first:child: Belirtilen elementin ilk Çocuk Elementine stil atamak için kullanılır.
p:first-child {font-weight: bold;}
li:first-child {color:#f00;}

<div>
<p>Bu paragraf ilk çocuk elementtir ve sonuç olarak kalın olacaktır</p>
<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>
<p>Bu pragraf <em>bir</em> çocuk element değil.</p>
</div>[/CODE]

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

[color=#FF0000][b]:lang Pseudo Sınıfı[/b][/color]

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.

[CODE]<html><head> <title>lang test</title>
<style type="text/css">
p:lang(fr) {color: red;}
</style>
</head><body>
<p lang="fr">
Bonjour le monde!
</p>
</body></html>[/CODE]

[CODE]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[/CODE]

[color=#FF0000][b]Pseudo Sınıflarını birleştirmek[/b][/color]

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

[CODE]a:link:hover {color: red;}
a:visited:hover {color: pink;}[/CODE]

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

[color=#FF0000][b]Pseudo Element Seçicileri[/b][/color]

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

[color=#FF0000][b]first-letter (ilk harf)[/b][/color]

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 :

[CODE]h1:first-letter {font-size: 200%;}

<h1>Bu büyük bir başlık</h1>[/CODE]

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

[color=#FF0000][b]first-line (ilk satır)[/b][/color]

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

[CODE]p:first-line {color: red;}[/CODE]

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

[color=#FF0000][b]before ve after elementleri[/b][/color]

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

[CODE]P.not:before { content: “Not.” }[/CODE]

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

[CODE]body:after {content: ” Bitti.”;}[/CODE]

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

Link to comment
Share on other sites

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.

/* elementin font-size değerinin %150 si dir */
h4 { line-height: 150% }
/* satır genişliğinin 10% nu */
p { text-indent: 10% }[/CODE]

[color=#FF0000][b]Renk Birimleri [/b][/color]

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

[color=#FF0000][b]Renk İsimleri [/b][/color]

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

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

[color=#FF0000][b]RGB Renk Değerleri [/b][/color]

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

[CODE]#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ı)[/CODE]

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

[CODE]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);}[/CODE]

[CODE]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%);}[/CODE]

[color=#FF0000][b]URL Değerleri[/b][/color]

[color=#0000FF]URL tanımlaması için aşağıdaki gib bir tanımlama yapılır. [/color]

[CODE]url("http://www.fatihhayrioglu.com/images/kucuk.gif")[/CODE]

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

Link to comment
Share on other sites

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.

<div style="color:red">Deneme yazımız</div>[/CODE]

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

[color=#FF0000][b]2- style Elementi kullanılarak[/b][/color]

[CODE]<head> kısmında <style> elementi içinde CSS kodumuzu yazarak uygulamak.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CSS’i Uygulamak </title>
<style type="text/css">
div{
color:red;
}
</style>
</head>[/CODE]

Birinci yönteme göre avantajı (X)HTML kod ile CSS bir birinden ayrıştırılmış olmasıdır.

[color=#FF0000][b]3- Harici Stil şablonu Kullanımı [/b][/color]

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

[CODE]p {
color: red;
}
a {
color: blue;
}[/CODE]

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

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

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.

[color=#FF0000][b]4- @import ile eklemek[/b][/color]

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

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

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.

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

Ü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.

[color=#0000FF]urunler.css[/color]

[CODE]@import url(/css/iskelet.css);
@import url(/css/fontlar.css);
@import url(/css/renkler.css);
@import url(/css/urunlereozel.css);[/CODE]

Link to comment
Share on other sites

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:

font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;[/CODE]

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

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

[color=#FF0000][b]2. Background[/b][/color]

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

[CODE]background-color: #000;
background-image: url(ard.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 50px;[/CODE]

Kısaltırsak:

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

[color=#FF0000][b]3. Renkler(Hex-decimal)[/b][/color]

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.

[color=#FF0000][b]4. Border[/b][/color]

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:

[CODE]border-top-width: 2px;
border-top-style: dashed;
border-top-color: #f00;[/CODE]

[b]Kısaltırsak:[/b]

[CODE]border-top: 2px dashed #f00;[/CODE]

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

border: 2px dashed #f00;

[color=#FF0000][b]5. Margin ve Padding’ler[/b][/color]

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

[CODE]margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 15px;

kıslatılmış hali:
margin: 10px 5px 20px 15px;[/CODE]

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

[CODE]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[/CODE]

[color=#FF0000][b]6. Listeler[/b][/color]

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

[CODE]ul {
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.png);
}

Kısaltırsak;
ul li {
list-style:square inside url(image.png);
}
/* burda özel bir durum vardır[/CODE]

eğer resim yoksa yedek olarak square özelliği gösterilecektir. */

[color=#FF0000][b]7. Sıfır ‘0′ ın Kısaltma olarak kullanılması[/b][/color]

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.

padding:0;

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

[CODE]Kaynaklar
http://www.w3schools.com/css/default.asp
http://www.eyeofdesign.com
http://www.spoono.com
http://www.dustindiaz.com/css-shorthand/[/CODE]

Link to comment
Share on other sites

CSS - Zemin(BACKGROUND) Özellikleri

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[/CODE]

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:

[CODE]p {background-color: #ddd;}
Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0[/CODE]

[color=#FF0000][b]background-image [/b][/color]

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:

[CODE]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[/CODE]

[color=#FF0000][b]background-repeat[/b][/color]

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:

[CODE]body {
background: white url(deneme.gif);
background-repeat: repeat-x;
}
Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0[/CODE]

[color=#FF0000][b]background-attachment[/b][/color]

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:

[CODE]body {
background: white url(deneme.gif);
background-attachment: fixed;
}
Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 4+
W3C’s CSS Level 1+
CSS Profile 1.0[/CODE]

[color=#FF0000][b]background-position[/b][/color]

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:

[CODE]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%[/CODE]

Örnek:

[CODE]body
{
background-image: url(deneme.gif);
background-repeat: no-repeat;
background-position: center;
}
Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0[/CODE]

[color=#FF0000][b]

background[/b][/color]

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:

[CODE]body{
background: white url(deneme.gif)
}
blockquote {
background: #f00
}
p {
background: url(../images/deneme.png) #f00 fixed
}
table {
background: #0c0 url(deneme.jpg) no-repeat bottom right
}[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 3+

Netscape 4+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

Link to comment
Share on other sites

Font Özellikleri

Font özellikleri sayfalarımızdaki metinlerin font ailesini, kalınlık ayarlarını,boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar. CSS fontlar üzerinde tam hakimolmamızı sağlar.

color

font-family

font-size

font-weight

font-style

font-variant

font

color

Yapısı : color: <deger>

Aldığı Değerler :<renk> | inherit

Başlangıç değeri: web tarayıcısı belirler

Uygulanabilen elementler: tüm elementler

Kalıtsallık: Var

color metinlerimizin rengini tanımlamamız için kullanılır.

p{
color:#f00; /* kırmızı renk kodu */
}[/CODE]

Renk kullanımına daha önce değinmiştik. Detay için tıklayınız.

[color=#00FFFF]Browser Uyumu:

Internet Explorer 3+

Netscape 4+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

[color=#FF0000][b]font-family[/b][/color]

Yapısı : font-family : [[<font aile ismi > | <soysal aile ismi >],]* [<font aile ismi > | <soysal aile ismi >] | inherit

Aldığı Değerler :

<font aile ismi >- herhangi bir font ailesi ismi kullanılabilir.

<soysal aile ismi >

serif (örn: Times)

sans-serif (örn: Arial or Helvetica)

cursive (örn: Zapf-Chancery)

fantasy (örn: Western)

monospace (örn: Courier)

Başlangıç değeri: web tarayıcısı belirler

Uygulanabilen elementler: tüm elementler

Kalıtsallık: Var

Metinlerin kullanılacağı font ailesini belirlemek için kullanılır. Birden fazla fontailesi kullanılacaksa aralarına virgül (,) konur. Genelde son font ailesiolarak soysal font ailesi yazılır. Örnek:

[CODE]p {
font-family: Verdana, Arial, Helvetica, sans-serif;
}[/CODE]

Eğer font ismi bir den fazla kelimeden olşuyorsa çift tırnak içine alınır.Örn:

[CODE]h1 {
font-family: Georgia, “Times New Roman”, serif;
}[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 3+

Netscape 4+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

[color=#FF0000][b]font-size[/b][/color]

Yapısı :font-size: <kesin değerler > | <göreceli değerler > | <uzunluk> | <yüzde>

Aldığı Değerler :

<kesin değerler >

xx-small | x-small | small | medium | large | x-large | xx-large

<göreceli değerler >

larger | smaller

<uzunluk>

<yüzde> (üst elementlere(ebveyn) bağlı olarak)

Başlangıç değeri: medium

Uygulanabilen elementler: tüm elementler

Kalıtsallık: Var

CSS, Font boyutlandırmaya daha esnek tanımlama yapmamızı olanak sağladı. Mesela 11px değeri HTML’de2 ve 3 değeri arasında bir değer denk geliyor ve HTML font elementi ile birlikte kullanılamıyordu.CSS’de font boyutunu belirlemek için bir çok birim kullanılır. Örn: px, em,pt,

[CODE]in, cm vd.
td { font-size :12px;}
td { font-size : 150%; }
td { font-size : xx-small; }
td { font-size : x-large; }[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 3+

Netscape 4+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

[color=#FF0000][b]font-weight[/b][/color]

Yapısı : font-weight: <değer>

Aldığı Değerler : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Başlangıç değeri: normal

Uygulanabilen elementler: tüm elementler

Kalıtsallık: Yok

Fontun kalınlık incelik durumunu belirler. 100(ince)-900(kalın) arasında bir değer alabildiği gibi bold, bolder ve normal değerlerini de alır.

[CODE]p{
font-weight: bolder;
}[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 3+

Netscape 4+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

[color=#FF0000][b]font-style[/b][/color]

Yapısı : font-style: <değer>

Aldığı Değerler : normal | italic | oblique | inherit

Başlangıç değeri: normal

Uygulanabilen elementler: tüm elementler

Kalıtsallık: Var

Fontun eğik(italiktik) olup olamamasını belirler.

[CODE]p {
font-style: italic;
}
h4{
font-style: oblique;
}[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 3+

Netscape 4+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

[color=#FF0000][b]font-variant[/b][/color]

Yapısı : font-variant: <değer>

Aldığı Değerler :normal | small-caps | inherit

Başlangıç değeri: normal

Uygulanabilen elementler: tüm elementler

Kalıtsallık: Var

Metnin küçü-büyük harf ile gösterilmesini belirler. İki değer alır. normal | small-caps.

[CODE]span {
font-variant: small-caps;
}[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 4+

Netscape 6+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

Türkçe karakterlerde sorun çıkardığı unutulmamalı

[color=#FF0000][b]font[/b][/color]

Yukardı anlatılan font özelliklerinin hatta ek olrak line-height değerinide tek sefer de tanımlamak için kullanılır. Bir kısaltmadır.

Yapısı : font: <değer>

Aldığı Değerler :[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

Başlangıç değeri: tanımsız

Uygulanabilen elementler: tüm elementler

Kalıtsallık: Var

h2 {

font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;

}

[color=#00FFFF]Browser Uyumu:

Internet Explorer 3+

Netscape 4+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

Link to comment
Share on other sites

CSS Sınıflandırma-Liste Özellikleri

Liste özelliği ilk olarak listeleme amaçlı kullanılsa da şimdilerde menü yapımında kullanımı revaçtadır. Burada liste özellikleri yanısıra display ve white-space özelliklerinden de bahsedilecektir.

list-style

list-style-type

list-style-image

list-style-position

white-space

display

list-style-type

Yapısı : list-style-type: <deger>

Aldığı Değerler : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Başlangıç değeri: disc

Uygulanabilen elementler: display değeri list-item alan elementler

Kalıtsallık: Var

list-style-type özelliği list-item işaretinin tipini belirler. list-style-images özelliği none değeri aldığında veya resim görüntülenemediğinde kullanılır. 
ul.arabalar {
list-style-type: none
}
ol ol ol {
list-style-type: lower-roman /* i ii iii iv v gibi. */
}[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 4+

Netscape 4+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

[color=#FF0000][b]list-style-image[/b][/color]

Yapısı : list-style-image: <deger>

Aldığı Değerler : <url> | none

Başlangıç değeri: none

Uygulanabilen elementler: display değeri list-item alan elementler

Kalıtsallık: Var

[CODE]list-style-image özelliği list-style işaretinin yerine resim koymak için kullanılır.
ul {
list-style-image: url(mavitop.gif)
}[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 4+

Netscape 6+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

[color=#FF0000][b]

list-style-position[/b][/color]

Yapısı : list-style-position: <deger>

Aldığı Değerler : inside | outside

Başlangıç değeri: outside

Uygulanabilen elementler: tüm elementler

Kalıtsallık: Yok

[CODE]list-style-position özelliği list-item işaretlerin metinin içinden(inside) veya soldan dışında(outside) mı olacağını belirler.
ul {
list-style-position: inside
}[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 4+

Netscape 6+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

[color=#FF0000][b]list-style[/b][/color]

Yapısı : list-style: <deger>

Aldığı Değerler : <list-style-type> |<list-style-position> | <url>

Başlangıç değeri:0

Uygulanabilen elementler: display değeri list-item alan elementler

Kalıtsallık: Var

list-style özelliği list-style-type, list-style-position ve list-style-image özelliklerinin kısayoludur.

[CODE]ul {
list-style: disc outside
}
ol {
list-style: decimal inside
}[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 4+

Netscape 6+

Opera 3.6+

W3C’s CSS Level 1+

CSS Profile 1.0[/color]

[color=#FF0000][b]white-space[/b][/color]

Yapısı : white-space: <deger>

Aldığı Değerler : normal | pre | nowrap

Başlangıç değeri: normal

Uygulanabilen elementler: Block-level elementler

Kalıtsallık: Var

white-space özelliği elemetlerin boşluklarının nasıl işlem göreceğini belirler. değer alır.

[CODE]normal: birden fazla boşluğu tek boşluk gibi sayar.
pre : birden fazla boşluğu birleştirmez.
nowrap : <br> etiketi hariç alt satıra geçişe izin vermez.
p {
white-space: pre;
}[/CODE]

[color=#00FFFF]Browser Uyumu:

Internet Explorer 5.5+

Netscape 4+

Opera 4+

W3C’s CSS Level 2+

CSS Profile 1.0[/color]

[color=#FF0000][b]display[/b][/color]

Yapısı : display: <deger>

Aldığı Değerler : none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit

Başlangıç değeri: inline

Uygulanabilen elementler: tüm elementler

Kalıtsallık: Yok

display özelliği elemetlere aşağıdaki dört değerden birini atamak için kullanılır:

[CODE]block: elementden önce ve sonra bir satır bırakır.
inline : elementden önce ve sonra bir satır bırakmaz.
nowrap : block gibidir tek fark list-item işareti eklemesidir.
none: element görüntülenmez. Elementi gizler. Bir çok javascript uygulmasında kullanılan bir özelliktir.[/CODE]

Bu dört özellik çok kullanıldıkları için üzerinde duruldu.

[CODE]p {
display: inline;
}
em {
display: block;
}
Browser Uyumu:[/CODE]

[color=#48D1CC]Internet Explorer 5.5+

Netscape 4+

Opera 4+

W3C’s CSS Level 2+

CSS Profile 1.0[/color]

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...