CSS
CSS NEDİR?
CSS (Cascading Style Sheets)
CSS, HTML yazım şekli olarak etiket türünde bir yazım dilidir. HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, ise bunu bir adım daha öteye götürür, sayfalar için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.
Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanılır. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanılır ki, bunlar her sayfada ayrı belirtmek yerine CSS yardımıyla bir sefer tanımlanıp bütün web sayfalarında kullanılabilir.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmek gerekmez.
CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.
Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser'ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.
CSS TÜRLERİ
· Yerel CSS
· Genel CSS
· Harici CSS
Yerel CSS, sadece sayfa içerisinde tanımlandığı yerde geçerlidir. Buna karşılık Genel CSS, tüm sayfayı kapsar. Harici CSS ise “.CSS” uzantılı bir dosya olarak kaydedilir, kullanılacağı sayfalarda çağırılmak suretiyle tüm web sitesini kapsayabilir.
1. Yerel CSS
Yerel CSS HTML belgesinin body bölümüne yazılırlar. Sadece bir kereliğine, yazıldıkları yerde etkili olurlar.
<html>
<head>
<title>Yerel CSS</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<h1>Deneme</h1>
<h1 style="color:teal ;font-size:15">Deneme</h1>
<h1>Deneme</h1>
</body>
</html>
Yukarıdaki örnekte yazdığımız ilk kelime normal , ikincisi ise belirtilen renkte ve boyutta görünecek. 3. kelime ise tekrar normal görünecek, bu da yerel şablonların bir kerelik olduğunu ispatlıyor.
2. Genel CSS
Yerel CSS’ in aksine genel şablonlar, HTML belgesinin head bölümüne yazılırlar ve belgenin tümünü etkilerler.
<html>
<head>
<title>Genel CSS</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
<style type="text/CSS">
<!--h1 {color:teal; font-size:15}-->
</style>
</head>
<body>
<h1>Deneme</h1>
<h1>Deneme</h1>
<h1>Deneme</h1>
</body>
</html>
Birinci örneği bu sefer genel şablon kullanarak yazdık, sonuçta üç kelime de şablonda belirttiğimiz özelliklerle görüntülendi. Burada browser'a bir style dokümanı yazmaya başlayacağımızı <style type="text/CSS"> ifadesiyle belirttik. Aynı şekilde </style> etiketi de şablon dokümanının bittiğini gösterir. Aradaki '<!--' ve' -->' ifadeleri kodlarımızı CSS bilmeyen eski sürüm browser'lardan saklamaya yarar.
3. Harici CSS
CSS 'in sizi büyük bir yükten, yani her sayfa için ayrı kod yazmaktan kurtaran türü harici CSS ‘dir. Bu teknikte önce bir stil dosyası oluşturulur, sonra bu stilin kullanılacağı sayfaların başında çağırılır. Aşağıdaki örneğe bakarak bu tekniği daha iyi anlayabilirsiniz.
Bu kodları stil1.CSS adıyla kaydedin.
h1 {font-size:15; color:teal}
h2 {font-size:25; color:silver}
h3 {font-size:35; color:red}
Sonra bu HTML kodlarını yazıp stil1.CSS ile aynı dizine kaydedin.
<html>
<head>
<title>Harici CSS </title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv= Content-Type>
<link rel="stylesheet" type="text/CSS" href="stil1.CSS">
</head>
<body>
<h1>Deneme</h1>
<h2>Deneme</h2>
<h3>Deneme</h2>
</body>
</html>
HTML kodlarının 4. satırında gördüğünüz ve <link rel="stylesheet" type= "text/CSS" href= "stilDosyası.CSS"> şeklinde genelleştirilebilecek ifade tahmin edeceğiniz gibi harici stil dosyasını çağırmak için kullanılır.
CSS (Cascading Style Sheets)
CSS, HTML yazım şekli olarak etiket türünde bir yazım dilidir. HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, ise bunu bir adım daha öteye götürür, sayfalar için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.
Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanılır. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanılır ki, bunlar her sayfada ayrı belirtmek yerine CSS yardımıyla bir sefer tanımlanıp bütün web sayfalarında kullanılabilir.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmek gerekmez.
CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.
Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser'ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.
CSS TÜRLERİ
· Yerel CSS
· Genel CSS
· Harici CSS
Yerel CSS, sadece sayfa içerisinde tanımlandığı yerde geçerlidir. Buna karşılık Genel CSS, tüm sayfayı kapsar. Harici CSS ise “.CSS” uzantılı bir dosya olarak kaydedilir, kullanılacağı sayfalarda çağırılmak suretiyle tüm web sitesini kapsayabilir.
1. Yerel CSS
Yerel CSS HTML belgesinin body bölümüne yazılırlar. Sadece bir kereliğine, yazıldıkları yerde etkili olurlar.
<html>
<head>
<title>Yerel CSS</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<h1>Deneme</h1>
<h1 style="color:teal ;font-size:15">Deneme</h1>
<h1>Deneme</h1>
</body>
</html>
Yukarıdaki örnekte yazdığımız ilk kelime normal , ikincisi ise belirtilen renkte ve boyutta görünecek. 3. kelime ise tekrar normal görünecek, bu da yerel şablonların bir kerelik olduğunu ispatlıyor.
2. Genel CSS
Yerel CSS’ in aksine genel şablonlar, HTML belgesinin head bölümüne yazılırlar ve belgenin tümünü etkilerler.
<html>
<head>
<title>Genel CSS</title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
<style type="text/CSS">
<!--h1 {color:teal; font-size:15}-->
</style>
</head>
<body>
<h1>Deneme</h1>
<h1>Deneme</h1>
<h1>Deneme</h1>
</body>
</html>
Birinci örneği bu sefer genel şablon kullanarak yazdık, sonuçta üç kelime de şablonda belirttiğimiz özelliklerle görüntülendi. Burada browser'a bir style dokümanı yazmaya başlayacağımızı <style type="text/CSS"> ifadesiyle belirttik. Aynı şekilde </style> etiketi de şablon dokümanının bittiğini gösterir. Aradaki '<!--' ve' -->' ifadeleri kodlarımızı CSS bilmeyen eski sürüm browser'lardan saklamaya yarar.
3. Harici CSS
CSS 'in sizi büyük bir yükten, yani her sayfa için ayrı kod yazmaktan kurtaran türü harici CSS ‘dir. Bu teknikte önce bir stil dosyası oluşturulur, sonra bu stilin kullanılacağı sayfaların başında çağırılır. Aşağıdaki örneğe bakarak bu tekniği daha iyi anlayabilirsiniz.
Bu kodları stil1.CSS adıyla kaydedin.
h1 {font-size:15; color:teal}
h2 {font-size:25; color:silver}
h3 {font-size:35; color:red}
Sonra bu HTML kodlarını yazıp stil1.CSS ile aynı dizine kaydedin.
<html>
<head>
<title>Harici CSS </title>
<****content=text/html;CHARSET=iso-8859-9 http-equiv= Content-Type>
<link rel="stylesheet" type="text/CSS" href="stil1.CSS">
</head>
<body>
<h1>Deneme</h1>
<h2>Deneme</h2>
<h3>Deneme</h2>
</body>
</html>
HTML kodlarının 4. satırında gördüğünüz ve <link rel="stylesheet" type= "text/CSS" href= "stilDosyası.CSS"> şeklinde genelleştirilebilecek ifade tahmin edeceğiniz gibi harici stil dosyasını çağırmak için kullanılır.
CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)
Öncelikle resimde görüldüğü gibi Css Design Tasarımını seçiyoruz.
Css Design tasarımında menü gizleme kodunu eklememiz gereklidir.
Menü gizleme kodunu Navigasyonun baslığı: kutucuğuna yapıştırıyoruz. Ardından Kaydet diyoruz
Css Design Menü Gizleme Kodu:
| Kod: |
| <style type="text/css"> <!-- td.nav {visibility:hidden;} --> </style> |
"Ayarlar" sayfasına gelerek site başlığını yok etmeliyiz.Bunu ise site başlığı: Yazının karşısındaki kutucuğa bir kez tıklayıp ardından space (boşluk) tuşuna basıyoruz ve Kaydet diyoruz.
Sayfalarımı değiştir / Yeni sayfa diyoruz.
Aşağıda görüldüğü gibi araçlarımız gösteriliyor.
Tasarımımızın bir tablo içerisinde olması için aşağıdaki yolu izliyoruz.
Resimde görüldüğü dış tablomuzu yaptık.
En üste banner resmi koyacaz.Onun için yaptığımız tablonun en üstüne banner'lık bi tablo yapacağız.
Resimde görüldüğü gibi banner resmi ekleme işlemi yapılmaktadır.Banner boyutları 800 x 100 boyutlarında.Ona göre banner yapabilirsiniz..
Ve işte banner' ımız tablonun içine eklenmiş durumda
Şimdide dış tablomuzun içini renklendirelim.
Resimde görüldüğü gibi renk seçiyoruz...
Ve görüldüğü gibi tablomuzun içini renklendirdik.Ben gri rengi tercih ettim.
Siz hangi seçerseniz seçin.Zevkinize kalmış
Şimdide Tablomuzun sağ tarafına tablo yapalım.
Tablo yapmak için araçlarımızdan yine aynısına tıklıyoruz.
ve gelen pencereden;
Görüldüğü gibi saol tablomuzuda yerleştirmiş olduk.
Yapmış olduğumuz tablonun içine menü kutucukları koyalım.Menü kutucukları tablo ebatları;
satırlar:1
sütunlar:1
Kenar kalınlığı:1
Genişlik:210
Kaç tane sayfamız olacaksa o kadar menü tablosu ekliyoruz ve içlerine sayfa yazılarını ekliyoruz.
Sayfa Linki Yazdığım yeri seçiyorum ve Köprü ekle aracına tıklıyorum.Sonrası resimde görüldüğü gibi..
Tamam'a tıkladığımız anda köprü eklenmiş demektir.Ancak Yazının rengi gördüğünüz gibi koyu mavi oldu.Bunu tekrar eski haline yani siyah yapmak için;
Hepsine bu şekilde sayfasına göre link (köprü ekleyin).
Tasarım olarak biraz bilgi öğretmeye çalıştım.Genel olarak bu verdiğim bilgilere dayanarak kafanızda tasarladığınız tasarımlar yaratabilirsiniz.
Son bi kaç bilgi vereceğim..Daha önce menü gizleme kodu vermiştim.Onu bi yere daha yapıştıracağız.Bu kodu resimdeki yere yapıştırmazsak sitemiz görünmez haberiniz olsun...
Css Design Menü Gizleme Kodu:
| Kod: |
| <style type="text/css"> <!-- td.nav {visibility:hidden;} --> </style> |
Tekrar "Kaynak" aracına tıklayarak Ctrl + A yapıyoruz.Yani kodlarımızın hepsini seçiyoruz ve kopyalıyoruz..
Bu kopyaladığımız kodu bütün sayfalara yapıştırıyoruz.Yapıştırıyoruz derken direk yapıştırmayın.Öncelikle "Kaynak" aracına tıklayıp sonra yapıştırıyoruz..
Görüldüğü gibi bütün sayfalara yapıştırıyorum..
Tasarladığımız sitenin içeriklerini her sayfanın kendisine göre dolduruyoruz.
Kod Ekleme - Hazır Flash Menü Kodlarının vs. Eklenimi:
Css Design tasarımının neresine menü koymak istiyorsanız oraya bi tablo koyacağız.Öncelikle Kenar kalınlığı 0 olan 1 tablo oluşturuyoruz ve içine herhangi bişey yazıyoruz.Resimde gördüğünüz gibi ben "photoshopar" yazdım...
Sonra Kaynak yazan yere tıklıyoruz.
"Kaynak" yerine tıkladığımız zaman yapmış olduğumuz tasarımın html kodu çıkar.Burdan Photoshopar Yazısını buluyorum ve o yazıyı ordan siliyorum.Yani bizim amacımız photoshopar yazısını silip oraya flash menümüzün kodunu eklemek olacaktır...
"Photoshopar" yazısını silip yerine hazır flash sitelerinden yaptığımız flash menü kodumuzu oraya yapıştırıyoruz.
Görüldüğü gibi kodumuzu yapıştırdık oraya.Bu işlemden sonra "Kaynak" yazan yere tekrar tıklıyoruz ve tasarım sayfamızın görünüşü geliyor.Tablonun içinde menü felan görmüyeceksiniz.Sakın yapamadım diye paniklemeyin.Çünkü burda menü görünmez.Menünüz siteyi kaydettiğiniz zaman ardından sitenizi açarak görebilirsiniz..
Sitemizi açtığımızda gördüğünüz gibi tablomuz miiss gibi eklenmiş durumda
Bu işlemi uygulayarak istediğimiz hazır kodu ekleyerebiliriz.Sonradan o kodu silmek mi istiyorsunuz.Hiç sorun değil.Kodu eklediğiniz tabloyu silin.Kodu içirisine yapıştırdığımız için otomatikmen tablo ile birlikte kodta silinecektir..işlem bu kadar www.photoshopar.tr.gg
Ziyaretçi Defteri Oluşturma - Extralar Kısmı
Örnek Olarak benim ziyaretçi defterime bakabilirsiniz:
http://photoshopar.tr.gg/ziyaretcidefteri.htm
Css Design tasarımında ziyaretçi defteri gibi bazı extraları site içeresine koymamız zordur.Onun için ayrı bi sayfada tablo içerisine güzel ziyaretçi defteri oluşturmamız mümkündür.Bunun için aşağıda vermiş olduğum kodu Ekstraları Değiştir/Ziyaretçi defteri/Ziyaretçi defterinden önceki metin: kutucuğuna yapıştırmamız gerekiyor...
Ziyaretçi defterinden önceki metin kutusuna yapıştıracağımız kod:
| Kod: |
| <style> <td> </style> <font><font> <table> <tbody> <td></p> BURAYA İSTEDİĞİNİZ BİR YAZI YAZABİLİRSİNİZ <center><img src="http://img296.imageshack.us/img296/1265/ziyaretcideftericopywa2.png"<center> |
Kod üzerinde kendinize göre değişiklik yapabilirsiniz.Bu vermiş olduğum kodtaki bazı yerlerin ne işe yaradığını yazdım aşağıda:
<font> = Alandaki İsim,mail adresi,mesajınız vs gibi yazıların rengi.
<font> = Yazıların fontu - size:2 ise yazıların büyüklükleri.
bordercolor="#FFFFFF" = Tablo kenarlarının rengi
bgcolor="#797268" = Tablo içi rengi
Bundan Sonrasını Resim üzerinde anlattım.
Site arkaplan rengini değiştirmek için;
Aşağıdaki kod arkaplan "siyah" kodudur.Bu kodu "Tasarım üzerindeki yazı" yerine yapıştırırsanız sitenizin arkaplanı siyah olacaktır..
| Kod: |
| <body bgcolor="#000000"> |
#000000 = bu kodlama siyah içindir.Diğer renkleri aşağıda verdim kendi zevkinize göre değiştirebilirsiniz
Mail adresimizi word'te açtırma;
Öncelikle resim olarak yapacaksanız veya köprü olarak yapacaksanız ikiside aşağıdaki anlattığım gibi..Ben resimlisini anlattım.Ama aynı ikiside aynı..
Köprü Eklediğimiz Resmin Etrafındaki Maviliğ Yok Etme!!
Köprü eklediğimiz resimlerin etrafı mavi renk oluşur.Bu mavi rengi yok etmek için;
Köprü ekleyeceğimiz resmin üzerine sağ tıklayıp; "Resim Özellikleri" Diyoruz..