İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa]
 Site Haritası 
 
Site Map
Ana SayfaYeriniz | Ana Sayfa | Makaleler | Programcılık | CSS | CSS 2

Diğer Yazılar
CSS Nedir?
Kısa Bilgiler Örnekler
CSS-P Konumlandırma
CSS ile Background
CSS ve XHTML ile Temel Sayfa Tasarımı


E-posta Gönderin Yorum Yazın
Güvenlik Kodu:6095Güvenlik Kodu:6095Güvenlik Kodu:6095Güvenlik Kodu:6095




En Son Okunan 10 Makale
  1. Tasarımın Sonumu Geldi? (1)
  2. Grafik Tasarımda Tipografi
  3. HACCP Nedir?
  4. Reklam Tasarımı
  5. Site İçi Arama
  6. Kariyerin yolları taştan...
  7. Okunaklılık ve Okunabilirlik
  8. STORYBOARD Görsel Senaryo Hazırlamak
  9. Büyüklere Masallar
  10. İnsan İlişkileri Üzerine
 
CSS 2>
Yazı Tipi KüçültYazı Tipi BüyütAna SayfaYazıcıdan ÇıkarPDF Belgesi Olarak GörüntüleFavorilerime EkleArkadaşıma Tavsiye EdeceğimRTF (Word Dokümanı) olarak görüntüle

Hiç bir sesli harf içermeyen garip başlığına rağmen bu yazıyı okumaya niyetlendiğinize göre HTML nedir biliyorsunuz ve siz de içiçe tablolar açmaktan, tabloların hücreleriyle uğraşmaktan bitap düşenlerdensiniz. Yine de malumâtı olmayan okurlarımız için de kısaca özetlersek; bu yazı web sayfalarını oluşturmakta kullanılan işaretleme dili HTML’in yetersiz kaldığı tasarım konusunda daha az bir zahmetle, HTML’in tasarım sınırlarının ötesinde çalışabilme olanağı sağlayan CSS’nin 2. sürümü hakkındadır. CSS, stil şablonu olarak adlandırılır ve kısaca HTML sayfamızda hangi öğenin ne şekilde görüneceğini, HTML kodları arasına tasarım kodları bulaştırmadan belirtmemizi sağlar.

CSS2, CSS1’e nazaran daha basit ve daha kullanışlıdır. Sadece klasik web tarayıcılarında değil, görme ve işitme engelliler için geliştirilmiş tarayıcılar üzerinde, el bilgisayarları, yazıcı ve benzeri cihazlarda da hazırladığınız belgelerin en iyi şekilde görüntülenmesini sağlar. En belirgin özelliği olan pozisyonlama (positioning) sayesinde içiçe tablolar açmadan, tablo hücreleri ile boğuşmadan sayfamızı tasarlama imkanı sunar. Böylece, ürettiğimiz HTML kodu incelerken ne biz yoruluruz ne de tarayıcılarımız. CSS2, bu yeni özelliği nedeniyle CSS-P olarak da adlandırılmaktadır.

CSS2 ile gelen yeniliklerden bir tanesi de daha kolay, daha işe yarar "seçici" (selector) tanımlayabiliyor olmamız. Seçiciler, hazırladığımız stil şablonlarının hangi HTML unsurlarına etki edeceğini belirten tanımlamalardır. Şimdi seçicilerden başlayarak hızla yol alalım.

Bir HTML sayfasında CSS kullanmanın 3 yolu vardır:
Sayfamızdaki bölümünde harici bir stil dosyasının yolunu belirterek.


...
Sayfamızın yine bölümünde bütün stil tanımlamalarımızı doğrudan yaparak.


