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!

 

STİL ŞABLONU (CSS) ÖZELLİKLERİ 

Bu kısımda etiketlere stil şablonlarının nasıl uygulanacağını göreceğiz. <a> etiketinin CSS ile kullanımını daha önceki modülümüzde incelemiştik. Bu kısımda aşağıdaki özellikler anlatılacaktır.

 Zemin özellikleri
 Font özellikleri
 Kutu modeli özellikleri
 Tablo özellikleri
 Pozisyon özellikleri
 Liste özellikleri

Zemin Özellikleri 

Ögelere zemin (background) rengi vermek veya zemin resmi eklemek ile onların nasıl davranış göstereceğini kapsar. Background, arka plân olarak da adlandırılabilir. Bu özellikler;

 background-color
 background-image
 background-repeat
 background-attachment
 background-position


 Zemin Rengi 

“background-color” özelliği ögelerin (etiketlerin) zeminine renk vermek için kullanılır. Renk belirleme işi için “Renk Birimleri” başlığında ele aldığımız yöntemlerden istediğimizi seçebiliriz. Ancak en çok tercih edilen RGB kodu verilerek yapılandır. Örneğin;
 h1 {background-color:#3070E7;} h1 etiketi için zemin rengini #3070E7 yapacaktır

Aşağıdaki örnekte üç farklı etikete zemin rengi verilmiştir. Bunlardan div etiketi kutu modeli (model-box) dediğimiz özel bloklar oluştururken kullanılmaktadır. 

 Zemin Resmi 
“background-image” özelliği ögelere zemin resmi eklemek için kullanılır. Örnek olarak “zemin.jpg” isimli görselimizi zemin resmi olarak sayfamıza eklemek için aşağıdaki stil şablonu kodunu uygulamalıyız. 
body { background-image:url( ‘zemin.jpg’); } 

Zemin Resmi Tekrarı 
"background-repeat" özelliği zemine eklenen görselin tekrarlanma biçimini kontrol etmek için kullanılır. Dört ayrı değer alır: 
 background-repeat:repeat; (Görselin hem yatay olarak hem de dikey olarak tekrar etmesini istiyorsak bu özelliği kullanırız. Bu özellik yazılmasa bile CSS 
varsayılan olarak bunu yapacaktır.) 
 background-repeat:no-repeat; (Eklediğimiz görselin hiçbir şekilde tekrar etmesini istemiyorsak bu özelliği kullanırız.) 
 background-repeat:repeat-x; (Eklediğimiz görsel yatay olarak yani x ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.) 
 background-repeat:repeat-y; (Eklediğimiz görsel dikey olarak yani y ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.) 
Örnek görsel olarak aşağıda verilen resmi sayfanızın olduğu yere “logo.gif” olarak kaydedip 
body { background-image:url( ‘logo.gif’); 
 background-repeat : repeat;

Zemin Resmi Pozisyonu 
"background-position" özelliği görselin sayfadaki pozisyonunu belirler. Dikey hizalamada üst (top), orta (center) ve alt (bottom) geçerli bir pozisyonken; yatay hizalamada sol (left), orta (center) ve sağ (right) geçerlidir. Bu özellik için 11 ayrı değer bulunmaktadır. 
top left top center top right 
center left center center center right 
bottom left bottom center bottom right 
background-position:top left; (Bu bildirimi kullandığımızda görselimiz üstün solunda yer alacak.) 
background-position:top center; (Bu bildirimi kullandığımızda görselimiz üstün ortasında yer alacak.) 
background-position:top right; (Bu bildirimi kullandığımızda görselimiz üstün sağında yer alacak.) 
background-position:center left; (Bu bildirimi kullandığımızda görselimiz ortanın solunda yer alacak.) 
background-position:center center; (Bu bildirimi kullandığımızda görselimiz ortanın ortasında yer alacak.) 
background-position:center right; (Bu bildirimi kullandığımızda görselimiz ortanın sağında yer alacak.) 
background-position:bottom left; (Bu bildirimi kullandığımızda görselimiz altın solunda yer alacak.) 
background-position:bottom center; (Bu bildirimi kullandığımızda görselimiz altın ortasında yer alacak.) 
background-position:bottom right; (Bu bildirimi kullandığımızda görselimiz altın sağında yer alacak.) 
background-position:x% y%; (Görselimize yatay ve dikey olarak yüzde üzerinden pozisyon vermemizi sağlar. İlk yüzde yatayın, ikinci yüzde ise dikeyin pozisyonudur. Örnek: background-position:60% 75%; ) 
background-position:xpos ypos; (Görselimize yatay ve dikey olarak pixel bakımından pozisyon vermemizi sağlar. İlk pixel'li rakam yatayın, ikinci pixe

Örnek olarak bir önceki örnekte sayfamıza döşediğimiz “logo.gif“ görselini sayfamızın tam ortasına yerleştirelim. 
body { background-image: url(‘logo.gif’)
background-repeat : no-repeat
background-position: center center ; } 
Bu örneğimizi kısaltma uygulayarak şöyle de yazabilirdik; 
body{ background:url(‘logo.gif’) no-repeat center center;} 

Birkaç örnek daha vermek gerekirse;
Örnek1: body{ background: url(logo.gif) no-repeat bottom right;} 
Örnek2: body{ background: url(logo.gif) no-repeat 60% 75%;} 
Örnek3: body{ background: url(logo.gif) no-repeat 100px 200px;}

Zemin Resmi İliştirme 
“background-attachment” özelliği zemine yerleştirdiğimiz görselin kaydırma çubuğu ile birlikte hareket edip etmeyeceğinin kontrolünü sağlar. 
Görselin kaydırma çubukları ile birlikte hareket etmesini istiyorsak değer olarak “scroll” kullanırız. Geçerli (default) değer budur, hiçbir şey yazılmadığında bu durum yine geçerlidir. 
Örnek:
body { background-image: url( ‘logo.gif’)
 background-repeat : no-repeat; 
background-attachment: scroll ; } 
Görselin kaydırma çubukları ile birlikte hareket etmemesini, sabit kalmasını istiyorsak değer olarak “fixed” kullanırız. 
Örnek: 
body { background-image: url(logo.gif)
 background-repeat : no-repeat
background-attachment: fixed; } 

Font ve Metin (Text) Özellikleri 
Öncelikle font ve metin (text) arasındaki farkı bilmeliyiz. Font özellikleri karakterlerin tip ve biçimlerinin nasıl olacağını belirlerken, metin (text) özellikleri font özellikleri ile belirlediğimiz karakterlerin bir araya gelmesi ile oluşan yazıların (metin) sayfadaki düzenini kontrol etmeye yarar. 
 Font Özellikleri 
Font özellikleri web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiştirmek için kullanılır. Bu özellikler; 
 font-family 
 font-size 
 font-weight 
 font-style 
 line-height 
 font 
 Font Ailesi 
“font-family” özelliği, bir metne ait font ailesini belirlemeye yarar. Bunu yaparak yazı tipimizi seçmiş oluruz. Bu özellik birden fazla font ailesi ismi içerebilir, her font ailesi ismi virgülle ayrılır. 
Örnek-1:

Yukarıdaki örnekte tarayıcı ilk önce Verdana yazı tipinin tarayıcı tarafından desteklendiğine bakacaktır. Desteklenmediği takdirde sırayla diğerlerini deneyecektir. 

Örnek-2:

Font Boyutu 

font-size” yazı karakterlerinin, dolayısıyla da metnin boyutunu ayarlamaya yarar. 
Boyutu piksel olarak " px " , yüzde olarak " % " ya da " em " ile belirtebiliriz. 
  
Örnek:
Font Kalınlığı 

“font-weight” özelliği, fontun kalınlık, incelik değerini belirlemeye yarar.100 (ince)-900 (kalın) arasında bir değer alabildiği gibi bold, bolder, normal ve lighter değerlerini de alabilir. 

Örnek: 
p{ 
 font-weight: bold; 
 
Yukarıdaki örnekte p etiketi içinde yer alan yazının tamamının kalın yazılması sağlanmıştır.
 Font Stili 

"font-style" özelliği, metni eğik (italik), az eğik veya normal yapmak için kullanılır. 

p { font-style:normal; }  Metin normal görünür. 
p { font-style:italic; }      Metin italik yani eğik yazı olarak görünür. 
p { font-style:oblique; }  Metin az eğik görünür(Çok fazla desteklenmez.). 
Satırlar Arası Mesafe Ayarı 

“line-height” özelliği, metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır. 

p{ line-height: 15px;}  Satırlar arası mesafeyi 15 px yapar. 

Font 

Kısaltma işlemini yaparken aşağıdaki söz dizimi kullanılır: 

font: font-style font-weight font-size/line-height font-family; 

Örnek olarak aşağıdaki özellikler olsun; 

font-weight: bold
font-family: verdana, sans-serif
font-size: 12px
line-height: 15px

Kısaltma olarak kullanılan kod ise tek satır; 
 font: bold 12px/15px verdana, sans-serif;
Metin (Text) Özellikleri 

Bu kısımda metni nasıl biçimlendireceğinizi (bir metne ait renk, hizalama, font büyüklüğü, harfler arası boşluk, metnin altını veya üstünü çizmek gibi) öğreneceksiniz. Bu özellikler: 
color 
 text-align 
 text-decoration 
 text-transform 
 text-indent 
 line-height 
 letter-spacing 
 word-spacing 
 vertical-align 

Metin Rengi 

“color” özelliği, metne renk vermek için kullanılır. Değer olarak daha önce öğrendiğiniz renk birimlerinden istediğinizi kullanılabilirsiniz. 

Örnek-1                 h1{ color: #449BDB; } 
Örnek-2                 p { color:black; } 
Örnek-3                 p {color: rgb(255, 0, 0);} 

 Metin Hizalama 

text-align” özelliği, metinleri hizalama için kullanılır. Metinleri sağa, sola,iki yana yaslayabilir veya ortalayabiliriz. 

text-align:left; (Metni sola hizalamak için kullanılır.) 
text-align:center; (Metni ortaya hizalamak için kullanılır.) 
text-align:right; (Metni sağa hizalamak için kullanılır.) 
text-align:justify; (Metin içeriğinin sağ taraftan kalan boşluklarını tamamlar, okumayı kolaylaştırır. Gazete ve magazin dergilerinde olduğu gibi.) 

Örnek :  h1 { text-align:left; } 

Metin Dekorasyonu 

text-decoration” özelliği, genellikle bağlantıların (link) altındaki çizgileri kaldırmakla birlikte metinlerin üst tarafını çizmeyi, altını çizmeyi, üzerini çizmeyi ve onlara yanıp sönme (blink) efekti vermeyi sağlar. 

 text-decoration:none; (Genellikle a etiketine uygulanır, çizgiyi kaldırır.) 
 text-decoration:underline; (Metni altı çizili yapar.) 
 text-decoration:overline; (Metnin üst tarafını (tepesini) çizili yapar.) 
 text-decoration:line-through; (Metnin üzerinden (ortasından) çizgi geçirir.) 
 text-decoration:blink;   (Metnin yanıp sönmesini (bir görünüp bir görünmemesi sağlar.)

 Metin İçindeki Resmin Dikey Konumunu Ayarlamak 

“vertical-align” özelliği, bir ögenin dikey olarak hizalaması için kullanılır. Aşağıdaki değerleri alabilir. Varsayılan değeri “baseline” dir. 

 baseline : Orta (metin içeriğine göre) 
 sub : Altsimge 
 super : Üstsimge 
 top : Yukarı (elemente göre) 
 text-top: Yukarı (metin içeriğine göre) 
 middle : Orta (elemente göre) 
 bottom : Alt (elemente göre) 
 text-bottom : Alt (metin içeriğine göre) 
 px ve yüzde (%) değerleri de verilebilir. 

Kutu Modeli Özellikleri 

Tablosuz tasarımların gereklilik kazandığı günümüzde, bu iş için esas etiketimiz olan <div>” etiketi, kutu modeli (box model) oluştururken de esas etiket konumundadır. 

Div etiketleri sayesinde, istediğimiz kutu modellemelerini gerçekleştirebiliyoruz. 
Ayrıca istediğimiz ögenin etrafını istediğimiz biçimde sarabiliyoruz ve bu kutuların kendi 
içlerinde ve kendi aralarındaki düzenini stil şablonları uygulayarak ayarlayabiliyoruz. 

Kutu modeli şu üç ana ögeden oluşur; 
 margin (kenar dışı boşluğu) 
 border (kenar kalınlığı) 
 padding (kenar içi boşluğu) 

Aşağıdaki resimde kutu modeli (box-model) görsel olarak gösterilmiştir. 
Kenar Dışı Boşluğu Özellikleri 

Turuncu renk ile sınırları belli olan kutumuzun diğer ögelerle arasındaki mesafeyi belirleyen ‘margin’ ögesinin alt elemanları şunlardır; 

margin-top (üst kenar dışı boşluğu) 
margin-right (sağ kenar dışı boşluğu) 
margin-bottom (alt kenar dışı boşluğu) 
margin-left (sol kenar dışı boşluğu) 
margin (kenar dışı boşlukları) (Kısaltma amaçlı kullanılır.) 

Margin ile kısaltma işlemi yapılırken aşağıdaki durumlar söz konusudur; 

 margin:25px 50px 75px 100px; (üst 25px, sağ 50px, alt 75px, sol 100px olur.) 
 margin:25px 50px 75px; (üst 25px, sağ ve sol 50px, alt 75px olur.) 
 margin:25px 50px; (üst ve alt 25px, sağ ve sol 50px olur.) 
 margin:25px; (Tüm kenar dışı boşlukları 25px olur.) 

Kenar Çizgisi Özellikleri 

Kenar çizgisi özellikleri ile kenar çizgisinin biçemini, rengini ve kalınlığını ayarlanabilir. Tüm kenarlara veya ayrı ayrı her kenara bu ayarları uygulayabiliriz. Bu özellikler şunlardır;
Kenar Çizgisi Biçemi 

Kenar çizgisinin nasıl olacağını (noktalı, kesik kesik, düz, çift, vb.) belirler. Herhangi bir değer yazılmadığı zaman ‘none’ varsayılan olarak geçerlidir. Aşağıdaki değerleri alabilir. 






Örnek: 
.border_1 { border-style:dotted;} bu şekilde her hangi bir div (kutu) etiketine uygulamadık. Şimdi sınıf seçicimizin div’e uygulanmış haline bakalım

Örnek-2 Şimdi de üst ve alt kenar için düz; sağ ve sol kenarlar için çift çizgi biçemini uygulayalım. 
.border_1 { 
 border-top-style: solid; 
 border-bottom-style:solid; 
 border-left-style: double; 
 border-right-style: double; 
























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



Yorum Gönder Blogger

 
Top