- Css Nedir

Binlerce sayfayı tek merkezden yönetebilirsiniz

Yazıcı-dostu sayfalar oluşturmak çok kolaylaşır

Sayfalarınızı, mobil cihazlar ile gezilebilir hale getirebilirsiniz

Tarayıcıya gönderilen kodunuzu sadeleştirebilirsiniz

Sayfa tasarımı konularındaki tekrar kullanılabilirlik artar

Sayfa arayüzleri için tema hazırlamak kolaylaşır

Teknik ekibin beraber iş yapması kolaylaşır

Bölgeleri belirleyin

Erişilebilir sayfalar

CSS demek TABLE'ları unutmak demek değildir

STYLE etiketi ve STYLE niteliği: <STYLE></STYLE> ve STYLE=""

CSS'i bildiğiniz kadar XHTML'i de iyi bilmelisiniz

CSS deyince neden hep <DIV> <UL> <LI> etiketleri?

CSS'çiler neyi yapmaz?

Tarayıcı varsayılan biçimlendirmelerini sıfırlamak

Gölgelerin gücü adına: Javascript ve CSS

Araçlar

CSS, anlatmakla neden bitmez?

Binlerce sayfayı tek merkezden yönetebilirsiniz

Müşteriniz teklifinizi onayladı. Tasarım tamamlandı. Siteyi tam yayınlayacakken, genel müdür sizi toplantıya çağırdı.

Tasarımda bazı değişiklikler yapılmasını istedi. Eğer, biçimlendirmeleri yapmak için aşağıdaki geleneksel yolları tercih

ettiyseniz, yöneticinin istediği değişiklikleri yapmak çok uzun sürecektir. Her sayfanın kodlarına ulaşıp, aşağıdaki işaretli

yerlerdeki kodları düzenlemeniz gerekecektir. Yüzlerce sayfaya girerek, yapılması gereken kod değişikliklerini teker-teker

yapmaktan başka çareniz yoktur:

CSS kullanılmış yöntem ise aşağıdaki gibi olabilirdi:

CSS kullanılmış olan bu yöntemde

<html>

<body>

<table

<tr>

<td>

<font
bgcolor="#CC6600" border="0" cellpadding="0" cellspacing="0" width="760">color="#CC6600" face="Verdana, Arial, Helvetica, sans-serif">
Müdürlüğümüzün çalışmaları, her yıl faaliyet raporlarında belgelenir.

Görüntülemek istediğiniz faaliyet raporunu tıklatın:

</font>

</td>

</tr>

</table>

<body>

</html>

<html>

<head>

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

</head>

<body>

<div id="kabuk">

<p class="spot">

Müdürlüğümüzün çalışmaları, her yıl faaliyet raporlarında belgelenir.

Görüntülemek istediğiniz faaliyet raporunu tıklatın:

</p>

</div>

<body>

</html>

CSS Nedir?

http://www.cssnedir.com/[06.03.2009 07:54:28]

...arasındaki arasındaki kaynak kodunun, CSS kullanıl-ma-mış olan önceki yönteme göre çok daha sade olduğunu

farketmişsinizdir. Kaynak kodunun sade olmasının avantajları için

tüm ifadelerin (bgcolor, color, size, border, width vb), CSS içerisinde merkezîleştirilmiş olmasıdır:
burayı tıklatın. Bu sadeliğin nedeni, biçimlendirme ile ilgili
kabuk.css

Müşterinin istediği değişiklikleri yapmak için, bu CSS dosyası içerisindeki ifadelerin (color, background-color vb)

değiştirilmesi yeterli olacaktır. Bu CSS'i kullanan tüm sayfalarınızın görüntüsü bir anda değişecektir.

Sitenin genelinde bu kadar büyük değişiklikleri yapmanın çok kolay olduğunu müşterilerinize sezdirmeyin. Başka değişiklikler

de isterler! Aksi de olabilir; müşteriler istedikleri değişikliklerin ne kadar uğraştırabileceğini bilmezler (Hatta bazen biz bile

sezemeyiz!). Çok sayıda müşterisi olan tasarım şirketleri CSS'ten yararlanırlarsa, işleri kolaylaşır.

Yazıcı-dostu sayfalar oluşturmak çok kolaylaşır

Yazıcı dostu sayfalar, kağıt ve mürekkep israfını önler. Web sayfasındaki içeriğin, kağıttayken de anlaşılır ve kolay okunur

kılar. Bir yazıcı-dostu sayfanın diğer sayfalardan farkı; yazıcı-dostu sayfalar

