Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5
CSS yapısı ve kullanımı-2
#1
Selam arkadaşlar Css yapısı ve kullanımı konusunda CSS stil şablonlarına giriş yapmıştık.Bu konuda ise CSS birimlerini, zemin özelliklerini , font metin özelliklerini ve kutu modeli özelliklerini elimden geldiğince düzgün anlatmaya çalışacağım.

CSS Birimleri:
Stil şablonları (CSS) oluşturma esnasında nesnelerin boyutlarını, aralarındaki mesafeleri (konumlandırma amaçlı) ve renklerini ayarlarken kullanabileceğimiz ölçü birimleri vardır. Örneğin uzunluk birimi px (piksel) bunlardan biridir. şimdi sırasıyla bu birimleri ele alalım.

Uzunluk Birimleri:
Uzunluk birimleri göreceli (bağıl-relative) ve kesin (absolute) olmak üzere ikiye ayırılır.

Göreceli ( Bağıl ) Uzunluk Birimleri:
“em”,” ex”, “px” ve “%” birimleri, göreceli ölçü birimleridir. Bu birimler diğer uzunluk birimlerine bağlı olarak davranış gösterir. Yazı büyüklüğünün değişimine imkân sağlayan sayfaların çıktısının alınması gereken durumlarda avantaj sağlamaktadırlar. Bu birimlerin de aralarında birbirlerinden üstünlükleri vardır. şimdi sırayla bu birimleri ele alalım ( % birimi ayrı bir başlıkta ele alınacaktır).
- em : Varsayılan yazı büyüklüğünde (font-size) ve yazı ailesinde (font-family) yer alan “M” harfinin genişliğini baz almasıdır.

Tüm tarayıcıların varsayılan yazı büyüklüğü (body etiketinde tanımlı) 16px‟dir. 16px, 1em‟ e eşittir. O zaman piksel/16 bize em değerini verecektir. h1{font-size:2.5em; } Bu örnekte h1 için yazı büyüklüğü 2.5 X 16 = 40px dir.
- ex : Hangi yazı tipi seçilmişse o yazı tipindeki küçük x harfinin yüksekliğidir.
- px: Monitörümüz piksellerden meydana gelir. Ekran çözünürlüğüne göre değişen, ekranda bulunan noktalardan (piksel) bir tanesinin yüksekliğidir.
Aşağıdaki örnekte em ve px birimlerini kullanarak oluşturduğumuz iki paragraf stili arasındaki fark görülmektedir.

www.deccal.org

Sayfamızın normal olarak web tarayıcımızdaki görüntüsü;

www.deccal.org

şimdi de tarayıcımızın görünüm ayarlarından metin boyutunu en küçük yapalım;

www.deccal.org

Görüldüğü üzere “px” ölçü birimi kullanarak oluşturduğumuz paragraf stilimiz bu etkileşimden etkilenmemişken; ”em” ölçü birimini kullanarak oluşturduğumuz paragraf stilimizin görünümünde değişiklik olmuştur

Kesin Uzunluk Birimleri:

Bağıllık göstermeyen birimin tam olarak belirtildiği uzunluk birimidir.
- in: inç‟i(inch) ifade etmektedir,1 inç=2,54 cm‟dir.
- cm: Santimetreyi ifade etmektedir. Gerçek hayatta kullandığımız cm değeridir.
- mm: Milimetreyi ifade etmektedir. Örnek: margin-left:10 mm (sol iç kenar boşluğu,10 mm)
- pt: Point.(punto),standart baskı birimidir. (1pt = 1/72 inç) Örn: font-size:14 pt
- pc: Pika. Bir inçin altıda birine eşit olan bir baskı ölçü birimi.1pc = 12 pt‟dir.


Aşağıda uzunluk birimlerinin boyut olarak karşılaştırılmalı tablosu verilmiştir:

www.deccal.org

Bu birimlerin dönüşümleri web tasarım programları tarafından türü değiştirir değiştirmez yapılmaktadır. İnternette de bu iĢ için yapılmış sayfalar vardır. Örnek olarak 12 px‟lik yazı tipi için dönüşümlerin nasıl yapılacağı aşağıda gösterilmiştir
-em hesabı: 12px / 16px = 0.75em
-Yüzde (%) hesabı: 12px / 16px * 100 = 75%
-Point (punto) hesabı: 16px * 72 / 96 = 12pt

