Basic HTML | Advanced HTML

  Bir stil dokunuşu katmak

Dave Raggett, 8 Nisan 2002.

Bu yazı web sayfalarına stil katmak için kısa bir rehber olup tek başına HTML kullanmaya alternatif olarak W3C'nin (World Wide Consortium) Cascading Style Sheets dilini nasıl kullanacağınızı göstermektedir. Bu yolla farklı tarayıcı versiyonlarının neden olduğu sorunların çoğundan da kurtulacaksınız.

Stil sayfalarının çalışması için yazdığınız kodun hatalardan arınmış olması önemlidir. Yazım hatalarını otomatik olarak saptamanın uygun bir yolu HTML Tidy derleme aracıdır. Bu işlem aynı zamanda yazımı daha okunaklı ve kolay düzenlenebilir hale getirir. Herhangi bir kodu düzenlerken düzenli olarak Derleme aracını çalıştırmanızı tavsiye ediyorum. Derleme, dağınıklığa meyilli olan yazım araçları tarafından yazılan kodu temizlemenin çok etkili bir yoludur.

Bu bölümde şunları öğreneceksiniz:

• Stil elemanını kullanma
• Ayrı stil sayfalarına link oluşturma
• sayfa marjinlerini oluşturma
• sol sağ ve ilk satır girintilerini oluşturma
• üst ve alt boşlukların miktarını ayarlama
• yazı tipini, tarzını ve boyutunu belirleme
• kenarlık ve arkaplân ekleme
• ad ve nümerik değerlerle renk atama
• CSS'yi tanımayan tarayıcılara göre stil ekleme

Başlarken

metin ve arkaplân rengini belirleyerek başlayalım. Döküman etiketleri için stil özellikleri atarken STYLE elemanını kullanabilirsiniz:

<style type="text/css">
  body { color: black; background: white; } 
</style>

<style> ve </style> etiketlerinin arasındakiler stil kurallarına özgü söz dizimiyle yazılırlar. Her kural stil özelliklerini içeren { ve } parantezlerinin takip ettiği bir etiket adıyla başlar. Bu örnekte kural body etiketini tanımlamaktadır. Farkedebileceğiniz gibi body etiketi bütün bir web sayfanızın görünüşü etkilemektedir.

Her bir stil (property) nitelik adıyla başlar. Daha sonra iki nokta üst üste ve son olarak özelliğe atanan değer gelir. Listede birden fazla stil varsa birbirinden ayırmak için araya noktalı virgül koymalısınız. Örneğimizde iki özellik bulunmaktadır - "color" metin rengini "background" ise sayfa arkaplan rengini belirlemektedir. Son özellik bile olsa her özellikten sonra noktalı virgül kullanmanızı öneriyorum.

Renkler için isim yada nümerik değerler kullanılabilir örneğin rgb(255, 204, 204) "fleshy pink" yazılması (et pembesi) ile aynı renk değerini verir. Buradaki üç sayı sırasıyla kırmızı, yeşil ve mavi (Red, Green, Blue) değerlerinin karşılığı olup 0 ile 255 aralığında değişmektedir. Ayrıca hekzadesimal değer kullanarak da aynı rengi #FFCCCC olarak yazabilirsiniz. Sonraki kısımda renk hakkında daha fazla detay verilmektedir.

Dikkât edin! Style elemanı dökümanın "e;head"e; kısmına title elemanın yanına yerleştirilmelidir, body kısmına değil.

Ayrı bir stil sayfasına link oluşturulması

Aynı stilleri ayrı birkaç sayfa için kullanabileceğinizi düşünüyorsanız ayrı bir stil sayfası oluşturup daha sonra bunu her bir sayfaya bağlamayı düşünebilirsiniz. Bu şu şekilde yapılabilir:

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

LINK etiketi dökümanın head (baş) kısmı içine yerleştirilmelidir. Tarayıcının href özelliğinin sizin stil sayfanızın web adresini (URL) verdiğini farketmesini sağlamak için rel özelliğine "stylesheet" değeri atanmalıdır.

Sayfa kenarlıklarını oluşturma

