CSS (Cascading Style Sheets) web tasarımcılarının iÅŸini oldukça kolaylaÅŸtırmaktadır. CSS HTML’den ayrı yeni bir dil deÄŸil, HTML’in önemli bir parçasıdır. CSS ile web sayfasındaki araçların görünümleri genelleÅŸtirilir.
Â
HTML derslerinde style=”…” parametresini görmüştük. Bu parametre ile tanımlanan kodun özelliklerini deÄŸiÅŸtirmiÅŸtik. CSS style özelliklerinin tüm sayfa için tanımlanmasıdır. Hem Navigator 4.0 hem de Internet Explorer 4.0 browserlar ve daha geliÅŸmiÅŸ olanları CSS’yi destekliyor. Fazla uzatmadan konuya girmek daha iyi olur sanırım.
HTML derslerinde geçen ama üzerinde pek durmadığımız style parametresi üzerinde açıklama yapmam gerekiyor. style parametresi <p>, <div>, <h1>, <a>, <font>, <li> gibi birçok kod için kullanılabilir:
<p style=”text-align:left; font-size:12pt; color:red”>…</p>
Yukarıda HTML derslerinden tanıdığımız, paragraf oluÅŸturan <p> koduna style parametresi atanmıştır. Böylece paragrafın sola yaslanmasını, 12pt (point:nokta) font büyüklüğündeki harflerden oluÅŸmasını, harflerin renginin kırmızı olmasını saÄŸlıyoruz. style parametresinde birden fazla özellik tanımlanacaksa, örnekte olduÄŸu gibi her özellikler arasına “;” iÅŸareti konur.
Nesne Özelliklerini Genelleştirme
Sayfa tasarımında CSS’den yararlanacaksak style=”…” parametresini kullanmamız ÅŸart deÄŸil,sayfa özelliklerini <style>…</style> kodları arasında da tanımlayabiliriz.<style>…</style> kodları <head>…<head> bölümünde; bir fonksiyonmuÅŸcasına yer alır. (Fonksiyonları JavaScript ve VBScript derslerinde ayrıntılı olarak göreceÄŸiz.
CSS kullanımını anlatabilmek için aÅŸağıdaki iki örneÄŸi inceleyelim. Ä°lk örnekte style=”…” parametresi kullanılıyor. Ä°kincisinde ise <style>…</style> kodları kullanılmaktadır.
<html>
<head>
  <title>Style parametresi ile…</title>Â
</head>
<body>
  <h1 style=”font-size:18pt; color:blue; text-align:left”>AÄžIR ROMAN</h1>
  <p style=”font-size:12pt; color:crimson; text-align:justify”>GüneÅŸ buluttan sıyrılırken Kolera’nın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya baÅŸladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p>
  <h4 style=”font-size:8pt; color:black; text-align:right”>Metin Kaçan</h1>
</body>
</html>
Â
Bu uygulamanın aynısını <style> koduyla aşağıdaki şekilde yapabiliriz:
<html>
<head>
<title>Style kodu ile…</title>Â
<style>
<!–
p
{
font-size:12pt;
color:crimson;
text-align:justify
}
h1
{
font-size:18pt;
color:blue;
text-align:left
}
h4
{
font-size:8pt;
color:black;
text-align:right
}
–>
</style>
</head>
<body>
<h1>AÄžIR ROMAN</h1>
<p>GüneÅŸ buluttan sıyrılırken Kolera’nın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya baÅŸladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p>
<h4>Metin Kaçan</h1>
</body>
</html>
Â
Åžimdi geldik “N’aptık?” köşesine. Ä°lk uygulamada <p>, <h1> ve <h4> kodlarını style=”…” parametresi ile bu kodlara bazı özellikler atandı. ÖrneÄŸin <p>…</p> arasındaki metinin sayfanın iki yanına yaslanması, renginin bordo olması ve font büyüklüğünün 12pt olması saÄŸlandı. Ä°kinci uygulamada ise her koda style=”…” parametresi atamak yerine, tüm stil özellikleri kodların başında ;<head>…</head> bölümünde, <style>…</style> kodları arasında kod kod tanımlanmıştır. Bu iki uygulama ile aynı sonuca ulaşıyoruz. Ä°lk uygulamanın daha kısa sürdüğü görünüyor, ancak bunun nedeni stil özellikleri tanımlanan kodların birer tane olması. Mesela sayfada <p> kodu çok sayıda yeralsaydı, CSS ile kod sayfası çok daha kısa olacaktı. Bununla birlikte, stil özelliklerini deÄŸiÅŸtirmek istediÄŸimizde hiç zorlanmayacağız. Ayrıca hata yapma olasılığımız CSS genelleÅŸtirmesi ile azalacaktır.
CSS’nin yapısı; uygulamamızdan da görüleceÄŸi üzere, şöyledir: KOD {ÖZELLÄ°K: deÄŸer}. EÄŸer koda birden fazla özellik atayacaksak, tıpkı style=”…” parametresinde olduÄŸu gibi stil özellikleri arasına “;” iÅŸareti konur: KOD {ÖZELLÄ°K1: deÄŸer1; ÖZELLÄ°K2: deÄŸer2; ÖZELLÄ°K3: deÄŸer3} gibi. Stil özelliklerini yanyana yazabileceÄŸiniz gibi, uygulamada olduÄŸu gibi altalta da yazabilirsiniz:
- KOD
- {
- ÖZELLİK1:değer1;
- ÖZELLİK2:değer2;
- ÖZELLİK3:değer3
- }
Ayrıca aynı stil özelliklerini taşıyacak olan kodları gruplayabilirsiniz:
Â
- KOD1, KOD2, KOD3, KOD4, KOD5
- {
- ÖZELLİK1:değer1;
- ÖZELLİK2:değer2;
- ÖZELLİK3:değer3
- }
CSS’yi Dış Dosya ile Tanımlama
CSS araçlarını HTML kodlarına atamanın bir baÅŸka yolu daha vardır: CSS özelliklerini .css uzantılı bir dosyaya yazmak ve web sayfasından bu dosyayla baÄŸlantı kurmak. Herhangi bir metin editöründe oluÅŸturduÄŸumuz; <style>…</style> kodları arasına yazdığımız CSS özelliklerini içeren, bir dosyayı .css kök ismi ile kaydedin. Web sayfamızın <head>…</head> kısmına aÅŸağıdaki kodlarla .css uzantılı dosyanızla baÄŸlantı kurun; mesela dosyanın ismi diaz.css olsun:
- <link rel=”stylesheet”
- type=”text/css”
- href=”diaz.css”>
Daha önce style parametresi ve style kodları ile yaptığımız AĞIR ROMAN isimli sayfayı, bu sefer yeni öğrendiğimiz dış dosya yöntemiyle yapalım. (Yine aynı sayfayı yapacağız.) Tabi önce .css isimli dosyayı oluşturacağız. Aşağıdaki sayfayı tarz.css ismiyle kaydettim:
p
{
font-size:12pt;
color:crimson;
text-align:justify
}
h1
{
font-size:18pt;
color:blue;
text-align:left
}
h4
{
font-size:8pt;
color:black;
text-align:right
}
Bu sayfayı “tarz.css” ismiyle kaydettikten sonra, web sayfasını şöyle oluÅŸtururum:
<html>
<head>
  <title>Dış dosya yolu ile…</title>Â
  <link rel=”stylesheet” type=”text/css” href=”tarz.css”>
</head>
<body>
  <h1>AĞIR ROMAN</h1>
  <p>GüneÅŸ buluttan sıyrılırken Kolera’nın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya baÅŸladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p>
  <h4>Metin Kaçan</h4>
</body>
</html>
Â
Özellikle aynı formatta çok fazla sayfa içeren siteler için dış dosya yöntemini kullanmanızı tavsiye ederim. Böylece her sayfa için aynı kodları yazıp durmanız gerekmez. Ayrıca sayfaların formatını deÄŸiÅŸtirmek istediÄŸinizde “.css” uzantılı dosyanızı deÄŸiÅŸtirmeniz yeterli olacaktır.
Yorumlar
Yorum Yok
Yorumunuzu Ekleyin
Yorum eklemek için giris yapmalısınız.