www.deccal.org

Yüzde Birimleri:
Daha önce de belirttiğimiz gibi yüzde (%) uzunluk birimi, göreceli bir birimdir. Yani body elemanında varsayılan yazı büyüklüğümüze (font-size) bağlı büyüme-küçülme gösterir. Örneğin body {font-size: 100%; } şeklinde bir kullanım, varsayılan tarayıcı yazı büyüklüğünün (16px) tamamını kullanacağı anlamına gelir, değişim olmayacaktır. Fakat şu stili uygularsak; body {font-size: 62.5%; }normal yazı büyüklüğümüzün yüzde 62,5‟ini kullandığımızı göreceksiniz. O da 12 px‟lik bir değere karşılık gelmektedir. Sayfanın her yerinde aksi belirtilmedikçe bu değer geçerli olacaktır.

Renk Birimleri:
Stil şablonlarının (CSS) temel taşlarından olan renk belirleme işlemi, renk ismi (İngilizce) verilerek veya RGB koduna dayalı olarak yapılmaktadır.

Renk İsimleri:

Tüm tarayıcılarda geçerli olan 16 adet renk isimlenmesi belirlenmiştir. Bu renkler ve isimleri aşağıdaki tabloda listelenmiştir.

www.deccal.org

Örneğin paragrafımızı kırmızı yapmak için renk isimlendirmemiz olan red‟i (kırmızı) color:red şeklinde yazarız;
Kod:
p { color:red; }
Bir başka örnek olarak H1 başlığımızın arka plân rengini turkuaz, yazının rengini ise siyah yapalım;
h1 { color:black; background-color: red; }

RGB Kodu ile Renk Belirleme:
RGB kodu Red (kırmızı), Green (yeşil) ve Blue (mavi) olmak üzere 3 rengi esas alan kodlama sistemidir. Bu sisteme göre tüm renkler bu üç temel rengin karışımından oluşur. Bu üç rengi ayrı kanallar olarak düşünebilirsiniz. Örneğin tüm renklerin karışımları beyazı verir ve kodu heksadesimal (16 tabanlı sayı sistemi) olarak RGB sisteminde #FFFFFF olarak ifade edilir. Aynı şekilde tüm kanalları kapatırsak siyah rengi elde ederiz ve #000000 olarak ifade edilir. Bu bilgiden hareket ederek kırmızıyı elde etmek için #FF0000, yeşili elde etmek için #00FF00 ve maviyi elde etmek için #0000FF yazmamız gerekmektedir.

www.deccal.org

RGB kod sistemine dayalı renk belirleme işi dört şekilde yapılır.Bunlar:

Uzun RGB Kodu ile Renk Belirleme(#RRGGBB):
Kırmızı ®, Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0..FF arası heksadesimal değer alabilirler.RGB kodunun başında heksadesimal olduğunu göstermek üzere # işareti olmalıdır. #000000 ile #FFFFFF arasında renk değerleri alabilir. Örnek olarak { background-color: #449BDB; }
Burada kırmızı olarak #44, yeşil olarak #9B ve mavi olarak #DB renk karışımından oluşan renk ifade edilmektedir.

www.deccal.org

Kısa RGB Kodu ile Renk Belirleme (#RGB):
Uzun RGB kodu ile renk belirleme işinin kısaltılmış halidir. Kırmızı ®, Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0..F arası heksadesimal değer alabilirler. #000 ile #FFF arasında renk değerleri alabilir.
Örnek olarak {background-color:#f00 } stil şablonu arka plân rengini kırmızı yapacaktır. Kırmızı renginin uzun RGB kodu bildiğimiz gibi #FF0000‟dır.


Tam Sayı Değer ile Renk Belirleme:
Gerek uzun RGB kodu ile olsun gerekse kısa RGB kodu ile renk belirlerken heksadesimal kod kullandığımızı biliyoruz, işte bu kod içindeki kırmızı ®, yeşil (G) ve mavi (B) olarak belirttiğimiz her kısmın onluk sistemdeki karşılığının rgb (R, G, B) biçiminde belirtilmesi tam sayı değeri ile renk belirleme işidir. Bu da demek oluyor ki R,G,B kısımları kendi içlerinde 0-255 arasında değer alabilmektedir.
Örnek olarak;
Kod:
Rgb (0,0,0) --> siyah
rgb(255,255,255) --> beyaz rengi ifade etmektedir.

Yüzde Değer ile Renk Belirleme:
RGB kodunda her rengin tanımını yüzdesel olarak % 0 - % 100 şeklinde belirtme işidir. Örnek olarak rgb (0%, 0%, 0%) , siyah rgb (100%, 100%, 100%) ,beyaz rengi ifade etmektedir. Renk belirleme işinin 4 yöntemle yapılacağını gördük. ġimdi bir örnekle tüm kullanımları bir arada görelim; Rengimiz kırmızı olsun, color: red; /*Renk adı ile belirlenmesi */ color: #f00 /* Kısa RGB Kodu ile */ color: #ff0000; /* Uzun RGB Kodu ile */ color: rgb(255, 0, 0); /* Tam Sayı Değer ile */ color: rgb(100%, 0%, 0%); /* Yüzde Değer ile */ Stil şablonlarımızı yazarken açıklama satırı eklemek için /*……*/ karakterleri kullanılır.
Örnek: /* bu kısımda yazımızın rengi belirlenmektedir. */


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;
Kod:
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.
Kodlar:
www.deccal.org
Sayfa Önizlemesi:
www.deccal.org

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.
Kod:
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; ; } stilimizi sayfamıza uyguladığımızda sayfanın tüm görünür alanlarında logomuzun tekrarlandığını göreceksiniz.

www.deccal.org

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


Kod:
- 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. ilk 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. ilk pixel'li rakam yatayın, ikinci pixel'li rakam ise dikeyin pozisyonudur. Örnek: background-position:100px 200px; )

Örnek olarak bir önceki örnekte sayfamıza döşediğimiz “logo.gif“ görselini sayfamızın tam ortasına yerleştirelim.
Kod:
body { background-image: url(„logo.gif‟); backg[color=#00BFFF]round-repeat : no-repeat; background-position: center center ; }
Bu örneğimizi kısaltma uygulayarak şöyle de yazabilirdik;
PHP Kod:
bodybackground:url(„logo.gif‟no-repeat center center;} 

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.

PHP Kod:
body background-imageurl„logo.gif‟); background-repeat no-repeatbackground-attachmentscroll ; } 
Görselin kaydırma çubukları ile birlikte hareket etmemesini, sabit kalmasını istiyorsak değer olarak “fixed” kullanırız.
Örnek:
PHP Kod:
body background-imageurl„logo.gif‟); background-repeat no-repeatbackground-attachmentfixed; } 


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:
PHP Kod:
font-familyVerdanaArialHelveticasans-serif; } 
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:
PHP Kod:
h1 font-familyGeorgia"Times New Roman"serif; } Bu örnekte ise görüldüğü üzere “Times New Roman” tırnak içine alınmıştırEğer bir font ailesinin adı bir kelimeden fazla ise tırnak işaretleri içine alınmalıdır

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:
PHP Kod:
body {font-size:100%;} // varolan font boyutunun tamamını(%100) kullan.
h1 {font-size:2.5em;} // h1 için font boyutu(2.5em=2.5*16px =40px)belirler.
h2 {font-size:25px;} // h2 için font boyutu(25px) belirler. 
Font Size özelliğinin alabileceği değeler:



PHP Kod:
xx-small:
Font boyutunuxx-small (ektra ektra küçükolarak ayarlar.
x-small:
Font boyutunuekstra küçük olarak ayarlar.
small:
Font boyutunuküçük olarak ayarlar.
medium:
Font boyutunuekstra medyum olarak ayarlarBu değer varsayılandır.
large:
Font boyutunubüyük olarak ayarlar.
x-large:
Font boyutunuektra büyük olarak ayarlar.
xx-large:
Font boyutunu xx-large (ekstra ekstra büyükolarak ayarlar.
smaller:
Font boyutunuparent elementin metin boyutundan daha küçük olarak ayarlar.
larger:
Font boyutunuparent elementin metin boyutundan daha büyük olarak ayarlar.
length:
Font boyutunu pxcm gibi sabit bir boyutta ayarlar.
%:
Font boyutunuparent elementin boyutunun yüzdesi olarak ayarlar.
inherit
Font boyutunu
parent elementin boyutuyla aynı olacak şekilde ayarlar

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:
Kod:
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:
PHP Kod:
"font-style" özelliğimetni eğik (italik), az eğik veya normal yapmak için kullanılır.
font-style:normal; } // Metin normal görünür.
font-style:italic; } // Metin italik yani eğik yazı olarak görünür.
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;

Kod:
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.
PHP Kod:
Örnek-1 h1color#449BDB; }
Örnek-2 p color:black; }
Örnek-3 p {colorrgb(25500);} 


Metin Hizalama:
PHP Kod:
“text-align” özelliğimetinleri hizalama için kullanılırMetinleri sağasola,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ı tamamlarokumayı kolaylaştırırGazete 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.)


Örnek:
Kod:
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}


Metin Dönüşümü:

“text-transform” özelliği, bir metindeki karakterleri büyük veya küçük harfe çevirebilir ya da metindeki kelimelerin - İlk harflerini büyütebilir.
- text-transform:uppercase; (Metindeki tüm harfleri büyük harfe çevirir.)
- text-transform:lowercase; (Metindeki tüm harfleri küçük harfe çevirir.)
- text-transform:capitalize; (Metindeki kelimelerin ilk harflerini büyük hale çevirir.)

Örnek: Bu üç özelliği sınıf (class) seçicisi olacak şekilde yazalım.
PHP Kod:
.buyuk{text-transform:uppercase;}
.
kucuk{text-transform:lowercase;} 
.
ilkharfbuyuk{text-transform:capitalize;} 

Metin Girintileme:
“text-indent” özelliği, paragraf başı yaparken cümlenin ne kadar içten başlayacağını ayarlamak için kullanılır. Örnek:
PHP Kod:
{text-indent:50px; } // 
Her paragraf 50px içerden başlar.

Satırlar Arası Mesafe Ayarı:
“line-height” özelliğinden font özellikleri içinde bahsetmiştik. Metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır.
Örnek:
PHP Kod:
pline-height12px;} // Satırlar arası mesafeyi 12 px yapar. 

Harfler Arası Mesafe Ayarı:
“letter-spacing” özelliği, metin içinde yer alan karakterlerin arasındaki boşluğu ayarlamak için kullanılır.
Örnek: Bu özelliği üç farklı değer için etiket içinde kullanalım ve çıktısına bakalım.


Kod:
www.deccal.org
Kodların Önizlemesi:
www.deccal.org

Kelimeler Arası Mesafe Ayarı:
“word-space” özelliği, metin içinde yer alan kelimelerin arasındaki mesafeyi (boşluğu) ayarlamak için kullanılır. Örnek:
PHP Kod:
word-spacing12px// Kelimeler arası mesafeyi 12 px yapar. } 

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.
PHP Kod:
-baseline Orta (metin içeriğine göre)
sub Altsimge
super Üstsimge
top Yukarı (elemente göre)
text-topYukarı (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

Örnek-1:
PHP Kod:
img vertical-aligntext-top;} // metin resme göre üstten başlayacaktır. 
Örnek-2:
Aşağıda resmin ve metnin dört değere göre hizalanması görülmektedir.
www.deccal.org

Örnek-3:
Aşağıdaki örnekte kırmızı renkle zemin rengi verilen "Dikey Hizala" metninin dikey konumlandırılması yapılmıştır. Siz de yukarıda verdiğimiz “vertical-align” değerlerini sırayla deneyiniz ve ön izlemelerini gözlemleyiniz. Örneğin, üst simge biçiminde dikey hizalama yapmak için style=”vertical-align:super” yapmalısınız.

www.deccal.org
www.deccal.org

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.

www.deccal.org

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.)


Örnek:
PHP Kod:
body margin-top80px // sayfamızın üst kenar dışı boşluğunu 80 px yapar. 
Kısaltma İşlemi (Margin):
www.deccal.org