Geniş kenarlıklarla web sahfaları çok daha hoş görünür. "margin-left" ve "margin-right" özellikleriyle sol ve sağ kenarlıkları ayarlayabilirsiniz. Meselâ,

<style type="text/css">
  body { margin-left: 10%; margin-right: 10%; }
</style>

Bununla iki kenarlık da pencere genişliğinin % 10'u olacak ve tarayıcı penceresinin boyutu değiştiğinde ölçekleri ona uygun hale gelecektir.

Sol ve sağ girintileri belirleme

Başlıkları biraz daha belirgin hale getirmek için onları gövdeye ayırdığınız kenarlığın içinden başlatabilirsiniz. Örneğin,

<style type="text/css">
  body { margin-left: 10%; margin-right: 10%; }
  h1 { margin-left: -8%;}
  h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>

Bu örnekte üç stil kuralı bulunuyor. Biri body, biri h1 (en önemli başlıklar için kullanılır), biri de geriye kalan başlıklar (h2, h3, h4, h5 ve h6) için. Başlıklara ait kenarlıklar gövde kenarlıklarına eklenmektedir. Başlıkların başlangıç kısmını gövde kenarlığına doğru kaydırmak için negatif değerler kullanılır.

Sonraki kısımlarda stil kurallarının olduğu örnekleri dökümanın (varsa) HEAD kısmındaki STYLE elemanının içine yada bağlı bir stil sayfasının içine koymak gerekmektedir.

Üst ve alt boşlukları kontrol etme

İki durumda üst ve alt boşlukları kontrol etmek isteyeceksiniz: Birincisi belli bir başlık yada paragraftan sonra daha çok boşluk olmasını istediğinizde, ikincisiyse genel boşluklar üzerinde daha hassas kontrol sahibi olmak istediğinizde.

"margin-top" özelliği üstteki, "margin-bottom" ise alttaki boşluğu belirler. tüm h2 başlıkları için bu değerleri belirlemek istediğinizde

h2 { margin-top: 8em; margin-bottom: 3em; }

"em" fontun boyuna göre ölçeği değiştiği için çok yararlı bir birimdir. Bir "em" fontun yüksekliğidir. "em" değerini kullanarak font boyundan bağımsız olarak web sayfasının genel görünümünü muhafaza edebilirsiniz. Bu da metni okumak için daha büyük fontlara ihtiyaç duyan kullanıcılar için sorunlara neden olan pixel yada punto gibi alternatiflere göre çok dah güvenli bir boyutlandırma yoludur.

Kelime işlem programlarında punto ölçüsü yaygın olarak kullanılır. Örneğin 10pt'lik metin. Maalesef aynı punto boyu farklı tarayıcılarda farklı işlem görür. Bir tarayıcıda güzel işleyen bir başkasında okunaksız olabilir! "em" ölçüsüne sıkı sıkıya bağlı kalmak bu sorunları önleyebilir.

Belli bir başlığın üzerindeki boşluğu belirlemek için başlığa ait, isim verilmiş bir stil kullanmalısınız. Bu class özelliğini kullanarak yapılır. Söz gelimi,

<h2 class="subsection">Getting started</h2>

Bu durumda stil kuralı şöyle yazılır:

h2.subsection { margin-top: 8em; margin-bottom: 3em; }

Kural etiket adı, nokta ve class özelliğine ait isimden oluşur. Noktadan önce ve sonra boşluk bırakmaktan kaçının! Yoksa kural işlemez. Belli bir eleman için stil oluşturmanın başka yolları da vardır fakât class özelliği en esnek olanıdır.

Başlığın peşinden paragraf geldiğinde başlığın margin-bottom (alt kenarlık) değeri paragrafın margin-top (üst kenarlık) değerine eklenmez. Bunun yerine başlık ve paragraf arasındaki boşluk için iki değerden en büyük olanı kullanılır. Bu durum hangi etiketin kullanıldığına bakmaksızın bitişik tüm kenarlıklar için geçerlidir.

"First-line" (İlk satır) girintisi

Bazen her paragrafın ilk satırının girintili olmasını isteyebilirsiniz. Aşağıdaki stil kuralı romanlardaki geleneksel paragraf tarzını oluşturur:

p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }

Bu stilde her paragrafın ilk satırı 2 em içeri girmektedir.

Fontu kontrol etme

Bu kısımda fontun ve boyutunun nasıl belirleneceği ve nasıl italik, koyu ve başka stillerin ekleneceği açıklanmaktadır.

Font stilleri

Metne uygulanan en yaygın stiller italik yada "bold"dur (koyu). Çoğu tarayıcı em etiketini italik strong etiketiniyse koyu yapmaktadır. Bunun yerine diyelim em etiketinin koyu italik, "strong"un ise koyu büyükharf olmasını istiyorsunuz:

em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase;  font-weight: bold; }

Dilerseniz kalan başlıkları şu şekilde küçültebilirsiniz:

h2 { text-transform: lowercase; }

Font boyunu belirleme

Çoğu tarayıcı önemli başlıklar için daha büyük font boyukullanır. Varsayılan boydan başkasını kullanırsanız özellikle de punto (pt) birimi kullandığınızda metni okunaklılık sınırının ötesinde küçültme tehlikesiye karşılaşabilirsiniz. Bu yüzden font boylarını göreceli birimlerle belirlemeniz tavsiye edilir.

Bu örnekte normal metinde kullanılan boya göre yüzde olarak başlık boyutları belirlenmektedir:

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }

Font ailesini belirleme

Sizin favori fontunuz tüm bilgisayarlarda olmayabilir. Bu yüzden bütün tarayıcılar o fontu tanımayabilir. Bunun üstesinden gelmek için birden fazla fontu bir tercih sırasıyla listeleme imkânınız vardır. her yerde bulunması kesin olan az sayıda jenerik font isminden oluşan bir liste vardır. Bu yüzden listenizi bunlardan biriyle bitimeniz tavsiye edilir: serif, sans-serif, cursive, fantasy, yada monospace, örneğin:

body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }

Bu örnekte Times New Roman tipinde görünemeyen önemli başlıklar Garamond olarak görünecektir ve bu font da bulunmuyorsa tarayıcının varsayılan serif fontu kullanılır. Paragraf metni Verdana, yoksa tarayıcının varsayılan sans-serif fontunda görünür.

Farklı fontların okunaklılığı genellikle font boyunun kendisinden çok küçük harflerin yüksekliğine bağlıdır. Verdana gibi fontlar "Times New Roman" gibilerden çok daha okunaklıdır. O yüzden paragraf metninde kullanılmaları önerilir.

Drop Caps

Bu harflere tek başına stil uygulamak için uygun bir özelliktir.

Nasıl drop caps etkisinin kullanılacağını
görüyorsunuz ...

Bu etkiyi yaratmak için kullanılan stil kuralı:

  .dropcap {
     float: left;
     font: bold 1.4em "Times New Roman", serif;
     color: rgb(51, 0, 102);
     background: rgb(255, 255, 153;)
  }

Font ve kenarlık sorunlarını önleme

Yazıyı korumak için ilk kuralım BODY'ye bağlı kalmaktan kurtarmaktır. Bu da p gibi bir blok elemanının içine alınarak yapılabilir. Örneğin :

<h2>Wiltshire'de Bahar</h2>

Ağaçların üzerindeki çiçekler, kuş şarkısı ve 
tarlalarda meleyen kuzuların sesleri.

Başlığın peşinden gelen metin bazıtarayıcılarda yanlış font ve kenarlık uygulanması riskini taşır. Bu yüzden böyle metinleri bir paragraf içine almanız önerilir. Yani,

<h2>Wiltshire'de Bahar</h2>

<p>Ağaçların üzerindeki çiçekler, kuş şarkısı ve 
tarlalarda meleyen kuzuların sesleri.</p>

İkinci kuralım My second pre elemanları için font ailesi belirlemek çünkü bazı tarayıcılar siz pre için font boyu yada başka özellikler atadığınızda sabit bir font ölçüsü kullanacaklarını unutur.

pre { font-family: monospace; }

Üçüncü kuralım div gibi elemanlarda çerçeve (border) yada arkaplân değeri atamak istediğimde başlıklar, p ve ul elemanları için font ailesi belirlemek. Bu da tarayıcının miras alınan (inherited) font ailesini unutup bunun yerine tarayıcı tercihlerinde varsayılan fontu kullanmasına karşı bir önlem.