Stil kullanmak istediğimiz HTML öğenin kendi etiketi (tag) içerisinde style özelliğine atıfta bulunarak. (Not: Bu yontem bilhassa CSS2'de tavsiye edilmiyor)

 

Seçiyorum, Seçiyorum, Seeeeeeeçtim!

CSS1'deki seçiciler iki türlüydü: Doğrudan bütün ilgili HTML tagına etki eden seçiciler ve genel amaçlı seçiciler.

Örnek: P { color:red }

Sayfamızdaki bütün

etiketli öğeler bu P seçicisi ile etkilenecektir. Şimdi genel amaçlı bir seçici oluşturalım:

.dipnot {color:gray; font-size:8 pt}

Sayfamızda bu şablonu kullandırmak istediğimiz öğelerinin etiketlerine class=dipnot ifadesi eklememiz kafi.

CSS2'de HTML koda hic bulasmadan stil şablonu öğelerle ilişkilendirmek amaçlandığı için bazı iyileştirmeler sunulmaktadır. Mesela sayfamızdaki öğelere birer id verip, bu id'lere yönelik stil şablon hazırlayabiliriz.

Örnek: #sol_sutun {border: 1px #dddddd solid;position: fixed;width:150px} Sayfadaki "sol_sutun" id'li etikete etki eder.

Tek şablon ile birden çok HTML etiketi etkilemek de artık mümkün.

Örnek:
BODY, P, TD, #sol_kolon{ color: green; padding: 5px; background-color: #E3DA8E; font-family: Verdana; text-align: justify;}

CSS1'de (bağlantı) etiketine has bir özellik vardı. Bir bağlantıya ait farklı durumlar için farklı stil şablonları yapabiliyorduk. a:link (normal hali),a:active, a:hover (üzerine fare ile gelindiğinde), a:visited (daha önce tıklanmış) gibi. CSS2'de bu özelliklere bir yenisi daha eklendi: "focus" yani fare yada klavye ile, herhangi bir öğeye odaklanmamız halinde o nesnenin ne şekilde görüneceğini de artık stil şablonlarla belirtebiliyoruz, dahası, bu özellik sadece için değil başta form elemanları olmak üzere sayfamızdaki fokuslanabiliri bütün öğeler için de kullanabiliyoruz.

Hemen belirtelim, malumunuz, tipine göre değişen text, password, checkbox gibi birden fazla

Örnek:
input, textarea { padding: 3px; border: 1px solid #7b93af; background-color: #f2f6f8; color: #000; margin-bottom: 1px; } a:focus,input[type="text"]:focus, input[type="password"], textarea:focus { border: 1px solid #ff7b93; }

Bu son örneğimizin üzerinde biraz duralım. Dikkat ettiyseniz ilk önce öğelerimizin genel durumlarına hitap etmek üzere bir stil şablon yazdık ve focus yada başka bir durum belirtmedik. Daha sonra sadece focus durumunda, normal durumundan farklı olarak nasıl bir görünüme bürünecekse onu belirttik. Bütün görünüm şablonunu focus için yeniden yazmadık. Çünkü daha önce atanan özellikler yenisi belirtilmediği müddetçe korunmaktadır ve bu da bize kolaylık sağlamaktadır.

İskeletsiz Web Sayfası Mı? Yok Daha Neler!!!

Evet, ilk gördüğümüzde biz de buna benzer nidalarda bulunmuştuk. Sorun web sayfasının iskeletsiz olması değil, iskelet olarak bugune kadar hep tablo kullanmak zorunda kalmış olmamız. "Tablo, tablo amacıyla icad edilmişti, yapısal bir unsur olarak kullanılması hedeflenmemişti. Ama hepimiz onu eğip-büğüp iskelet malzemesi olarak kullandık." (Sevgili Dr. Hakkı Öcal ağabeyimizin kulakları çınlasın).

Bu yeni tasarımın temel taşı

'ler yani katmanlardır. Kısaca özetlersek şunu yapıyoruz: sayfamıza koyacağımız içeriği uygun bağımsız öbekler halinde tasarlayıp, bu öbekleri bir
'in içine koyup, hazırlayacağımız stil şablonlar ile o
'e de "arkadaş sen bu sayfanın şu şu piksellerinden itibaren şu şekilde gözükeceksin" diyoruz. Bütün öbekleri uygun şekilde yanyana, alt alta, yada sabit olarak tutturuyoruz. Sadece sağ-sol ve yukarı-aşağı değil, hangi katman hangi katmanın üzerinde yada altında kalacak, onu da belirtebiliyoruz.

Küçük bir örnekle devam edelim.

Üç sütunlu bir sayfa yapmak istiyoruz. Sol sutunumuzda en yukarıda sitemizin "ana menü"sü ve onun altında bir "üye giriş formu" olmasını istiyoruz. Orta kısımda en üstte büyücek bir resim ve yazıdan oluşan o günün anlam ve önemine binaen bir "giriş yazısı", onun altında daha önceki günlere ait yazılara gitmek üzere "bağlantı listesi", en altta da "site kuralları" olsun istiyoruz. Sağ sütunda ise, en yukarıda sayfa aşağılara doğru uzansa da kaymayacak dikine bir "reklam" banneri koymak istiyoruz.

Yukarıdaki paragrafta tırnak işaretleri ile belirttiğimiz ifadeler, her birini ayrı bir

'e oturtmak istediğimiz öğe öbekleridir. Neydi bunlar:
"ana menü", "üye giriş formu", "giriş yazısı", "bağlantı listesi", "site kuralları","reklam".

CSS1'e göre düşündüğümüzde de bu öbekleri oluşturmak durumundaydık ama o zaman bunların her birini bağımsız bir tablo şeklinde hazırlamak için hemen kolları sıvardık ve sonunda bu bağımsız tabloları ana iskelet tablosunun hücrelerine özene bezene yerleştirirdik. Artık öyle yapmayacağız.

Bir iki öbeği ve onlara etki edecek stil şablonlarını burada belirtelim. Örneğin tamamını bu bağlantıdan inceleyebilirsiniz.

İşte ana menü öbeğimiz:


Reklam öbeği:

Bu iki öbeğe etki edecek stil şablonları:

#ana_menu{
padding:5px;
border: 1px #ffffff solid;
background-color: #E3DA8E;
border-color:#867B20;
text-align: left;
position: absolute;
overflow:visible;
top: 5px;
left: 5px;
width: 150px;
height:210px;
}

#reklam {
padding: 5px;
background-color: transparent;
position: fixed;
top: 5px;
right: 5px;
width: 150px;
}