Margin ile kısaltma işlemi yapılırken aşağıdaki durumlar söz konusudur;
PHP Kod:
margin:25px 50px 75px 100px; (üst 25pxsağ 50pxalt 75pxsol 100px olur.)
margin:25px 50px 75px; (üst 25pxsağ ve sol 50pxalt 75px olur.)
margin:25px 50px; (üst ve alt 25pxsağ 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;
PHP Kod:
-border-style (kenar çizgisi biçemi)
border-top-style (üst kenar çizgisi biçemi)
border-right-style (sağ kenar çizgisi biçemi)
border-bottom-style (alt kenar çizgisi biçemi)
border-left-style (sol kenar çizgisi biçemi)

border-width (kenar çizgisi genişliği-kalınlığı)
border-top-width (üst kenar çizgisi genişliği)
border-right-width (sağ kenar çizgisi genişliği)
border-bottom-width (alt kenar çizgisi genişliği)
border-left-width (sol kenar çizgisi genişliği)

border-color (kenar çizgisi rengi)
border-top-color (üst kenar çizgisi rengi)
border-right-color (sağ kenar çizgisi rengi)
border-bottom-color (alt kenar çizgisi rengi)
border-left-color (sol kenar çizgisi rengi)
border (Kısaltma işlemleri için kullanılı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.
www.deccal.org

Örnek:
PHP Kod:
border_1 border-style:dotted;} bu şekilde her hangi bir div (kutuetiketine uygulamadık
şimdi sınıf seçicimizin div‟e uygulanmış haline bakalım.
www.deccal.org

Kenar Çizgisi Genişliği:
“border-width” özelliği kenar çizgisinin genişliğini (kalınlığını) ayarlamak için kullanılır. Genişliği ayarlamak için piksel (px) olarak değer verebilir veya aşağıdaki değerleri kullanabiliriz.
- thin (ince)
- medium (orta)
- thick (kalın)

Örnek:
Kenarlık çizgisi kalınlığı 15 px ve düz çizgi olsun. (tüm kenarlar için)
PHP Kod:
.border_1{border-stylesolidborder-width:15px; } 

Örnek:
Her kenarı ayrı ayrı ele alalım;üst kenar 10 piksel, alt kenar 10 piksel, sağ kenar 15 piksel, sol kenar 15 piksel ve biçemi düz çizgi olsun.
PHP Kod:
.border_1 
{border-style:solid;
border-top-width:1px;
border-bottom-style:1px
border-left-style2px;
border-right-style2px;} 

PHP Kod:
border-width:2px 4px 5px 8px; (Üst 2pxsağ 4pxalt 4pxsol 8px olur.)
border-width:2px 5px 7px; (Üst 2pxsağ ve sol 5pxalt 7px olur.)
border-width:2px 5px; (Üst ve alt 2pxsağ ve sol 5px olur.)
border-width:2px; (Tüm kenar çizgisi geniĢlikleri 2px olur.) 
Örnek-3:
şimdi de en son yaptığımız örneğin kısaltılmış halini yazalım. Sağ-sol ve üst-alt aynı olduğu için, iki değer kategorisindedir. (üst-alt ve sağ-sol) şu şekilde olmalıdır.
PHP Kod:
.border_1 border-style:solidborder-width1px 2px

Kenar Çizgisi Rengi:
“border-color” özeliği, kenar çizgisine renk vermek için kullanılır. Kenarların hepsine birden renk verebileceğimiz gibi tek tek de renk verebiliriz.
Örnek-1:
PHP Kod:
.border_1border-style:solidborder-color:blue; } 
Örnek-2:
Her kenarı ayrı ayrı ele alalım; üst ve alt kenar rengi #F60 sağ kenar ve sol kenar rengi #060, biçemi düz çizgi ve genişliği 5 piksel olsun.

PHP Kod:
.border_1
border-style:solid
border-width5px
border-top-color#F60; 
border-left-color#060; 
border-bottom-color#F60; 
border-right-color#060; 
text-aligncenter; }
Kısaltma işlemi margin‟de olduğu gibidir
Kod:
- border-color: #F60 #060 #CCC #0F0; (Üst #F60, sağ #060, alt #CCC, sol #0F0 olur.)
- border-color: #F60 #060 #CCC; (Üst #F60, sağ ve sol #060, alt #CCC olur.)
- border-color: #F60 #060; (Üst ve alt #F60, sağ ve sol #060 olur.)
- border-color: #F60; (Tüm kenar çizgi renkleri #F60 olur.)