h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }

Çerçeve ve arkaplân ekleme

div.box { border: solid; border-width: thin; width: 100% }

<div class="box">
bu DIV elemanının içeriği ince bir çizgiyle çevrelenecektir.
</div>

Sınırlı sayıda çerçeve tipi seçilebilir: dotted, dashed, solid, double, groove, ridge, inset and outset. border-width özelliği genişliği belirler. 0.1em gibi sayısal değer alabileceği gibi thin, medium ve thick gibi (ince, orta ve kalın) değerlerini de alabilir. Border-color özelliği rengi belirlemenizi sağlar.

    div.color {
    background: rgb(204,204,255);
    padding: 0.5em;
    border: none;}

Diyelim sadece bazı taraflarda çerçeve olmasını istiyorsunuz. Border-left, border-top, border-right ve border-bottom özellik ailesini uygun stil, genişlik yada renk ile kurllanarak herbir taraftaki çerçevenin özelliğini ayrı ayrı kontrol edebilirsiniz. Örneğin,

    p.changed {
    padding-left: 0.2em;
    border-left: solid;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-left-width: thin;
    border-color: red;
  }

koduyla sadece "changed" sınıfı atadığımız paragrafların sol tarafına kırmızı bir çerçeve getirmiş oluruz.

Renk atama

Sonraki kısımda renk belirlemeyle ilgili bazı örnekler verilecek. Bir hatırlatma:

  body {
    color: black;
    background: white;
  }
  strong { color: red }

Bu kodla beyaz bir arkaplân üzerine siyah metin rengiyle varsayılanı atamış oluyoruz. Fakât strong elemanının rengi kırmızı olmaktadır. Aşağıda göreceğiniz üzere 16 standart renk adı vardır. Ayrıca kırmızı, yeşil ve mavi için her biri 0 ilâ 255 arasında olan desimal değerler de atayabilirsiniz. Yani rgb(255, 0, 0) değeri "red" (kırmızı) değeriyle aynıdır. Ayrıca '#' karakteriyle başlamak üzere hekzadesimal değerleri de kullanabilirsiniz.Aşağıya RGB ile hex. renk değerleri arasında çeviri yapan iki taraflı bir dönüştürücü eklendi.

Link renklerini belirleme

CSS'yi kullanarak link rengini değiştirebilirsiniz. Buna aktif link, ziyaret edilmiş link yada fare imleci üzerine gelen linklerin rengini ayrı ayrı belirleme de dahildir.

  :link    { color: rgb(0, 0, 153)   } /* ziyaret edilmemiş linkler */
  :visited { color: rgb(153, 0, 153) } /* ziyaret edilmiş linkler */
  :active  { color: rgb(255, 0, 102) } /* link tıklandığında */
  :hover   { color: rgb(0, 96, 255)  } /* fare imleci üzerine geldiğinde */

Linklerin altı çizgili olmamasını isteyebilirsiniz. Bunu text-decoration özelliğine 'none' değerini atayarak yapabilirsiniz. örneğin:

  a.plain { text-decoration: none }

atandığı linkin altının çizilmesini önler:

This is <a class="plain" href="what.html">altı çizgisiz</a>

Çoğu insan bir web sayfasında altı çizili yazı gördüğünde bunun link olduğunu düşünecektir. Bunun için de linklerden alt çizgiyi kaldırmamanızı öneririm. Aynı şey link renkleri için de geçerlidir. Çoğunluk altı çizili mavi yazıyı link olarak algılar. Arka plân rengi okunmasını zorlaştırmıyorsa link renklerini olduğu gibi bırakmanız tavsiye edilir.

Renk Körlüğü

Renkle çalışırken insanların % 5- 10'unun belli ölçüde renk körü olduğunu unutmayın. Bu durum kırmızıyla yeşil yada sarıyla mavi arasında ayrım yapılmasını güçleştirmektedir. Nadiren hiçbir rengi algılamayanlar da çıkabilir. Renk körü olanların okuyabilmesini kolaylaştırmak için arkaplan rengiyle metin rengini buna uygun seçmeniz tavsiye edilir.

