BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 

Stil Şablonu (CSS) Temelleri

CSS, açılımı “Cascading Style Sheet” olan ve dilimize Stil Şablonları olarak yerleşen
basit ve kullanışlı bir işaretleme dilidir. Stil şablonu HTML ögelerine (yazı, paragraf, kenar
çizgisi, resim, bağlantı...) stil vermek amacıyla kullanılır. Diğer bir deyişle sayfamızın
içeriğinin biçimlendirilme işleminin yapıldığı kısımdır.

HTML/XHTML etiket dillerinin sayfa tasarımında yetersiz kalması nedeniyle “World
Wide Web Consortium” (W3C, Dünya Çapında Ağ Birliği) tarafından oluşturulmuştur;
içerik kısmı (HTML) ile biçimlendirme kısmını birbirinden ayırarak yüzlerce sayfayı tek bir
dosya ile biçimlendirme olanağı tanımaktadır. Bu, web sayfalarımıza esneklik bize ise hız
kazandırır. Tablosuz tasarımın daha da önem kazandığı günümüzde CSS kullanımı olmazsa
olmazlardandır.

1.1. CSS’nin Yapısı 

CSS’nin söz dizimi aşağıda görüldüğü gibi “Seçici” ve “Bildirim” olarak iki ana bölümden oluşur. Bildirim ise kendi içinde özellik ve değer olarak iki kısma ayrılmaktadır. 
Seçici olarak tüm HTML etiketlerini kullanabileceğimiz gibi ileride göreceğimiz ID (kimlik) ve Class (sınıf) seçicilerini de kullanabiliriz. 
 Bildirim bloğu süslü parantez ile açılır ve kapanır. Bildirimler arasında “;” (noktalı virgül) kullanılır. Her Bildirim, "Özellik" ve "Değer" içerir. Özellik ve değer arası “:” (iki nokta üst üste) ile ayrılır. 
 Özellik, değiştirilmek istenen stil özniteliğidir. Örnek; color, font-size vb. 
 Değer ise stil özniteliklerine verilen değerlerdir. Örnek; blue, 14px vb. 
Seçiciler Class (Sınıf), ID ve Tag (etiket) seçiciler olmak üzere üçe ayrılır. 

1.1.1. Sınıf (Class) Seçicisi 
Sınıf seçicileri birden fazla ögeye uygulanabilir ve birden fazla kullanılabilir. Örneğin 
önemli adında bir sınıf seçicisi oluşturalım, özellik olarak da yazının renginin kırmızı ve 
kalın olmasını sağlayalım; 

Sınıf seçici olarak belirlediğimiz ismin önüne “.” (nokta) koymamız gerekmektedir. 
Bu ismi herhangi bir ögenin class özniteliğine atayarak stili uygulamış oluruz. Örneğimiz için .onemli sınıf (class) seçicisi yukarıdaki gibi olacaktır.Bu stilimizi sayfamızda H1 ve p etiketlerine uygulayalım. 

Kod:
<html>
<head>
<title>CSS Öğreniyorum</title>
<style type="text/css">
.onemli {
    color: #F00;
  font-weight:bold;
  }
</style>
</head>
<body>
<p class="onemli">Bilgi Cafem 61</p>
<h1 class="onemli">Bilgi Cafem 61</h1>
</body>
</html>  

Tasarım Görünümü:


CSS Öğreniyorum



Bilgi Cafem 61

Bilgi Cafem 61



1.1.2. ID Seçicisi 

Sınıf (class) seçicilerini birden fazla ögeye atayarak kullanabiliyorduk; ID seçiciler ise yalnız bir ögeye atanır ve bir kez kullanılırlar. Örneğin “haber_baslik” adında bir stil oluşturalım, özellik olarak da yazı renginin mavi ve ortalı olmasını sağlayalım;
#haber_baslik {
text-align:center;
color:blue;
}

