Otomatik Açılan Sayfa Kodu:
<SCRIPT>
toplist=window.open("http://www.google.com"); self.focus();
</SCRIPT>
Sitenize Son Dakika Haberleri Ekleyin
<iframe src="http://sondakika.haber3.com/index-468_content.php" width="468"
height="60" frameborder="0"></iframe>
CSS Bilgisi ve Başlangıç
--------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------
Genel Css kodları
LİNK ÖZELLİKLERİ
a:link Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
a:active : Linkin tıklandığı andaki durumudur.
a:visited : Linkin tıklandıktan sonraki durumudur.
BİÇİMLENDİRME:
color : Linkin rengini belirler.
background-color : Linkin zemin rengini belirler.
background-image : Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration : Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight : Yazının kalınlık veya inceliğini belirler.
border : Linkin etrafına kenarlık ekler.
display : Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.
LİSTE ÖZELLİKLER
disk : Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.
KATMAN ÖZELLİKLERİ
position : Katmanın yerinin belirlenmesini sağlar.
absolute : Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative : Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static : Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top : Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left : Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width : Katmanın genişliğinin ne kadar olacağını belirler.
height : Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto : Otomatik olarak belirlenir.
scroll : Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden : Sığmayan yerleri gizler.
visibility : Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden : Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.
FONT ÖZELLİKLERİ
font-family : Yazı türünü belirler.(Arial , Verdana gibi.)
font-style : Yazının normal veya sağa eğik olmasını sağlar.
font-variant : Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight : Yazının kalınlık-inceliğini belirler.
font-size : Yazının büyüklüğünü belirler.
TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align : Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.
İMLEÇ ÖZELLİKLERİ
crosshair : İmlecin artı işareti şeklinde olmasını sağlar.
auto : İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default : İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand : İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move : İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize : İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize : İmlecin sola yatık normal ok olmasını sağlar.
se-resize : İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize : İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize : İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize : İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize : İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize : İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text : İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait : İmlecin meşgul animasyonuna dönüşmesini sağlar.
help : İmlecin yardım-soru işaretine dönüşmesini sağlar
ZEMİN ÖZELLİKLERİ
background-color : Zeminin rengini belirler.
#color : Renk adı.
transparent : Zeminin saydam olmasını sağlar.
background-image : Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat : Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment : Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed : Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position : Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right : Resmi sağa yerleştirir.
...px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.
TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.
padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
border : Tablonun kenarlarının şekillendirilmesini sağlar.
border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.
border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.
border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.
border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.
color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.
NOT : Başlık "TABLO" olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS' yi özel kılan da zaten bu...
KAYDIRMA ÇUBUĞU ÖZELLİKLERİ
scrollbar-face-color : Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor.
scrollbar-base-color : Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor.
scrollbar-shadow-color : Sağ ve alt kenarlıkların gölge rengi.
scrollbar-highlight-color : Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color :Yön oklarının rengi
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
CSS yazarken bazı kurallar koyarsak ve bu kurallara göre kodumuzu yazarsak bir çok konuda yararını göreceğiz.
- Daha hızlı kod yazma: Belli bir standardınız oluşturunca kod yazmak daha hızlı olacaktır.
- Birden fazla kişinin çalıştığı durumlarda kolaylık sağlar: Aynı kodlama düzenine sahip olmak beraber çalışmayı kolaylaştırır. Koordinasyonu arttırır.
- Daha okunabilir kodlar elde ederiz.
- Daha performanslı sayfalar elde ederiz.
- Daha sonra kodları güncellememiz gerektiğinde bize kolaylıklar sağlar. Mesela bir projeyi bitirdik 3-4 ay sonra değişiklik geldiğinde düzenimiz standart olduğu için düzeltmelerimizi daha kolay yaparız.
CSS kodu yazarken bazı standartlar oluşturmanın avantajlarından bahsettik yukarıda. Peki bu standartlar nasıl olmalı neler yapmalıyız ki optimum kod elde edelim.
1. CSS doküman indeksini oluşturun
CSS dokümanınız indeksini hazırlayınız. Büyük projelerde tercih edilecek bir husus bence. Şimdiye kadar hiç uygulamadım ama büyük projelerde uygulamanın yararlı olacağını düşündüğüm bir uygulama
/*------------------------------------------------------------------
[CSS Kod indeksi]
1. Body
2. Üst Alan / #ustAlan
2.1. Menü / #menu
3. İçerik Alanı / #icerik
3.1. Sol Kolon / #solKolon
3.2. Sidebar / #yanKolon
3.2.1. RSS / #rss
3.2.2. Arama / #arama
3.2.3. Kutular / .kutu
4. Alt Alan / #altAlan
-------------------------------------------------------------------*/
2. CSS dokümanınıza imzanızı atın
Kod yazarının veya yazarlarının imzası ve genel bilgilerini yazarak kodlarımızı başlamalıyız.(Bende bunu ara sıra unutuyorum. Ama unutmamak gerekli)
/************************************************
MYK Medya - http://myk-medya.com/ yahoyt.com
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************************************/
3. Seçici isimlendirirken standart ve anlamlı isimler verin
Seçici isimleri ve genel isimlendirmede bir standardı oturtun.
Anlamlı isimler verin. Anlamlı isimler vermek kod yazarken ve daha sonrası için çok büyük kolaylık sağlayacaktır. XHTML kodların nasıl bir anlamı(body, p, form vd.) varsa, kendi oluşturduğumuz seçici isimlerinde bir anlamı olması mantıklıdır.
#maviKutu yerine #haberKutusu veya #haberAlani tanımı daha mantıklı ve anlamlı bir isimlendirmedir.
İsimlendirmede bir standardınız olsun. Benim standardım bu konuda ilk harf küçük, sonraki kelimelerin baş harfi büyük ile başlar ve bitişik yazılır.
#icerikOzu{..} #solIcerikAlani{..}Bu benim standardım. Başka türlü standartlarda vardır. Her kesin kendince bir standardı olabilir. Mesela alt çizgiyle ayıranlar var. (-)Tire ile ayıranlar var.
#icerik_ozu{..} #sol-icerik-alani{..}Bu standardı herkes kendince yapabilir. Benim önerim aynı projede çalışan insanların aynı kodlama yöntemini kullanması, diğer türlü pek hoş olmuyor. Göz aşina olmayınca bir eksik hissediyor insan kod yazarken.
4. Kısaltma kullanın.
CSS tanımlarında kısaltmaları kullanın. CSS kısaltmaları hakkında daha fazla bilgi içinhttp://www.fatihhayrioglu.com/cssde-kisaltmalar/ okumanızı tavsiye ederim.
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;
yerine
font: bold 11px/15px verdana, sans-serif;
5. CSS dokümanlarınızı anlamlı bölümlere ayırın.
Büyük projelerde css dokümanlarını birden fazla bölümlere ayırarak daha düzenli ve kolay kodlanabilir dokümanlar elde ederiz.
@import url(/css/iskelet.css);
@import url(/css/fontlar.css);
@import url(/css/renkler.css);
@import url(/css/sifirlama.css);
Ben yukarıdaki yöntemi genelde çok büyük projelerde kullanmayı tercih ediyorum. Normalde ve genellikle tek ve iki css dokümanı ile projeyi bitiriyorum. Performans açısından bu daha iyi ayrıca.
Eğer CSS sıfırlama tekniklerinden birini kullanacaksam Bunu imzadan sonraya yazmak. Yada site genel tanımlarını başa yazmak. YUI CSS Reset ve Eric Meyer'in ki var mesela.
/************************
************************
MYK Medya - http://myk-medya.com/
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/
body{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}
/*kapsayamam sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu{display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu{height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
/*kapsayamam sorunu */
6. Her satıra bir tanım yöntemini kullanın
CSS özelliği tanımlarken her satıra bir tanım yazarak daha uygun kod elde edebiliriz.
Ben daha önce her satıra bir özellik tanımı yapıyordum.
#aramaAlani{
float:left;
width:265px;
background-color:#fff;
border:3px solid #525252;
}Bu yöntemde kod açık ve görüntü olarak daha kullanışlı görünse de, fazla boşluklar sorun oluşturmaya başladı. CSS kodları çok uzayınca kaydırma çubuğu ile çok aşağılara in yukarı çık zaman kaybına neden oluyordu.
Her Satırda Bir Tanım Yapma Yöntemi
Bende her satıra bir tanım yöntemini kullanmaya başladım. Aslında benim bu yönteme ilk geçme nedenim olan optimizasyonda css kodlarımı optimize ederken fazla boşluklardan kurtulmam gerektiğiydi. Daha sonra bu yöntemin daha avantajlı olduğunu gördüm, ayrıca daha derli toplu kodlar oluşturmama yaradı. Bundan sonra böyle kod yazamaya başladım.
#anaKapsul{...}
#ustalan{...}
#icerikAlani{...}
#solIcerikAlani{...}
#sagIcerikAlani{...}
#altAlan{...}Kodlarımızın daha okunabilir olması içinde girintili bir yapıyı tercih etmeliyiz.
#icerikAlani{
clear: left;
float: left;
padding-top: 20px;
}
#solIcerikAlani{
float: left;
margin-right: 13px;
width: 647px;
}
#icerikOzu{
clear: left;
float: left;
margin-top: 20px;
}
#sagIcerikAlani{
float: left;
margin: 0;
width: 300px;
}7. Kodlarınızı yorum satırları ile açıklayıcı hale getirin.
Kodumuzun anlaşılabilir olması için yorum satırları eklemeliyiz. Bölümleri ve özel alanları yorum kodu ile belirleyerek anlaşılabilirliği arttırabiliriz. Böylelikle bölümler arasında daha kolay ayrım yapabiliriz. Kod okunabilirliği daha fazla olacaktır.
#anaKapsul{margin:0 auto; width:960px;}
/**************************************************** ustalan */
#ustalan{padding-top:20px;}
/**************************************************** icerikAlani */
#icerikAlani{float:left; clear:left; padding-top:20px;}
/*sol icerik alani */
#solIcerikAlani{float:left; width:647px; margin-right:13px}
#icerikOzu{float:left; clear:left; margin-top:20px}
/* sagIcerikAlani */
#sagIcerikAlani{float:left; width:300px; margin:0;}8. CSS özellik tanımlarını sıralayın.
Özellik tanımlarında sıralama uygulayın. Özellik tanımlarında şablon tanımlarını başta yazmak. CSS tabanlı kodlama yazarken site yapısını oluşturan özellikler(float, width, height gibi özellikleri) ilk sırada yazıp sonra diğer özellikleri yazmayı tercih ediniz.
#solIcerikAlani{float:left; width:647px; margin-right:13px}Burada bir diğer yöntemde özellikleri alfabetik sıraya göre yazmaktır. Buradaki amaç bir standart oluşturup göz aşinalığı sağlamak ve böylelikle daha hızlı kod yazmaktır.
Sıralayı şöyle yapmak mantıklı olacaktır.
- Konumlandırma, boyutlar (width, height, position, float, clear)
- Kenar için ve kenar dışı boşluklar ve kenar dışı çizgisi (margin, padding, border)
- Metin tanımları (font, line-height, color)
- Diğer özellikler
9. Çalışma gruplarınızda ortak standardınızı oluşturun.
Bir projede beraber çalıştığınız insanlarla aynı kodlama düzeninde çalışması çok önemlidir. Projede çalışan kişilerin bir araya gelip ortak bir düzen oluşturmaları ve projede bu düzen üzerine çalışmaları herkes açısından büyük katkı sağlayacaktır. Ayrıca css düzeltmelerinde(hack) de aynı şey söz konusu. Mümkünse aynı css düzeltmelerini kullanmanız ortak çalışılan projelerde size kolaylık sağlayacaktır.
10. CSS Editör araçlarından yararlanın
Daha öncede yazdığım gibi css editörü olarak Adobe Dreamweaver kullanıyorum. Bunun bir kaç sebebi var. Eskiden beri kullana gelmenin verdiği bir el alışkanlığı. CSS ve son sürümde de javascript editör kısımların gayet güzel çalışması.
Gelelim CSS Editörlerinin bizim CSS düzenine katkılarına
10.1 Otomatik tamamlama özelliği bize kod yazarken çok yardımcı oluyor. Bu özellik kod yazma hızımızı arttırıyor ve yanlış yazımları engelliyor.
10.2 Kodların renklendirilmesi de editörün güzel özelliklerinden biridir. Seçici, özellik, tanım ve yorum satırı ayrımı bize göstererek kod ayrımına yardımcı olur ve daha okunabilir kod görünümü sağlar.
10.3 Sık kullandığımız css düzeltmelerini(hack) snippets(dw özelliği) alanına ekleyerek hız kazanabiliriz. Daha hızlı olmak için bu tanımlara bir kısa yol bile atayabilirisiniz.
10.4 Dreamweaver'ın stil dosyalarını standarda oturmak çok kolay.
Edit -> Preferences.. tıklayınca gelen pencereden Code Format kısmını seçince sağ tarafta CSS.. düğmesine tıklayınca CSS doküman formatını ayarlama ekranından css düzenimizi ayarlayabiliyoruz.
Notepad ++ daki hizalama çizgileride çok güzel dw olmaması çok üzücü. DW'da hala tam olarak istedikleri karşılaya bilmiş değil, ama bildiğim en iyi editör.
Sonuç
Burada ben kullandığım ve araştırma sonucu elde ettiğim css düzeninden bahsettim. Bu stadartları kendinize göre değiştirebilir ve kendi stadartlarınızı oluşturabilirsiniz, Amaç stadart ve düzenli bir css kodlama düzenine erişmek. Son olarak örnek bir css dokümanı nasıl olmalıya bir örnek yazarsak:
XHTML kodu:
<div >
<div >
</div><!--[if !IE]>ustAlan sonu<![endif]-->
<div >
<div >
<div ><img src="images/promo.jpg" width="647" height="264" alt="Promo" /></div>
<div >
</div><!--[if !IE]>icerikOzu sonu<![endif]-->
</div><!--[if !IE]>solIcerikAlani sonu<![endif]-->
<div >
</div><!--[if !IE]>sagIcerikAlani sonu<![endif]-->
</div><!--[if !IE]>icerikAlani sonu<![endif]-->
<div class="kapsayamamaSorunu">
</div>
</div><!--[if !IE]>anaKapsul sonu<![endif]-->
CSS kodu
/************************
************************
MYK Medya - http://myk-medya.com/
yahoyt.com
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/
/************************************************** Genel Tanımlar */
body{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}
/*kapsayamam sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu{display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu{height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
/*kapsayamam sorunu */
#anaKapsul{margin:0 auto; width:960px;}
/************************************************** ustalan */
#ustalan{padding-top:20px;}
/************************************************** icerikAlani */
#icerikAlani{float:left; clear:left; padding-top:20px;}
/*sol icerik alani */
#solIcerikAlani{float:left; width:647px; margin-right:13px}
#icerikOzu{float:left; clear:left; margin-top:20px}
/* sagIcerikAlani */
#sagIcerikAlani{float:left; width:300px; margin:0;}
/************************************************** altAlan */
#altAlan{clear:left; background-color:#404040; padding:12px; margin-bottom:20px;}
----------------------------------------------------------------------------------------------
Stil (style) Nedir?
Web sayfalarının biçimidir.
Şimdiye kadar web sayfalarımızı biçimlendirmek için HTML damgalarını kullandık. Bu işi iki yöntemle yapabiliyorduk.
- HTML Damgaları İle Genel Stil Yaratma
- HTML Damgaları İle Yerel Stil Yaratma
HTML Damgaları İle Genel Stil Yaratma
Bütün web sayfasında geçerli olmasını istediğimiz font tipi, font rengi, zemin rengi, link renkleri vb nitelemeleri <BODY ... > içinde yaptığımızı biliyoruz.
Örnek
<BODY color="blue" bgcolor="#FF0000" > ... <BODY ... >
nitelemesi bütün web sayfasının zemin rengini kırmızı, harf rengini mavi yapar. Ne var ki, bu tür genellemeler, çoğunlukla web sayfasının tekdüze olmasına neden olur. Zarif olmaktan uzak bu tür sayfaların, kullanıcının ilgisini çok çekmeyeceği açıktır. Bu nedenle biçimlendirmeyi gerektiğinde genel gerektiğinde yerel yapabilmeliyiz.
HTML Damgaları İle Yerel Stil Yaratma
<BODY ... > içinde yapılan genel stiller yerine istenen yerlerde farklı biçimler yaratmanın bir yoludur.
Örnek
| Görüntü | HTML Kodları |
|---|---|
| bold | <b>bold</b> |
| italik | <i>italik</i> |
| strong | <strong>strong</strong> |
| emphisize | <em>emphisize</em> |
| pre | <pre>pre</pre> |
| abc | <font color="Blue" face="Times New Roman"></font>abc |
Bu yöntem, <BODY ... > içinde yapılan genel stillerden daha kullanışlı olmakla birlikte oldukça zaman alıcı ve yorucu bir iştir. Daha kötüsü, yüzlerce web sayfamız olduğunda, bu sayfalarda biçim değişikliği yapmak hemen hemen olanaksız hale gelir.
CSS dili bu zorlukları aşmak için yaratılmıştır. Önce bu kısaltmanın ne olduğunu açıklayalım.
- CSS
- Cascading Style Sheets.
CSS 1 ve CSS 2 tanımlamaları diye ikiye ayrılan bu dilin her kodunu bütün tarayıcılar (browser) aynı şekilde algılamayabilir. Ama biz burada, başlıca biçimlendirme kodlarını ele alacağız. Ayrıntılar için, CSS dökümanlarına bakılabilir.
CSS İle Stil Yaratma Yöntemleri
- HTML Seçicilerine Gömülü Stil Yaratma -inline-
- HEAD Bölümüne Gömülü Stil Yaratma
- Dış Stil Dosyasına Link Verme
- @import ile Dış Stil Çağırma
HTML Seçicilerine Gömülü Stil Yaratma
Her HTML takısı içine onun biçemini belirten bir stil kodu yazmak, yapılabilecek en kötü iştir. Bu yöntem çok özel hallerde kullanılmalıdır. Örneğin, belli bir paragrafın 3em içeriden başlamasını istiyorsak, aşağıdaki gibi P takısına gömülü stili yazarız:
<p style="text-indent: 3em;">... </p>
H1 başlıklarının kırmızı renkli olmasını istiyorsak aşağıdaki gibi H1 takısına gömülü stili yazarız:
<h1 style="color: #ff0000;">... </h1>
HEAD Bölümüne Gömülü Stil Yaratma
Web dökümanında
BODY , H1, ... , H5 , P , i , B , OL , TD , A , div
gibi damgalarla seçilen yerleri tek tek biçimlendirmek yerine, onları HEAD bölümüne yazacağımız bir kodla biçimlendirebiliriz. Örneğin bütün paragrafların 3em içeriden başlamasını istiyorsak, HEAD bölümüne
<head>
<title>İlk css sayfam</title>
<style type="text/css">
<!--
p { text-indent: 3em; }
--></style>
</head>
yazarız. Genel olarak, bütün elemanların nasıl biçimlendirileceğini
<STYLE TYPE="text/css">
...
...
</STYLE>
içine rasgele sıralı olarak yazarız.
Bu kodlar web dökümanının
<HEAD>
...
...
</HEAD>
bölümü içine yazılır. Bunu bir örnekle gösterelim:
Örnek
| <HTML> |
| <HEAD> |
| <STYLE TYPE="text/css"> |
i {color: #FF5500 ; |
P { background-color: #00FFFF ; |
B { color: #CC6633 ; |
| </STYLE> |
| </HEAD> |
| <BODY> |
| ...... |
| </BODY> |
| </HTML> |
Bu biçimin nasıl olduğunu görmek için aşağıdaki linki tıklayınız.
Örnek 1
Hypertexlink Biçimlendirme
Linkleri biçimlendirmek için CSS bize geniş olanaklar sağlar. Linkin renginin, font tipinin, büyüklüğünün vb görünümlerinin ziyaretten önce, ziyaretten sonra, ziyaret için tıklandığında ve mouse üzerinde iken nasıl olacağını belirleyebiliriz. Linkin yapıldığı yerdeki görüntüye zarif bir uyum sağlayabilmesi için bu biçimlendirme önem taşır.
| A:link | Ziyaretten önce |
| A:visited | Ziyaretten sonra |
| A:hover | Mouse üzerinde gezinirken |
| A:active | Ziyaret için tıklandığında |
Örnek
| <HTML> |
| <HEAD> |
| <STYLE TYPE="text/css"> |
| A:link { color : #0000FF; text-decoration:underline; font-family:Verdana} |
| A:visited { color : #FF00FF } |
| A:hover { color : #00CCFF ; font-size:14pt} |
| A:active { color : #FF0000 } |
| </STYLE> |
| <BODY> |
| ...... |
| </BODY> |
| </HTML> |
Bu biçimin nasıl olduğunu görmek için aşağıdaki linki tıklayınız.
Örnek 2
Class Seçicisi İle Stil Yaratma
Web dökümanında farklı yerlerde olan ama bir sınıf içine almayı istediğimiz yerleri CLASS="class-adı" ile belirleriz. Sonra bu sınıfa giren yerlerin hepsini <STYLE> damgası içinde bir seferde biçimlendirebiliriz.
Class seçimi için iki yöntem izlenebilir:
1.Yöntem
H1,H2,...,H5, P, DIV vb bir HTML damgalarından biri ile seçilmiş bir ya da daha çok bölgeyi bir class olarak düşünebiliriz. Aşağıdaki örnekte
<P> ... </p>
arasında kalan metin "soru" adıyla adlandırılan class'a aittir. Dolayısıyla, .soru class'ı için yapılacak biçimlendirme ile etkilenecektir.
<p>
MD-Uzun yıllar matematiğe emek vermişsiniz. İlk zamanlarınızla şimdiki konumunuz arasında neleri aştınız? Neler değişti? Hayal kırıklığına uğradınız mı?
</p>
2.Yöntem
Web dökümanında istenilen yerleri
<SPAN>...</SPAN>
damgası içerisine alıp hepsine bir class adı verebiliriz.
<span>
TK- Matematik, herkese, usavurma dediğimiz doğru düşünme becerisini kazandırır. Az ve öz konuşma alışkanlığı verir. Bir siyasetçi ya da bir toplumbilimci iki saat konuşup hiç bir şey söylemeyebilir. Ama bir matematikçi hiç bir (doğru) şey söylemeden iki dakika bile konuşamaz. Bunun yanında, matematikçi araştırmacıdır. Önüne gelen bir konunun özünü derinlemesine öğrenmeden, o konuda konuşamaz. Bu arada, ayrıca, doğu kültürü ile batı kültürü arasındaki önemli bir ayrıma değinmek gerekir. Doğu kültüründe, otoriteye inanmak esastır. Otoritenin düşünceleri, öğretileri, yargıları, buyrukları kesindir. Üstünde tartışılamaz; ona ancak biad edilir. Ortaçağ kilisesinin egemenliği de böyle kuruldu. Ama, Rönesanstan sonra, avrupada insan yeniden düşünmeye, doğruyu yanlışı sorgulamaya başladı. Doğudakiler inançta, kültürde bunu başaramadılar. Bu gün eğitimli kişilerimiz bile, bir konuyu asıl kaynağından araştırmak yerine, "bir bilenin dediğine inanmak" yöntemini izliyorlar. Kültürümüze sinen bu alışkanlık çok kötüdür; hızla değiştirmek zorundayız. Bunu ancak eğitim sistemimizle başarabiliriz. Öğrenmeyi, düşünmeyi, sorgulamayı öğretmenin, bunu kültürümüzün bir parçası haline getirmenin en iyi aracı matematik öğretimidir. Çünkü, matematik bir şeye inanmanızı istemez, onu sorgular, ispat eder.
</span>
Örnek
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1,H2,H3 { color:red;
font-family:Arial;
}
P { font-family:Arial ;
text-decoration:none;
}
.soru { margin-left:10% ;
color:"#0000FF" ;
text-decoration:italic
}
.cevap {
background-color : Aqua;
font-family : "Times New Roman", Times, serif;
font-size : 75%;
text-align : justify;
margin-left : 10%;
text-indent : -2%;
}
</STYLE>
</HEAD>
<BODY>
......
</BODY>
</HTML>
Bu biçimin nasıl olduğunu görmek için aşağıdaki linki tıklayınız.
Örnek 3
id Seçicisi İle Stil Yaratma
Web dökümanında farklı yerlerde olan ama bir sınıf içine almayı istediğimiz yerleri id="id-adı" ile belirleriz. Sonra bu sınıfa giren yerlerin hepsini <STYLE> damgası içinde bir seferde biçimlendirebiliriz. id sınıflandırması tamamen claass sınıflandırmasına benzer. Yalnızca CSS tanımında (.) yerine (#) simgesi kullanılır.
Class seçimi için iki yöntem izlenebilir:
1.Yöntem
H1,H2,...,H5, P, DIV vb bir HTML damgalarından biri ile seçilmiş bir ya da daha çok bölgeyi bir sınıf olarak düşünüp bir id adı verebiliriz. Aşağıdaki örnekte
<P id="quest"> ... </p>
arasında kalan metin "quest" adıyla adlandırılan id sınıfına aittir. Dolayısıyla, #quest için yapılacak biçimlendirme ile etkilenecektir.
<p id="quest">
MD- Matematiğe ilgiyi artırmak için neler yapılabilir?
</p>
2.Yöntem
Web dökümanında istenilen yerleri
<SPAN id="id-adı">...</SPAN>
damgası içerisine alıp hepsine bir id-adı verebiliriz.
<span id="ans">
TK- Son 30 yılda Türkiye'de çok para kazanmak, köşeyi hızla dönmek insanların birincil hedefi oldu. İnsanlar para kazansınlar; buna bir diyeceğim yok. Çok para kazanmak da insanları mutlu edebilir. Ama çok para kazanmak, mutluluğun tek yolu değildir; hatta bazan hiç değildir. Sanatla uğraşmak, bilimle uğraşmak, bir şey üretmek, insanlığa yararlı bir eser bırakmak gibi işler de en az zengin olmanın insana vereceği kadar huzur verir. Hattâ daha fazlasını verebilir. Örneğin, Gauss'un zamanında yaşayan çok zengin insanlar vardı. Hiç birimiz o zenginlerin adlarını bile bilmiyoruz. Ama Gauss'u hepimiz biliyoruz. Adını heyecanla anıyoruz. Böyle biri olmayı, zengin olmaya kim yeğlemez!
</span>
Örnek
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#quest { margin-left:10% ;
color:"#0000FF" ;
text-decoration:italic
}
#ans {
background-color : Aqua;
font-family : "Times New Roman", Times, serif;
font-size : 75%;
text-align : justify;
margin-left : 10%;
text-indent : -2%;
}
</STYLE>
</HEAD>
<BODY>
......
</BODY>
</HTML>
Bu biçimin nasıl olduğunu görmek için aşağıdaki linki tıklayınız.
Örnek 3
CSS Dosyaları İle Dış Stil Yaratma
CSS 'in en etkin olduğu yer dış stillerdir. Yüzlerce web sayfanız olduğunu düşünün. Bu sayfalarda istediğiniz yerlerde istediğiniz biçimi yaratmak için tek bir komut vermek nasıl bir duygudur. Sakın, kendinizi bir orduyu yöneten bir komutan gibi hissetmeyiniz. Ama, web sayfalarınıza kesinlikle hükmedebileceksiniz.
Bunun için yapmanız gereken tek şey, bir stil CSS dosyası yaratmaktır. CSS dosyalarına istediğiniz adları verebilirsiniz, ama uzantıları daima .css olmalıdır. Bir CSS dosyası içine web dökümanı ile ilgili her türlü biçimlendirme komutunu yazabilirsiniz. Çok syıda olan bu komutların tam listesini ilgili kaynaklardan öğrenebilirsiniz. Bunun için en yeni ve sağlam kaynakları http://www.w3.org sayfasından görebilirsiniz.
Varsayalım ki, bütün e-dersleri benzer biçemlere sokmak için ders.css adıyla bir CSS dosyası hazırladınız. Bu dosyada tanımladığınız biçemlerin etkili olmasını istediğiniz her web dökümanına ders.css dosyasını çağırmanız yetecektir.
Bu çağırma işlemini yapan kod şöyledir:
<link rel="stylesheet" type="text/css" href="ders.css">
Bu kodlar, web dökümanının <HEAD> ... </HEAD> bölümü içine yazılmalıdır. Eğer, CSS dosyası ile web dökümanı aynı dizinde değillerse, CSS dosyası için URL yazılmalıdır.
Biçem yaratan daha çok komut görmek için aşağıdaki dökümana bakabilirsiniz.
a href="./apb/apb.htm"
Örnek olarak, bu derse biçem veren ders.css adlı dosyanın içeriği aşağıda yazılmıştır. Farklı amaçlar için farklı CSS dosyaları hazırlamak uygun olur. Böylece, birbirine benzer web dökümanları aynı CSS dosyasıyla biçimlenebilirler. Daha önemlisi, web sayfalarınızda yapacağınız biçem değişiklikleri için, yalnızca CSS dosyasında ilgili komutları değiştirmek yetecektir.
BODY {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
margin-left: 2%;
margin-right: 2%;
background-color: #F0EBD7;
background-attachment : inherit;
background-image : url(../images/zemin3.jpg);
}
BLOCKQUOTE {
font-family : "Times New Roman", Times, serif;
font-size : xx-small;
}
DT{
font-size: 90%;
color: Maroon;
}
H3,H4,H5 {
color : Teal;
}
H1,H2 {
text-align: center;
color : #ff0000;
}
P {
top: 1%;
TEXT-ALIGN: justify;
}
PRE{
font-size : 100%;
color: Blue;
font : bold;
}
TD{
font-size : 90%;
}
OL {
top: 3%;
COLOR: #000080
}
UL {
marks: none;
top: 3%;
COLOR: #000080;
list-style: none; }
}
LI {
margin-top: 2%;
TEXT-ALIGN: left;
margin : 2%;
}
INPUT {
FONT-SIZE: 10px; FONT-FAMILY: Verdana
}
SELECT {
FONT-SIZE: 10px; FONT-FAMILY: Verdana
}
A:link {COLOR: "#0000FF"; TEXT-DECORATION: none;}
A:visited { COLOR: "#550066"; TEXT-DECORATION: none; }
A:hover { COLOR: "#FF0000"; }
A:active { COLOR: "#D0A0A0"; }
HR {
color: "#D0A0A0";
width: 100%;
padding: 2%;
}HTML Renk Kodları
HTML renk adlarına ek olarak, İnternet Explorer ve Mozilla Firefox gibi bazı web tarayıcıları bazı renk adları daha tanımlamışlardır. Kimi tarayıcılar algılamasa da, modern tarayıcılar listedeki tüm renkleri destekler. HTML tanımlamalarında 16 renk adı vardır:
| Renk | Hexadesimal | Renk | Hexadesimal | Renk | Hexadesimal | Renk | Hexadesimal |
|---|---|---|---|---|---|---|---|
| siyah | #000000 | gümüş | #c0c0c0 | bordo | #800000 | kırmızı | #ff0000 |
| lacivert | #000080 | mavi | #0000ff | menekşe | #8f00ff | galibarda | #ff00ff |
| yeşil | #008000 | çimen | #00ff00 | kahve | #964B00 | sarı | #ffff00 |
| teal | #008080 | cyan | #00ffff | gri | #808080 | beyaz | #ffffff |
|
|
|
[Ne Demişler] Hiç yorum yok