İsimli renkler

Standart renk ismi gurubu şöyle: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, ve yellow. Bu 16 renk HTML 3.2 ile 4.01'de tanımlanmış olup PC'lerdeki temel VGA ile uyumludur. Çoğu tarayıcı daha fazla sayıda renk adını kabul etse de bunların kullanılması tavsiye edilmez.

Böylelikle "#800080" renk değeri "purple" (mor) ile aynıdır.

Hekzadesimal renk değerleri

"#FF9999" gibi değerler kırmızı, yeşil ve mavinin (red-green-blue RGB) hekzadesimal karşılığını oluşturur. # karakterini takip eden iki karakter kırmızı sayısı, sonraki ikisi yeşil sayısı ve son ikisi de maviye ait sayı değeridir. Bu sayılar daima 0 ile 255 desimal aralıktadır. Desimal değerleri biliyorsanız Microsoft Windows'daki gibi bir hesap makinası kullanarak hekzadesimal değere çevirebilirsiniz.

Güvenli renk paleti

Yeni bilgisayarlar binlerce hattâ milyonlarca rengi desteklese de daha eski renk sistemleri sadece 256 rengi desteklemektedir. Bununla başa çıkmak için bu tarayıcılar sabit bir palet kullanırlar. Sonuç genelde yakın renklerle açığı kapatmaya çalışan tarayıcıda benekli bir görüntü oluşması olur. Bu sorun eski bilgisayarlar yenileriyle değiştikçe yavaş yavaş aşılmaktadır.

Çoğu tarayıcı "browser safe" dene bu güvenli paleti destekler. Bu palette altı eşit dağılmış kırmızı, yeşil ve mavi ton ile bunların kombinasyonları kullanılır. Resim renklerini bu paletten seçerseniz beneklenme etkisinin önüne geçebilirsiniz. Bu özellikle resimlerin arkaplânları için yararlıdır.

Tarayıcı güvenli paleti kullanıyorsa sayfa arkaplân rengi paletteki en yakın rengi kullanır. Arkaplân rengini güvenli palet dışında bir renk olarak tayin ederseniz bilgisayarın indeksli yada true-color rengi kullanmasına göre arkaplân renginin farklı olması riskiyle karşılaşırsınız.

Bunlar kırmızı, yeşil ve mavinin sınırlı değer aldığı renklerden oluşmaktadır:

Burada güvenli palet renklerinden ve hekzadesimal değerlerinden oluşan bir tablo verilmektedir. Bob Stein'e bu düzenlemesi için teşekkür ediyorum.

Renk paletleri http://www.visibone.com/ daki çoğu ücretsiz popüler grafik programında güvenli paletten türetilmiş palet seçenekleri bulunmaktadır.

CSS'yi desteklemeyen tarayıcılar ne olacak?

Netscape 4.0 ve Internet Explorer 4.0'den önceki tarayıcılar ya CSS'yi hiç desteklememekte yada sık sık karışıklığa neden olmaktadırlar. Yine de bu tarayıcılarla HTML'nin kendisi kullanılarak stil kontrol edilebilir.

Renk ve arkaplân atama

BODY etiketini kullanarak renk atayabilirsiniz. Bu örnek arkaplân rengini beyaz, metin rengini siyah yapmaktadır:

<body bgcolor="white" text="black">

BODY elemanı web sayfasının görünür içeriğinden önce kullanılmalıdır. Yani ilk başlıktan önce. Ayrıca linklerde kontrolünüz altında. Bunun için üç özellik bulunuyor:

• link ziyaret edilmemiş linkler için
• vlink ziyaret edilmiş linkler için
• alink linke tıkladığınızdaki renk için

İşte üçünün de belirlendiği bir örnek:

<body bgcolor="white" text="black"
  link="navy" vlink="maroon" alink="red">

Ayrıca resmin adresini gösteren background özelliğini kullanarak tarayıcının sayfa arkaplânını resimle döşeyebilirsiniz. Sözgelimi,

<body bgcolor="white" background="texture.jpeg" text="black"
  link="navy" vlink="maroon" alink="red">