ID seçicisi olarak belirlediğimiz ismin önüne “#” koymamız gerekmektedir. ID’ye verdiğimiz isim, sayfa içinde aynı isme sahip ögeye (etiket) uygulanmış olacaktır. Örneğimiz için #haber_baslik ID seçicisi yukarıdaki gibi olacaktır. Bu stilimizi p etiketine uygulayalım.

Kod:


<html>
<head>
<style type="text/css">
#blogger_baslik
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<p id="blogger_baslik"Bilgi Cafem 61</p>
<p>Bilişim Bilgi Teknolojileri Blog Sitesi.</p>
</body>
</head>

1.1.3. Etiket (Tag ) Seçicisi 

Etiket seçicileri aynı türden tüm ögelere (etiketlere), istediğimiz stili uygulamak için kullanılır. Bir başka deyişle etiketleri kendi isteğimize göre uyarlarız. Örneğin sayfamızdaki tüm karakterlerin boyutunun 20px olmasını istiyorsak;
olarak yazmamız yeterlidir. Bir başka örnek olarak sayfamızdaki paragraflarda yazı büyüklüğünün 16px, yazı tipinin Arial ve kalın olmasını sağlamamak için, stilimiz aşağıdaki şekilde oluşturulur. 
p
{
      font-family: Arial;
    font-size:16px;
    font-weight: bold;
}  

1.2. CSS Kullanım Alanları 

Oluşturduğumuz stil şablonlarını sayfamıza nasıl uygulayacağımızı, nereye yerleştirmemiz gerektiğini belirleyen 3 yöntem vardır:

 Yerel kullanım alanı
 Global kullanım alanı
 Bağlantılı kullanım alanı

1.2.1. Yerel Kullanım Alanı 

Etiket içinde stil kullanımı (In-line Style) olarak da adlandırılır. Bu kullanım şeklinde CSS direkt etiketin“style” özniteliği kullanılarak uygulanır.

Örnek: p etiketine, etiket içinde uygulanmak üzere yazı rengini kırmızı ve ortaya hizalı yapalım;
şeklinde olacaktır. Şimdi bunun tüm kod içinde nasıl göründüğüne bakalım;
<html>
   <head>
      <title>Bilgi Cafem 61</title>
   </head>
   <body>
      <p style="color:red; text-align:center;>Merhaba</p>
   </body>
</html>   
  
Yerel, bir başka deyişle etiket içi CSS kullanımı, tek tek her etiketin içine yazılması gerektiği ve yönetiminin zor olması sebebiyle çok gerekmedikçe önerilmemektedir.

1.2.2. Global Kullanım Alanı 

Dahili stil kullanımı (Internal Style Sheet) olarak da adlandırılır. CSS kodumuz sayfamızın <head> kısmında, <style>…</style> etiketi içinde yer alır. Kısmen de olsa
HTML ve CSS kodumuzu birbirinden ayırmış oluruz.

Örnek: h3 etiketine uygulanmak üzere yazı rengini kırmızı, yazı büyüklüğünü 12pt ve sola hizalı yapalım;

 Görüldüğü üzere stilimizi <style> etiketi içinde <style type=”text/css” >
…CSS…</style> yer alacak şeklinde yazdık. Şimdi de bunu <head>…</head> etiketleri arasına aşağıdaki gibi yerleştirmemiz gerekiyor.
<html>
   <head>
      <title>CSS Öğreniyorum</title>
    <style type="text/css">
      h3{
    color:red;
    text-align:left;
    font-size:12pt;
    }
     </style>
   </head> 
   <body>
       <h3>Duyurular</h3>
   </body>
</html>   

Global (dahili) olarak yerleştirdiğimiz CSS kodumuz sadece bu sayfayı etkileyecektir. Başka bir sayfada h3 etiketi normal görevini yapacaktır.