metinler kağıda sığar hale getirildiğinde vs sayfa yazıcı-dostu hale gelmiş olur. Konuyu örneklendirmek gerekirse... Sağdaki

sayfa, soldaki sayfanın yazıcı-dostu haline gelmiş durumudur. Numaralandırılmış metinler dışında herşey kaybolmuş

durumdadır:
sadedir. Resimler ve renkler kaldırıldığında,
Şekil 1: Yazdırılacak bir sayfa. Şekil 2: Yazıcıya gönderilecek hali.

<body>

...

</body>

#kabuk{

width:760px;

background-color:#CC6600;

}

.spot{

color:#CC6600;

font-family:Verdana, Arial, Helvetica, sans-serif;

}

CSS Nedir?

http://www.cssnedir.com/[06.03.2009 07:54:28]

Şekil 1'deki sayfanın (
kaynak kodu) yazıcı-dostu halini üretmek için aşağıdaki yapılması gerekiyor;
Gereksiz kısımların yazdırılmaması :

yazıcıdan gizleme yöntemiyle halledilir. Web tarayıcınız, yazıcıya göndermeden önce sayfa üzerinde istediğiniz

biçilendirmeleri yapmanıza imkan tanır. Bu imkandan, daha sonra anlatılacak

ayarıyla faydalanılabilir. Örnekte;
Daire ile işaretlenmiş bölgelerin yazdırılmasının engellenmesi gerekli. Bu ise
Renkleri kaldırma :

doldurması sağlanmalı.

Bu iki biçimlendirme yapıldığında, sayfa yazıcı-dostu hale gelmiş olur. Şekil 2 incelenebilir. Numaralanmış bölgeleri
Numaralandırılmış bölgelerdeki metinlerin siyah-beyaz halde yazdırılması ve kağıttaki tüm satırı
inceleyiniz.

CSS yöntemi tercih edilmiş bu sayfayı görüntülemek için
burayı tıklatın. Bu sayfa, renkleri ve resimleriyle, bilindik bir sayfa
görüntüsüne sahip gibi görünebilir. Farkını görmek için "Yazdırma önizleme" yapın; sayfanın yazıcı-dostu halde