Tarayıcının resme ulaşamamsı ihtimaline karşı bgcolor özelliğini kullanarak bir arkaplân rengi belirlemek iyi bir fikirdir. Seçtiğiniz rengin okunabilirlik sorunu yaratmadığından emin olun. Uç bir örnek:

<body bgcolor="black">

Çoğu tarayıcı varsayılan olarak siyah metin rengi kullanır. Sonuçta sayfa görünümü siyah arkaplân üzerinde siyah yazı şeklinde olacaktır! Pek çok insan o yada bu şekilde renk körlüğünden muzdarip olmaktadır, meselâ zeytin yeşili bazılarına kahverengi görünebilir.

Bir web sayfasını yazdırmaya çalıştığınızda başka bir sorun ortaya çıkar. Pek çok tarayıcı arkaplân rengini görmezden gelip metin rengini dikkâte alacaktır. Metin renegini beyaz olarak belirlemek boş sayfa yazdırmanıza neden olabilir. O yüzden bu örnekteki söz dizimi tavsiye edilmez:

<body bgcolor="black" text="white">

Bgcolor özelliğini tablo hücrelerinde de kullanabilirsiniz, mesela,

<table border="0" cellpadding="5">
 <tr>
  <td bgcolor="yellow">renkli tablo hücresi</td>
 </tr>
</table>

Tablolar çok çeşitli sayfa düzeni etkileri yaratmak için kullanılabildiği için çok geniş bir biçimde kullanılmıştır. Gelecekte bu rolü daha az çabayla daha hassas düzenleme olanağı bulunan stil sayfalarının üstlenmesi muhtemeldir.

Font tipi, boyu ve rengini belirleme

Font etiketi font tipini, boyunu ve rengini seçmek için kullanılabilir. Bu örnekte sadece renk belirlenmektedir:

This sentence has a <font color="yellow">word</font> in yellow.

Face özelliği font tipini belirlemek için kullanılır. Bu özellikte tercih sırasına göre bir font listesi değeri atanır. Söz gelimi,

<font face="Garamond, Times New Roman">Bilgi güçtür, ARISTO...</font>

Size özelliği font boyunu 1 ile 6 arasında bir sayıda belirlemek için kullanılır. Sayıdan önce "-" yada "+" işareti kullanılırsa göreceli değer olarak yorumlanır. Bir derece büyük font kullanmak istiyorsanız "+1", bir derece küçük font boyu kullanmak istiyorsanız "-1" değerini verin. Yani,

<font size="+1" color="maroon"
  face="Garamond, Times New Roman">some text ...</font>

Kaçınmanız gereken birkaç şey var: renk körü olan insanlar için okumayı zorlaştıracak renk kombinasyonları kullanmayın (arkaplân ve metin renkleri arasındaki kontrast yüksek olsun ç.n.) Font özelliğini normal metni başlığa çevirmek için kullanmayın; h1 ile h6 arasındaki başlık etiketlerini başlığın önemine göre kullanın.

Daha fazla bilgi edinme

CSS ve onu destekleyen araçlar hakkında daha fazla bilgi içinW3C home page for CSS linkine bakın. Bu link sizi HTML ve CSS hakkındaki kitaplara yönlendirecektir. Örneğin, "Raggett on HTML 4", published 1998 by Addison Wesley. Ayrıca bkz. "Beginning XHTML", published 2000 by Wrox Press. CSS hakkında daha detaylı bir açıklama için, "Cascading Style Sheets" by Håkon Wium Lie and Bert Bos, pub. 1999 by Addison Wesley. CSS'nin kendi mimarlarından CSS'ye derin bir bakış atıyor.

Bu rehberi CSS konumlandırmasını açıklayan, yazdırma ve işitsel stil sayfalarını içerecek biçimde genişletmeyi planlıyorum.

Bol şans ve hep yaz!

Copyright © 1994-2003 W3C^® (MIT, ERCIM, Keio), Her hakkı saklıdır. W3C liability, trademark, document use and software licensing rules apply. Bu sayfayla ilgili yapacağınız işlemler açık ve özel mahremiyet açıklamalarına tabidir.