Global kullanım alanına sahip olan stil şablonumuzda seçici olarak etiket seçici kullanıldığını görmekteyiz. Şimdi de kullanım yerine müdahale etmeden seçici tipini değiştirelim. Seçicimizi, istediğimiz başlıkların stilinideğiştirmeye yönelik bir stil şablonu olarak tasarladığımız için aynı sayfada birden çok kez kullanılma olasılığı yüksektir. Bu sebeple ID seçici değil de sınıf (class) seçici seçmemiz gerekmektedir.
İsim olarak rakamla başlamayan, Türkçe karakter içermeyen ve karışıklığa yol açmaması için var olan etiket isimlerinden olmayan bir isim belirleyelim. Örneğin seçtiğimiz isim “baslik” olsun ve tabii ki bunun birsınıf seçicisi olduğunu belirtmek için başında nokta işareti olacak şekilde “.baslik” yazmalıyız. Uygulama aşağıda görülmektedir. 
<html>
   <head>
      <title>CSS Öğreniyorum</title>
    <style type="text/css">
      h3{
    color:red;
    text-align:left;
    font-size:12pt;
    }
     </style>
   </head> 
   <body>
       <h3 class="baslık">Duyurular</h3>
   </body>
</html>  


1.2.3. Bağlantılı Kullanım Alanı 

Harici stil kullanımı (External Style Sheet) olarak da adlandırılır. Stilimizi “.css” uzantılı stil şablonu dosyasına kaydederek, kullanmak istediğimiz sayfalarda <link> etiketi yardımıyla çağırırız. HTML kısmı ile CSS kısmını birbirinden tamamen ayırmış oluruz.
Sayfalarımızın okunaklılığı ve yönetilebilirliği maksimum düzeye çıkacaktır. Bu nedenle en çok tercih edilen yöntemdir.

Bu yöntem en çok tercih edilen yöntem olduğu için nasıl ki resimlerimizi, dokümanlarımızı ayrı klasörlerde tutuyorsak stil şablonu (CSS) dosyalarını da ayrı bir klasörde tutmalıyız. Klasör ismi olarak “CSS” veya “styles” isimlerini tercih edebilirsiniz.
Bu klasörler içinde yer alan .css dosyalarına istediğimiz sayfadan bağlantı sağlayarak, içinde oluşturulmuş tüm stilleri sayfamıza uygulayabiliriz.
Örnek olarak stilim.css isminde harici bir stil şablonu (CSS) dosyası oluşturalım.Oluşturduğumuz dosyanın içine bir önceki örnekte yaptığımız stilin kodlarını yazalım. 
stilim.css dosyasının içeriği;
Bu örnekte sadece sınıf (class) seçici kullanılmıştır. İstenildiği takdirde her türlü seçici türünü dosya içine yazabiliriz. Önemli olan dosya içinde sadece stil şablonu formatına ait kodların yer almasıdır. 

Şimdi bu dosyayı sayfamıza <link> etiketini kullanarak bağlayalım; 
<html>
   <head>
      <title>CSS Öğreniyorum</title>
   <link href="stilim.css"="stylesheet" type="text/css">
   </head>
   <body>
      <h3 class="baslik">Duyurular</h3>
   </body>
</head>   


Dikkat etmemiz gereken nokta css dosyasını çağırdığımız sayfanın bulunduğu konumdan, css dosyasının bulunduğu konuma dosya yolunun tam olarak yazılmasıdır.

Örneğin, Resim 1.1’deki gibi bir dosya düzenimiz olduğunu ve index sayfasından style dosyasında bulunan stilim.css dosyasını çağıracağımızı farz edelim. Kod yapımız aşağıdaki gibi olacaktır.
<link href=”styles/stilim.css” rel=”stylesheet” type=”text/css”> 

Örneğin, Resim 1.1’deki gibi bir dosya düzenimiz olduğunu ve template dosyası içindeki bir sayfadan style dosyasında bulunun stilim.css dosyasını çağıracağımızı farz edelim. Kod yapımız aşağıdaki gibi olacaktır. 
<link href=”../styles/stilim.css” rel=”stylesheet” type=”text/css”>















Bizi Takip Edin...
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakabilirsiniz...



Yorum Gönder Blogger

 
Top