Farklı Ortamlar İçin Tek HTML, Farklı CSS'ler... Güzeeel!

Farklı ortamlardan kasıt, girişde de belirttiğimiz üzere, yazıcı, el bilgisayarları, engelliler için tasarlanmış özel tarayıcılar gibi ortamlar.

Canlı bir örnekle açıklayalım. Bu sayfada, yukarıdaki "yazdır" simgesine bastığınızda bu yazının "yazıcı dostu" diye adlandırılan daha sade biçimli bir hali gelmektedir. Böylece çıktı alırken, yazı ile doğrudan alakası olmayan siteye has bannerları, resimleri, renkli renkli yazıları, kenarlardaki bağlantıları vs. bastırmamış sadece yazıyı ve ilgili başlık bilgilerini yazdırmış oluyoruz. Fakat bunu sağlamak için ayrı bir sayfa kullanıyoruz. CSS2 ile artık aynı sayfada farklı ortamlar için farklı css'ler kullanmak mümkün.

Bunu yapmak için, sayfamızın ... kısmında her ortam (medya) için ayrı birer stil şablonu dosyası tanımlamamız gerekiyor.

Görüldüğü üzere ikinci ifadede "media=print" demek suretiyle sayfayı basarken hangi stil şablonu kullanacağımızı belirtmiş oluyoruz. Burada da hemen belirtelim, ardarda iki stil dosyayı tanımı kullandığımızda, ilk şablondaki düzenlemeler, eğer bir sonraki şablonda yeniden belirtilmemişse, eski değerlerini korumaktadırlar.

Bazı durumlarda, yazıcıya sadece sayfamızda metinsel ifadeleri bastırmak isteyebiliriz. Küçük yada büyük herhangi bir resmin basılmasını istemiyorsak, küçük bir stil şablonu ifadesi ile bütün resimleri tek satırda görünmez ve sayfada yer kaplamaz bir şekle dönüştürebiliriz.

Örnek:
img {display:none}

Böylece sayfadaki hiç bir resim yazıcıda çıkmayacaktır. Aşağıdaki ekran çıktısında renkli ve resimli bir sayfa ile yazıcı versiyonunu yanyana görmekteyiz.

Evet, CSS2'nin serin sularına hızlı ve kısa bir dalış yaptık. İnşallah daha detaylı yazıları ilerleyen sayılarımızda BT Mutfak köşemizde sunmak nasip olur. Dergimizi de en yakın zamanda tabloların esaretinden kurtarmayı planlıyoruz. Terzi kendi söküğünü dikemez misali :)))



Not: Yazılar konusundaki yorumlarınız için lütfen Yorum Yazın bölümümüzü kullanın.

Yazar : Hasan Civelek
Son Güncelleme : 30 Ocak 2006, Pazartesi
Sayfa Sürümü : 1
Okunma Adedi : 9,266
Son Okunma : 2017-05-29 19:05:00
Kaynaklar : http://www.bthayat.net/site/yazi_goster.php?id=273

CSS ile BackgroundCSS 2CSS ve XHTML ile Temel Sayfa Tasarımı
© [Site Haritası]
| Makaleler | Seyir Defteri | Kaynaklar | İndirin | İletişim |

RSS dosyasını görmek için tıklayınız. RSS dosyasını görmek için tıklayınız.XML versiyonu için tıklayınız WAP versiyonu için tıklayınız Bu site DyNA İçerik Yönetim Sistemi üzerinde çalışmaktadır.
İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa
ismail kırbaş ile web sitesi tasarimi sitemap ismail kırbaş ile web sitesi tasarimi sitemap
  Sitemizde 15 kişi çevirimiçi | Bugün =298 | Dün =230 | Bu Ay=6,629 | Günlük En Fazla=1,109 tekil ziyaretçi