görüntülendiğine şahit olacaksınız (Şekil 2'deki gibi). Bu sayfanın kaynak kodunu inceleyelim ve kendiliğinden yazıcı-dostu

hale dönüşmesini sağlayan unsurları görelim. Kaynak kodundaki açıklamaları dikkatle okuyunuz:

media="print"

<link href="/lib/css/kent.css" rel="stylesheet" type="text/css"

<link href="/lib/css/kent_yazdir.css" rel="stylesheet" type="text/css"

...

<html>

...

<head>

...
media="screen" />media="print" />

<link href="
/lib/css/kent_sifirla.css" rel="stylesheet" type="text/css" media="screen" /> 

<link href="
/lib/css/kent.css" rel="stylesheet" type="text/css" media="screen" /> 

<link href="

...

</head>

...

<body>
/lib/css/kent_yazdir.css" rel="stylesheet" type="text/css" media="print" />
CSS Nedir?

http://www.cssnedir.com/[06.03.2009 07:54:28]

Eskiden, resimlerle ve renklerle dolu bir sayfanın yazıcı-dostu sürümünü oluşturmak için şu aşamalar izlenirdi; sayfanın

kopyası alınırdı... Bu kopyadaki tüm resimler ve renkler kaldırılarak sayfa siyah-beyaz hale getirilirdi. Asıl sayfadan bu

sadeleştirilmiş kopyaya bir bağlantı verilir ve Ziyaretçi'den bu sadeleştirilmiş kopyayı yazdırması istenirdi. "Basit ve kolay

anlaşılır" denilebilecek bu geleneksel yöntemin birçok dezavantajı vardır;

İş gücü kaybı.

düzenleme/düzeltme yapılması gerektiği zaman, yazıcı-dostu kopyada da aynı düzenlemeyi yapmak gerekir ki bu

durum, bakımın-onarımın müşakkatli bir iş haline gelmesine neden olur.
Kopyası alınan asıl sayfadaki; metinlerde veya Programcının geliştirdiği kaynak kodlarda bir
Arama motorları nezdinde potansiyel sorunlar.

arama motorları bu yazıcı-dostu kopyaları da indeksleyecek ve belki de ziyaretçiler arama sonucunda doğrudan yazıcıdostu

sayfanıza yönlendirilecekler.
İlave önlemler almadığınız sürece (META, Javascript vb yollarla),
Hükmedilmesi gereken dosya sayısında artış.

artınca, sitenin taşınması zorlaşır (başka bir sunucuya aktarma vb). Sitenizin toplam Megabayt büyüklüğü artar ve bu

nedenle sitenin yedeğinin alınması zorlaşır. Eğer siteniz çok dilli ise üstelik programlama da (ColdFusion, ASP.NET, PHP,

JSP vb) kullanıl

Tasarımcılar artık alışkanlıklarını değiştirmek zorundalar... Eski/geleneksel yöntemler terk edilip CSS'li yönteme geçildiğinde

tüm bu badirelerden kurtulunabilir... CSS yardımıyla regarenk sayfaların kendiliğinden yazıcı-dostu hale dönüşmesini

sağlamak mümkün (yukarıdaki yazdırma örneğinde olduğu gibi)
Site ne kadar az dosyadan oluşursa o kadar iyidir. Dosya sayısımıyorsa işiniz daha da zor demektir.
Sayfalarınızı, mobil cihazlar ile gezilebilir hale getirebilirsiniz

[Mobil cihaz sunum görüntüleri]

Artık sayfalarınızı, ilave çok fazla iş yapmaksızın mobil cihazlardan (XHTML uyumlu cep telefonlarından vb) erişilebilir hale

getirmek mümkün. CSS standartlarına uyumlu web tarayıcıları, her aygıt için farklı biçimlendirmeler uygulamanıza imkan

tanır. Örnek aygıtlar:

Screen: Bilgisayar ekranı.

Print: Yazıcı

Projection: Sunum cihazları (projektörler)

Eğer sayfanız bir cep telefonu tarafından görüntüleniyorsa, cep telefonunun içindeki tarayıcı yüksek ihtimalle CSS'i

desteklemiyor olacağından hiçbir CSS biçimlendirmesini ve Javascript unsurunu yorumlamayacaktır. Bu nedenle;

sayfalarınızın cep telefonlarından da gezinilebilmesini istiyorsanız, tüm biçimlendirmeleri (renklendirmeler, arka plan

resimleri vb) CSS ile yapmalı ve mecbur kalmadıkça Javascript kullanmamalısınız.

Aygıta özel biçimlendirmeler yapmak için CSS'te birkaç farklı yazım seçeneği vardır;

...

</body>

</html>



<html>

<head>

<link href="/lib/css/genel.css" type="text/css" media="

</head>

<body>

...

</body>

</html>
print"/>


<style stype="text/css">

@import url(/lib/css/genel.css)

</style>
print;


<style stype="text/css">

CSS Nedir?

http://www.cssnedir.com/[06.03.2009 07:54:28]

Aygıtlara özel CSS biçimlendirmesi konusu W3C belgelerindeki

arz edilir. Daha ayrıntılı ve güncel bilgi için söz konusu belgeye başvurulabilir.
7.2 Specifying media-dependent style sheets başlığı altında
Tarayıcıya gönderilen kodunuzu sadeleştirebilirsiniz

Sayfadaki tüm içerikler, biçimlendirmeler, resimler vb istemciye (sayfayı görüntülemek isteyen ziyaretçinin web tarayıcısına)

HTML/XHTML kodları halinde gönderilir. Bu kodların sade ve basit oluşunun, yüksek ziyaret alan web siteleri için önemleri

büyüktür;

İnternete çıktığı bant genişliği kısıtlı olan ziyaretçiler (örn: 56 Kbit'lik çevirmeli bağlantılar, GPRS kullanan cep

telefonları vb), daha az sayıda karakter içeren sayfalarınızı daha kısa sürede indirebilecektir. Sayfalar, internetten,

daha kısa sürede indirilecek, ziyaretçiniz, toplam sürede, daha fazla sayfa ziyaret edecektir. Sayfalarınızın hızlı

yüklenmesi, ziyaretçinizin siteniz hakkındaki memnuniyetini artıracaktır.

HTML kodlarınız ağırsa (sade değilse), ziyaretçileriniz siteyi gezerken, sunucunuzun bant genişliğini "sömüreceklerdir".

Cep telefonları gibi basit işlemcilere sahip cihazlar, sayfayı yorumlarken zorlanmazlar.

Sayfa tasarımı konularındaki tekrar kullanılabilirlik artar

...

Sayfa arayüzleri için tema hazırlamak kolaylaşır

CSS ile tasarım uygulanmamış bir tablo, yukarıdaki gibi olabilirdi. Tablo, cep telefonlarında bu şekilde görünür. Çünkü,

sayfada CSS kullanılmış olsa bile, cep telefonları tabloyu yukarıdaki gibi gösterecektir. Bunu CSS ile onlarca farklı temaya

büründürebiliriz. Tıklatarak sayfanın kodunu ve CSS'ini incelemek üzere sayfayı açabilirsiniz. "Link edilen" CSS dosyası

olduğunu göreceksiniz.

Tema 1:

media
print {
/*yazıcı için biçimlendirmeler buraya*/

}

</style>



<style type="text/css" media="
print">
/*yazıcı için biçimlendirmeler buraya*/

</style>

<link
href="tema-1.css" rel="stylesheet" type="text/css" />
CSS Nedir?

http://www.cssnedir.com/[06.03.2009 07:54:28]

Tema 2:

Örnekler

Teknik ekibin beraber iş yapması kolaylaşır

Eskiden, oluşturulmuş bir web sitesinin tüm yaşamı boyunca (!), programcı tasarımcı ve içerikçiler birlikte siteyi idame

ettirirlerdi. Fakat günümüzde, CMS'ler sayesinde, içerikçiler siteyi tek başlarına yıllarca idame ettirebilmektedirler. Fakat,

bazen müşteriler sitelere öyle içeriklerin eklenmesini isterler ki; bu içeriğin bir tasarımsal çalışması ile siteye eklenmesi

ihtiyacı doğar. Eğer tasarımcı, her türlü içeriğin siteye şıklıktan taviz vermeden eklenebilmesi için bir CSS-style-class

kütüphanesi oluşturursa, içerikçiler, metin editörlerinde (FCK, RadEditor, SoEditor vs) aşağıdaki gibi CSS-class atamaları

yaparak, sayfanın otomatik olarak şık hale gelmesini sağlayabilirler. Böylece, CSS tasarından önceden hazırlanmış olan CSS

biçimlendirmeleri sayesinde, içerikçinin tasarımcıya ihtiyacı kalmaz:

<link

<table

<thead>

<tr>
href="tema-2.css" rel="stylesheet" type="text/css" />class="icerikdokumu">
<td>İsim

</td/>

<td>Telefon

</td/>

</tr>

</thead>

<tbody>

<tr>

<td>Eşref Atak

</td/>

<td> +90 0211 324 43 34

</td/>

</tr>

<tr>

<td>Kemal Güler

</td/>

<td> +90 0211 123 34 56

</td/>

</tr>

CSS Nedir?

http://www.cssnedir.com/[06.03.2009 07:54:28]

Yukarıdaki kod, aynı zamanda, tema örneğindeki sayfaların da kaynak kodudur.

Benzer şekilde; site henüz yeni inşa edilirken tasarımcı ile geliştirici kendi aralarında anlaşıp mutabakat yaparak,

geliştiricinin hızlı ilerlemesini sağlayabilirler. Örneğin; eğer sayfaya bir haberin başlığı ve spotu bastırılacaksa, tasarımcı der

ki;
sitenin hangi sayfasında olursa olsun, başlık için <P> etiketine "baslik" class'ını ayarla, spot için ise "spot" class'ın ayarla.
Sayfa otomatik olarak biçimlenecektir.

Bu sayede, site teknik ekibinin işleri kolaylaşır.
Geliştirici tasarımcının dediklerini yapar:
Erişilebilir sayfalar hazırlamak

[...]

CSS demek TABLE'ları unutmak demek değildir

[Workcube'deki tablolar. O tabloları DIV ile yapmaya çalışmak bir çılgınlıktır. Tablolar, içerik sergilemek içindir. Yerleşimi ve

estetiği ayarlamak için değil. Sıkıştığında başvurulacak bir kaçış noktası hiç değildir.]

...

Araçlar

Firefox Web Develop Tool

Firefox DOM Inspector

Validation Tools

http://www.w3.org/Status

Tarayıcı varsayılan biçimlendirmelerini sıfırlamak

[...]

STYLE etiketi ve STYLE niteliği: <STYLE></STYLE> ve STYLE=""

İkisi de aynı şey;

STYLE niteliği ile CSS biçimlendirmesi yapmak:

STYLE-class belirterek CSS biçimlendirmesi yapmak:

Peki, arasındaki fark ne?

Tekrar kullanılabilirlik biter

Merkezileştirme biter

Gölgelerin gücü adına: Javascript ve CSS

</tbody>

<tfoot>

<tr>

<td>2 kişi

</td/>

<td> 

</td/>

</tr>

</tfoot>

</table>

<p
class="baslik">Başbakan Tayyip Erdoğan köşkte</p>
<p
class="spot">Erken seçim yapmayacak olan başbakan, bunu cumhurbaşkanına da anlatacak</p>
<style type="text/css">

.gorunmeyenoge{

display: none;

}

</style>

<div class="gorunmeyenoge">Başbakan Tayyip Erdoğan köşkte</div>

CSS Nedir?

http://www.cssnedir.com/[06.03.2009 07:54:28]

Bir nesneyi gizlemek için

Dahası var... AJAX ve CSS kullanılarak, masaüstü EXE yazılımlar ile aynı hızda ve performansta çalışan web uygulamaları

geliştirmek mümkün hale gelmiştir. Gmail, bunun en büyük örneğidir.

CSS'i bildiğiniz kadar XHTML'i de iyi bilmelisiniz

[HTML'deki h1, h2, h3 etiketlerini Javascript ile parse etmek suretiyle İçindekiler listesini hazırlayan örnek]

...

CSS deyince neden hep <DIV> <UL> <LI> etiketleri?

CSS destekli sayfalarda çoğunlukla DIV, UL ve LI etiketleri kullanılmaktadır. Çünkü, CSS biçimlendirmeleri kullanılarak, bu

etiketler istenilen yöne doğru dizilebilmektedir:

Soldan sağa:

Sağdan sola:

Yukarıdan aşağıya:

<script type="text/javascript">

//nesne gizlenir

document.getElementById('islemyapiliyor').style.display = 'block';

//nesne gizlenir

document.getElementById('islemyapiliyor').className = 'gorunmeyenoge';

</script>

<style type="text/css">

.gorunmeyenoge{

display: none;

}

</style>

<div
id="islemyapiliyor">Başbakan Tayyip Erdoğan köşkte</div>
CSS Nedir?

http://www.cssnedir.com/[06.03.2009 07:54:28]

Bu bir esnekliktir. Bu özelliğinden dolayı, DIV, UL, LI etiketleri sık sık tercih edilmektedir. Yukarıdaki örnekte görüldüğü

üzere, eğer hazırladığınız dinamik sayfa Arapça, Farsça gibi sağdan sola doğru yazılan bir dilde yayınlanacaksa, DIV-UL-LI

etiketlerinin bu özelliği sayesinde, yazıları sağan sola doğru dizebilirsiniz. Üstelik bunu yapmak için, geliştiricinin herhangi bir

değişiklik yapmasına gerek yoktur!

DIV-UL-LI etiketlerinin gücünü göstern bir örnek uygulama için burayı tıklatın:
DIV-UL-LI etiketleri ile yaslama
Bölgeleri belirleyin

Sayfalardaki ortak bölgeleri belirleyin ve klasikleştirin. İşte, her projede oluşturulan bazı klasik bölgeler…

Uyarı ve bilgilendirme şeritleri

Geçerlilik denetimi (validasyon) mesajları

Formlardaki bilgilendirme metinleri

Sayfalamalar (Pagination)

“Teknik sorun var” sayfaları

Başlıklar (H1, H2, H3…), Spotlar vs

Formlar, metin kutuları, açılır listeler, düğmeler…

…

Bu bölgelere birer isim verin. CSS Class Name’lerinde ve CSS ID’lerinde kullanacağınız bu isimleri standartlaştırın ve

klasikleştirin. Her projede isimleri ve bölgeleri yeniden keşfetmeyi bırakın. Ekipteki herkes, isimleri ezberlesin. En azından,

elinde özet bir doküman olsun.

CSS Nedir?

http://www.cssnedir.com/[06.03.2009 07:54:28]

Uygulamalı Örnek: Validasyon mesajları:

CSS: HTML:

CSS'çiler neyi yapmaz?

<p> </p> kullanmazlar.

<br /> kullanmazlar

spacer.gif resimcikleri kullanmazlar

CSS, anlatmakla neden bitmez?

CSS'in yeni sürümü CSS3 yolda.

Yeni yeni standartlaşıyor.

AJAX.

Geleneksel teknolojilerin CSS'e uyumu

.ValidationMessages{

background: red;

border: solid 2px red;

}

<div class=”ValidationMessages”>

<ol>

<li> <a href=”…”>Projenin adı bilgisi gerekiyor.</a></li>

<li> <a href=”…”>Yatırımcı bilgisi gerekiyor. </a></li>

<li> <a href=”…”>Sektörler bilgisi gerekiyor. </a></li>

</ol>

</div>

CSS Nedir?