şimdi de en son yaptığımız örneğin kısaltılmış halini yazalım.
PHP Kod:
.border_1
border-style:solid;
border-width5px;
border-color#F60 #060; 
text-aligncenter; } 

Kenar Çizgisi Tüm Özellikleri İçin Kısaltma:
Kenar çizgisinin biçemi, rengi ve kalınlığını tek seferde biçimlendirmek için “border” özelliğini kullanmamız yeterlidir. Örnek: Kenar çizgi genişliği 1px, düz ve rengi de #F60 olsun.
PHP Kod:
.border_1border 1px solid #F60 ;} 

Kenar İçi Boşluğu Özellikleri Kutu modeli resmimizden (Resim: 2.1) hatırlayacağınız gibi; kenar çizgileri turuncu renk ile gösterilen kutumuzda, kenar çizgileri ile içerik arasındaki mesafeyi ayarlamaya yarayan “padding” ögesinin alt elemanları şunlardır;
PHP Kod:
padding-top (üst kenar içi boşluğu)
padding-right (sağ kenar içi boşluğu)
padding-bottom (alt kenar içi boşluğu)
padding-left (sol kenar içi boşluğu)
padding (kenar içi boşlukları) (Kısaltma amaçlı kullanılır.) 
Tüm padding elemanlarında yüzde, piksel veya em birim olarak kullanılabilir. Padding ile margin arasında bir kavram karmaşası olmaması için aşağıdaki resme bakınız.
www.deccal.org

Örnek: Resmimizde gösterilen margin ve padding ayarları arasındaki farkı anlamanız için aşağıdaki örneğe bakınız
www.deccal.org
www.deccal.org

Css yapısı ve kullanımı-2 anlatımı bitmiştir Css yapısı ve kullanımı-3 konusu içinde :
1-Tablo özellikleri
2-Konumlandırma
3-Liste Özellikleri


Elimden geldiğince anlaşılır olmasına özen gösterdim.Yanlışım olduysa Forumdaki büyüklerimden ve forum üyelerinden özür dilerim.
Beğenenler:
#2
http://megep.meb.gov.tr/mte_program_modu...0(css).pdf al al . Sende kurtul bende kiss
Beğenenler:
#3
öyle vermesini bende bilirim kanka maksat sitenin kalitesi artsın ;)
Beğenenler:
#4
ELİNE SAĞLIK
Beğenenler:
#5
sağolasın kardeşim
Beğenenler:
#6
eline sağlık kankam kiss
Beğenenler:
#7
eyv kanka exciting
Beğenenler:

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  CSS Eğitim: Kod Yapısı ve Açıklama kullanımı Dark-Capar 7 448 04-01-2016, Saat: 23:13
Son Yorum: xR4TC
  CSS yapısı ve kullanımı WesT 8 1,260 06-01-2014, Saat: 18:53
Son Yorum: WesT
  html kodları ile basit tablo yapısı WesT 4 2,588 03-01-2014, Saat: 19:03
Son Yorum: WesT
  html kodları ile basit form yapısı WesT 0 507 03-01-2014, Saat: 01:38
Son Yorum: WesT
Anahtar Kelimeler

CSS yapısı ve kullanımı-2 indir, CSS yapısı ve kullanımı-2 Videosu, CSS yapısı ve kullanımı-2 Online izle, CSS yapısı ve kullanımı-2 Bedava indir, CSS yapısı ve kullanımı-2 Yükle, CSS yapısı ve kullanımı-2 Hakkında, CSS yapısı ve kullanımı-2 Nedir, CSS yapısı ve kullanımı-2 Free indir, CSS yapısı ve kullanımı-2 Oyunu, CSS yapısı ve kullanımı-2 Download


1 Ziyaretçi