1Türk Boardu

Tam Versiyon: CSS Nedir? CSS Dersleri - CSS Kodlari - CSS Yazilar - CSS Bağlantılar - CSS Listeleme
Şu anda tam olmayan bir versiyonun içeriğine bakıyorsunuz. Tam versiyon'a bakınız.
[Resim: 148353258015371.png]

CSS Nedir? CSS Dersleri - CSS Kodlari - CSS Yazilar - CSS Bağlantılar - CSS Listeleme - CSS Tablolar - CSS Kenarlıklar (Border) - CSS Dıştan Boşluk (Margin) - CSS İçten Boşluk (Padding)

CSS Nedir?

CSS bir kısaltmadır. "Cascading Style Sheets" kelimesinin baş harflerinden oluşur. Dilimizdeki anlamı: Basamaklı Stil Sayfası.

Stiller, bir HTML elementinin nasıl görüneceğini belirleme olanağı sağlar.

Stiller HTML 4.0'da bir problemi çözmemizi sağlar. Siteyi görselleştirme!

HTML dosyamızın daha anlaşılır olmasını sağlar. Stillerimiz tek bir dosyada toplanır ve kolaylıkla okunur - değiştirilir.

Stil dosyalarımızın uzantısı *.css dir. CSS Dosyası birçok stil barındırabilir.

CSS Büyük Bir Problemi Çözüyor!

HTML ilk ortaya çıktığında siyah beyaz bir televizyondan farksız değildi. Her zaman aynı kodlar kullanılır ve aynı biçimde yazılar görünürdü. Örneğin bir H1 elementiyle başlık yazıp farklı bir yerdeki H1 elementini değişik bir renk ve tarzda gösteremiyorduk.

HTML 3.2 ile elementler bazı yeni özellikler kazandı. Örneğin FONT elementine color özelliği eklendi. Tabi bu da tam bir çözüm değildi.

Ne zaman ki HTML 3.2 çıktı, dünya değişti! Artık CSS vardı, üstelik günümüzde tüm tarayıcılar CSS desteklemektedir!

CSS Hayat Kurtarır

Biraz abartı mı oldu? Ancak şurası kesin. İşimizi kolaylaştırıyor. CSS, HTML de kullanılan elementlerin (tag) nasıl görüneceğini bildirir. Bu doğru. Peki ya başka?

Stiller css uzantılı dosyalara kaydedilerek kullanılır, görüntüyü hızlı ve etkili bir şekilde değiştirmenize yarar, düzenlemesi kolaydır, web sitenize kod fazlalığı yaratmaz. İşte bu kadar marifetli.

CSS Kod Yapısı


Bir CSS kodu iki temel bileşenden oluşur. Biri element ve stilleri birbirinden ayıran bir seçim. Diğeri ise bir ya da daha fazla özelliği bildirdiğimiz ifade bölümü.

CSS Kod Yapısı

Seçim genel olarak stilini belirleyeceğimiz HTML elementidir, h1, a, body, p gibi.

İfadeler ise sürekli olarak özellik: değer; şeklinde { ve } işaretleri arasında sıralanırlar.

CSS Örneği
Bir css ifadesi her zaman noktalı virgül (Wink ile biter. İfadeler bir kıvrımlı parantez içinde yer alır. Aşağıdaki örneğe bakalım:
Kod:
p { color: red; text-align: center; }

Yukarıda tek satırda belirttiğimiz kodları istersek aşağıdaki şekilde de yazabiliriz. Daha anlaşılır olacaktır:

p
Kod:
{
      color: red;
      text-align: center;
   }

CSS'de Açıklama Kullanmak
Her programlama dilinde ve HTML'de de olduğu gibi bazen kullanıcıların görmeyeceği ancak bizim için referans olacak açıklamalar yazmak gerekebilir. Bu durum için CSS de /* açıklama */ kullanılmaktadır:

Kod:
/* Paragraf Stilim */
   p
   {
      /* Renk kırmızı olacak */
      color: red;

      /* Ortalanmış olacak */
      text-align: center;
   }


CSS ID ve Class Seçimi

HTML elementleri için stiller belirleyebildiğiniz gibi size özel stiller belirleyip elementlerin "id" ve "class" özelliklerinde bu stili belirterek de kullanabilirsiniz.

Class Kullanımı
Bir HTML kaynağına baktığınızda bir element (tag) özelliği olarak class="stil" şeklinde bir özellik belirtildiğini görebilirsiniz. Peki neden buna gerek duymuşlar? Örneğin aşağıdaki HTML kodunu inceleyelim:

Kod:
<div class="stil">Hoş Geldiniz!</div>

Yukarıdaki div elementi içinde yer alan class="stil", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur. CSS dosyamızda şu şekilde bir ifade varsa:

Kod:
.stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

Nokta (.) ile başlayan bir stil oluşturduk ve adını biz verdik. Bu demektir ki class="stil" ile belirttiğimiz tüm elementler 10 punto Tahoma yazı tipinde ve mavi (blue) renginde olacaktır. Tabi istersek sadece tek bir elementte geçerli olmasını sağlayabiliriz. Örneğin sadece DIV elementlerinde geçerli olmasını istiyorsak:

Kod:
div.stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

".stil" yani seçim adımızın başına div getirmemiz yeterli olacaktır. Bu durumda bu CSS kodu sadece DIV elementlerinde kullanılabilir olacaktır.

CLASS özelliği kullanmanın bize sağlayacağı yararlara şöyle bir bakalım:

Kendimizin adlandırdığı özel stiller yaratmak ve kullanmak
Bir stili birden fazla elementte kullanabilmek
Stillere CSS de yer verip HTML kodlarımızı sürekli tekrarlanan uzun CSS kodlarından arındırmak

ID Kullanımı
ID özelliği ile de stiller yaratabiliriz. CLASS'tan farklı yanları:

Sadece tek bir elementte kullanılabilir.
Aynı id değeri iki elemente verilemez (Her id sadece tek bir elementte kullanılabilir).
Stil dosyamızda CLASS'da . (nokta) kullanırdık, ancak id özelliğine göre stilleme yapacaksak # (diyez) kullanırız.

Şimdi bu anlattıklarımızı örnek üzerinde görelim:
Kod:
<div id="stil">Hoş Geldiniz!</div>

Örnekte ID değeri "stil" olan bir DIV elementi görüyoruz. CSS dosyamızda bu elemente özel stil tasarlarken aşağıdaki şekilde kod yapısını oluşturmalıyız:

Kod:
#stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

Görüldüğü gibi bu kez diyez (#) ile başlattık. Sadece tek bir elemente özel stil tasarlamış olduk (Neden? Çünkü başka bir elementte yine id değeri "stil" belirtilemez.)

Ayrıca unutmadan söyleyelim hiçbir ID değeri rakamla başlamaz. ID, HTML dosyasında o elementi bulmamızı sağlar, bu nedenle aynı ismi veremeyiz. Aynı ismi vermemizin diğer yaratacağı sorun Java Script'te bu elementi id özelliğine göre kullanamamak olacaktır. Son olarak bazı tarayıcılar birden fazla aynı id kullanılan HTML dosyalarında stilleri görmezden gelebilir.

CSS Nasıl Eklenir?

Bir tarayıcı açıldığı zaman stilleri okur ve o stilin kullanıldığı HTML elementlerini belirtilen özelliklere göre şekillendirir.

Üç şekilde sayfamıza stil ekleyebiliriz. Bunlar:

Stilleri CSS Dosyasından Çağırmak
HTML Sayfasında CSS Yazmak
HTML Elementinin İçerisinde Stil Belirtmek

1. Stilleri CSS Dosyasından Çağırmak
Öncelikle bir not defteri ya da CSS düzenleyici program açmalısınız.

CSS Kodlarınızı CSS Kod Yapısı'na uygun olarak yazın ve kaydedin.

HTML Sayfanızı açıp <head> ile </head> arasına aşağıdaki şekilde stil dosyanızın adını belirtin.
Kod:
<link href="stil_dosyasi.css" type="text/css" rel="stylesheet"/>

href="DOSYA_ADI" ile belirttiğimiz yerde bizim kaydettiğimiz dosyanın adı yer almalı ve HTML sayfası ile CSS dosyası aynı klasörde bulunmalıdır. Farklı bir klasörde kullanmak istiyorsak HTML sayfasına göre konumu yazmamız gereklidir.

Dosya adını doğru yazdıysak artık CSS dosyamızı HTML sayfamıza bağladık demektir. Yani CSS dosyamızdaki stilleri rahatlıkla HTML sayfamızda kullanabiliriz.

2. HTML Sayfasında CSS Yazmak
HTML sayfamızda HEAD elementlerinin arasında STYLE elementi kullanarak stiller yaratmamız mümkün. Aşağıdaki örneğe bakalım:

Kod:
<html>
   <head>
      <title>Sayfa Başlığı</title>
      <style type="text/css">
         body { background-color:black; color:white; }
         p { font-family: Tahoma, Verdana; font-size: 12px; }
      </style>
   </head>
   <body>
      <p>Bu 12 piksel Tahoma yazı tipi ile yazıldı.</p>
   </body>
   </html>

Örneğe baktığımızda <style type="text/css"> elementini HEAD elementi içinde açıp kapatıyor ve içine stillerimizi yazıyoruz. Böylelikle dosyamızda belirttiğimiz stiller dışarıdan bir dosyaya bağlı olmaksızın kullanılabilir olacaklar.

3. HTML Elementinin İçerisinde Stil Belirtmek
Bazen stil dosyası ya da STYLE elementi kullanmadan hızlı çözümler üretmek gerekebilir. Böyle durumlarda her elementin style="" özelliği kullanıma hazırdır. CSS kodlarını element içinde açacağımız STYLE özelliğine sıralarız. Örneğin;
Kod:
<p style="font-family: Tahoma; font-size: 12px;">
         Bu 12 piksel Tahoma yazı tipi ile yazıldı.
      </p>

Size tavsiye edeceğimiz kullanım yolu 1 numaralı maddede anlattığımız harici bir dosya kullanmanızdır.

CSS Arkaplanlar
Bu sayfada HTML sayfanızın ya da sayfanızda bir bölümün arkaplan rengini, resmini ve özelliklerini nasıl belirleyeceğiniz ile ilgili bilgiler bulunmaktadır.

CSS arkaplan özellikleri bir HTML nesnesine arkaplan eklemenizde yardımcı olur. Bununla ilgili olarak tanıyacağımız CSS kodları:

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

CSS'de Renk İfadeleri
CSS dosyamızda yer yer renkleri belirtmemiz gerekebilir. Bunun için çeşitli yollar var. Bunlardan en çok kullanılan üç tanesi:

Onaltılık (Hex) Renkler
RGB (Kırmızı, Yeşil, Mavi) Renkler
Tarayıcı Renk İsimleri

Onaltılık (Hex) Renkler: #000000 şeklinde önce diyez sonra 6 adet 0-9 ve A-F değerleri alabilen sembollerden oluşur. Örneğin #404040 bir rengi ifade etmektedir.

Bu renk kodlarına resim işlem programlarınız yardımıyla (photoshop, paint shop pro gibi) ulaşabilirsiniz.

RGB (Kırmızı, Yeşil, Mavi) Renkler: Bir renk oluştururken kırmızı, yeşil ve mavinin tonlarını belirterek renk oluşturmamızı sağlar. Örneğin rgb( 0, 0, 0 ) siyah rengi belirtir. Mavi bir renk elde etmek istediğimizde Red - Green - Blue üçlemesinde en sonda yer alan mavinin değerini arttırmamız yeterli olur. Yani rgb( 0, 0, 255 ) mavi rengi verir. Windows'daki Paint Brush (MS Paint) programı ve diğer resim editörleri yardımıyla RGB değerlerini alarak renk oluşturabilirsiniz.

Tarayıcı Renk İsimleri: İngilizce olarak belirlenmiş bazı renk adlarını yazarak renk elde edebilirsiniz. Örneğin white beyaz, black siyah, blue mavi rengini verecektir.

Aşağıda renklerle ilgili örnek bir kullanım var:


Kod:
/* Koyu kırmızı */
      p { color: #CC0000; }

      /* Yeşilin bir tonu */
      div { color: line; }

      /* Mavi renk */
      code { color: rgb( 0, 0, 255 ); }


background-color: Arkaplan Rengi
Bir elementin arkaplan rengini belirlememizi sağlar.

Kod:
div { background-color: #EFEFEF; }


background-image: Arkaplan Resmi
Bir element içinde arkaplan resmi kullanmamızı sağlar.

Kod:
body { background-image: url('resim.jpg'); }


Yukarıdaki gibi url('') yazılarak arasında resmin adı veya yolu yazılır. Örnekte resmin adı resim.jpg olarak gösterilmiştir.

background-repeat: Arkaplan Tekrarı / Döşeli
Kullandığımız arkaplan resminin tekrar edip etmeyeceğini belirtmemizi sağlar. Dört kullanımı vardır:

no-repeat : Tekrar edilmeyecektir
repeat : Tekrarlanacaktır / döşenecektir
repeat-x : Sadece sağa doğru tekrar edecektir
repeat-y : Sadece aşağı doğru tekrar edecektir

Aşağıdaki kullanım örneğini inceleyelim:

Kod:
body {

         background-image: url('resim.jpg');

         background-repeat: no-repeat;

      }


Yukarıdaki css kodu resmin tekrarlanmayacağını tarayıcıya bildirir.

background-attachment: Arkaplan Sabitliği
Bu kod kullandığımız arkaplanın sabit kalıp kalmayacağı hakkında ayar yapmamızı sağlar. Eğer özellik değerinin sabit kalmasını (yani sayfanın yerine göre değişmemesini) istiyorsak fixed özelliği kullanırız.

Kod:
body {

         background-image: url('resim.jpg');

         background-attachment: fixed;

      }


background-position: Resmin Nereye Hizalanacağı
Eğer background-repeat özelliğini no-repeat olarak belirlediysek bu kod yardımıyla onun hizalanma şeklini belirleme şansına sahip oluruz.


Kod:
body {

         background-image: url('resim.jpg');

         background-repeat: no-repeat;

         background-position: right top;

      }


Yukarıda yer alan kod arkaplan resminin right (sağ) ve top (üst) tarafa doğru hizalanacağını bildirir.

background: Arkaplan Belirlemenin Kısa Yolu
Yukarıdaki tüm özellikleri tek bir kodda kullanmanız mümkün. Bunun için kullanacağımız kod: background.

Kod:
body {

         background: #000000 url('resim.jpg') no-repeat right top;

      }


Yukarıdaki kodda belirtilenler sırasıyla: background-color, background-image, background-repeat ve background-position.

CSS Yazılar

Bu sayfada HTML sayfanızda kullandığınız yazıların değiştirebileceğiniz belli başlı özellikleri (renk, hiza, kalın vb) hakkında bilgi verilecektir.

Yazı biçimlendirme ile ilgili komutlardan tanıyacaklarımız:

color
text-align
text-decoration
text-transform
text-indent

color: Yazı Rengi
Yazının rengini belirlemenizi sağlar (Renkler hakkında bilgi için tıklayın).

Kod:
p { color: blue; }


text-align: Hizalama
Yazının yatay yönde ne şekilde hizalanacağını belirtmenizi sağlar. En çok kullanılan dört hizalama yöntemi:

left : sol
right : sağ
center : ortalanmış
justify : iki yana yasla

Aşağıda paragrafların iki yana yaslanacağını belirttik:

Kod:
p { text-align: justify; }


text-decoration: Yazı Biçimi
Yazının biçiminde bazı değişiklikler yapmamızı sağlar. Örneğin tarayıcı varsayılanında sürekli A elementlerindeki altı çizgili dekorasyonu kaldırmak için aşağıdaki yazılabilir.

Kod:
a { text-decoration: none; }


text-transform: Yazıda Değişiklik Yap
Yazılan bir yazıyı otomatik olarak tüm harflerini büyük harfle yazmayı ya da tamamını küçük harfle yazmayı sağlar.

uppercase : tüm harfleri büyük harf yap
lowercase : tüm harfleri küçük harf yap

Kod:
h1 { text-transform: upperline; }


text-indent: Soldan Boşluk
Bir yazının başında belirtilen büyüklükte boşluk bırakmanızı sağlar. Özellikle paragraflar için kullanılır.

Kod:
/* 50 piksel ilk satırda boşluk bırakılacak */
      p { text-indent: 50px; }



NOT: Piksel (px), inç (in), punto (pt), santim (cm), yüzde (%) gibi stillerin sonuna eklenen ölçüler her zaman sayıya bitişik yazılır. 50px doğru ancak 50 px yanlış.

Diğer Yazı Şekillendirme Komutları
line-height: Satır yüksekliğini belirtmemizi sağlar.

letter-spacing: Harfler arasında belirtilen değerde boşluk koyar.

word-spacing: Kelimeler arasında belirtilen değerde boşluk koyar.

CSS Yazı Tipleri


Bu sayfada HTML sayfanızda kullandığınız yazıların yazı tipi özelliklerini nasıl değiştirebileceğiniz hakkında bilgi verilecektir.

Yazı tiplerini biçimlendirirken en sık kullandığımız komutlar:

font-family
font-size
font-style
font-weight

font-family: Yazı Tipi Belirlemek
Yazı tipleri klasörümüzü açtığımızda birçok yazı tipi görürüz. Bunları HTML sayfamızda kullanmak için adını belirtmemiz gerekir. İşte bu kod yazı tipi seçmemizde bize yardımcı olacaktır.

Kod:
h1 { font-family: Times New Roman; }

      p { font-family: Times New Roman, Arial, Helvatica; }

      a { font-family: Sans-serif; }


Yukarıdaki birinci örnekte sadece tek yazı tipi adı belirttik (Times New Roman), ancak bir sonrakinde aralarına virgül koyarak daha fazla belirttik. Bu tarz kullanımlarda öncelikle dikkate alınan ilk verdiğimiz yazı tipi olacaktır. Eğer verdiğimiz yazı tipi o kullanıcıda yoksa bir sonraki ile görüntülenecektir.

font-size: Yazının Büyüklüğü (Puntosu)
Yazı büyüklüğünü font-size ile belirtiriz. Ölçü birimi olarak aşağıdakileri kullanabiliriz:

% : yüzde olarak belirtmek
in : inç olarak belirtmek
cm : santim olarak belirtmek
mm : milimetre olarak belirtmek
em : varsayılan yazı büyüklüğüne göre oranlamak
pt : punto olarak belirtmek
px : piksel olarak belirtmek

Örneğin yazımızın 12 punto olması için yazmamız gereken komut:
Kod:
h2 { font-size: 12pt; }

14 piksellik bir yüksekliğe sahip yazı istiyorsak:

Kod:
h2 { font-size: 14px; }

Varsayılan yazı tipinin %150 fazlasını EM ile belirtirsek:
Kod:
h2 { font-size: 1.5em; }


Yukarıdaki örneği yüzde ile ifade etmek isteseydik:
Kod:
h2 { font-size: 150%; }

font-style: İtalik (Sağa Yatık) Yazmak
Yazımızın sağa yatık (italic) olması için aşağıdaki kodu kullanabiliriz.

Kod:
h2 { font-style: italic; }


Eğer italik bir yazıyı iptal edeceksek aşağıdaki kodu yazmalıyız:

Kod:
h2 { font-style: normal; }


font-weight: Kalın Yazmak
Yazımızın kalın (bold) olmasını istiyorsak aşağıdaki kodu kullanmalıyız.

Kod:
h2 { font-weight: bold; }


Eğer kalın bir yazıyı normal haline dönüştüreceksek aşağıdaki kodu yazmalıyız:

Kod:
h2 { font-weight: normal; }

CSS Bağlantılar


Sitenizdeki bağlantıları CSS kullanarak şekillendirmek için bazı özel eklerden faydalanılır.

Bir bağlantı dört farklı şekilde stillendirilebilir. Bunlar:

a:link - Normal link görünüşü
a:visited - Ziyaret edilmiş siteye giden link görünümü
a:hover - Fare ile üzerine gelindiğindeki görünüş
a:active - Tıklanılan andaki görüntüsü

Yukarıdaki tüm süreçler için biçimlendirme yapmamız mümkün:

Kod:
a:link {color:#FF0000;}      /* ziyaret edilmemiş */
   a:visited {color:#00FF00;}  /* ziyaret edilmiş */
   a:hover {color:#FF00FF;}  /* fare üzerindeyken */
   a:active {color:#0000FF;}  /* aktifken */


Yukarıdaki bağlantı biçimlerini sıralarken uymamız gereken bir sıra vardır. Bu sıraya uyulmazsa bağlantı görünümleri doğru çalışmayabilir.

a:hover her zaman a:link ve a:visited den SONRA gelmeli.
a:active her zaman a:hover dan SONRA gelmeli.


CSS Listeleme


Listelerde kullandığımız madde imlerini biçimlendirirken CSS'den faydalanabiliriz.

CSS üç bakımdan işimize yarar:

Sıralı listelerdeki numaraların görünüşünü değiştirebiliriz.
Maddelenmiş listelerdeki imlerin şekillerini değiştirebiliriz.
Madde imi yerine belirlediğimiz bir resim kullanabiliriz.

Listelerde biçimlendirme yaparken sıklıkla kullanılan komutlar:

list-style-type
list-style-image
list-style-position
list-style (Birleştirilmiş)

list-style-type: Listeleme Şekli Tipi
Bir listenin stilini belirlememizi sağlar. Aşağıdaki örnekte madde işaretleri kare (square) olacaktır:

Kod:
ul { list-style-type: square; }


Aşağıdaki şekilde görünecektir:

HTML Görünümü
Listeleme Şekilleri

Maddelenmiş Liste
Numaralanmış Liste


UL (maddeli) ve OL (numaralı) listelerde farklı farklı stiller kullanılabilir.

Örneğin numaralı listemizdeki numaraların roma rakamı olmasını istiyorsak:
Kod:
ol.a { list-style-type: upper-roman; }

Alfabedeki küçük harflerin listelenmesini istiyorsak:
Kod:
ol.b { list-style-type: lower-alpha; }


İçi boş daireleri madde imi yapmak istiyorsak:
Kod:
ul.c { list-style-type: circle; }

Görüldüğü gibi birçok şekli var. Kullanabileceklerinizin tamamı:

OL (numaralı liste) için: armenian, decimal, decimal-leading-zero, lower-alpha, lower-greek, lower-latin, lower-roman, none (boş bırak), upper-alpha, upper-latin, upper-roman.

UL (maddeli liste) için: circle (içi boş yuvarlak), disc (yuvarlak), square (kare), none (boş bırakır - göstermez).

list-style-image: Madde İşareti Yerine Resim Kullanmak
Küçük bir resim belirterek onun madde imi yerine kullanılmasını sağlayabiliriz.
Kod:
ul { list-style-image: url('madde.gif'); }



Bu durumda madde.gif resmi her maddenin başında kullanılacak madde imimiz olacaktır.

list-style-position: Madde İmi Nerede Olacak?
Madde iminin maddenin içinde mi dışında mı olacağını belirtir. inside içinde, outside dışında olacak demektir.

Kod:
ul { list-style-position: inside; }

Bu durumda madde.gif resmi her maddenin başında kullanılacak madde imimiz olacaktır.

list-style: Kısa Yoldan Kullanım
Yukarıda belirtilen tüm özellikleri tek bir kod ile de kullanabiliriz. Aşağıdaki örneğe bakalım:
Kod:
ul { list-style: square url("madde.gif"); }


Örneğe bakılırsa madde imimiz kare biçimli olacak ve üzerine madde.gif işlenecektir. Yani önce list-style-type belirttik sonra list-style-image belirttik.


CSS Tablolar


CSS Aşağıdaki gibi tablolarınızda farklı renk ve tasarımlar kullanmanıza olanak sağlar:

Dil Neden Lazım?
HTML Temel web sayfası yapım bilgisi
CSS Siteyi görselleştirme
PHP, ASP İşlevsel siteler yapmak
MySQL Verileri yönetmek

Tablolarla ilgili bilmeniz gereken komutlar:

border
border-collapse
width ve height

NOT: Tablolarda nesneler hücrelerde yer alır. HTML'de hücreler TD elementi ile belirtilir. Dolayısıyla aşağıda anlatılan kodların çoğu TD elementine yöneliktir.

border: Kenarlık
Bu konu hakkında detaylı bilgi almak için buraya tıklayın.

İlgili sayfada bilgi aldıktan sonra tarayıcınızın GERİ butonu ile tekrar bu sayfaya gelerek derse devam edebilirsiniz.

border-collapse: Kenarlıkları Kaldır
Tablo özelliği olarak bunu belirtirsek tablonun varsayılan kenarlıkları görülmeyecektir.

Kod:
table.tablom { border-collapse: collapse; }

width/height: Tablo Genişliği ve Yüksekliği
Tablo ve tablo hücreleri için genişlik (width) ve yükseklik (height) belirtmemizi sağlar.
Kod:
td.hucre1 { width: 100px; height: 200px; }
      td.hucre2 { width: 400px; height: 100px; }


Yukarıdaki örnekte hucre1 adlı hücre 100 piksel genişlik ve 200 piksel yüksekliğe sahipken, hucre2 400 piksel genişlik ve 100 piksel yüksekliğe sahiptir.

Diğer Tablo Şekillendirme Komutları
text-align: Tablo içindeki yazıların hizasını belirlersiniz.

padding: Tablo içinden belirtilen değerde boşluk verdirir.

background-color: Arkaplan rengini belirtir.

color: Yazı rengini belirtir.

CSS Kutu Modeli


Bir HTML nesnesi kutu gibi davranabilir. İşte bu kutu şekilli tasarım modeline CSS Kutu Modeli diyoruz.

Kutu modelinde size tanıtacağımız dört özellik var:

Margin - Kenarlığın çevresinde verilen boşluk.
Border - Kenarlık
Padding - Kenarlık ile içerik arasındaki boşluk. Arkaplan rengine boyanır.
Content (İçerik)



Yukarıda CONTENT içeriğin bulunduğu kısımdır. İçerik ile kenarlık arasında verdiğimiz boşluk padding, kenarlıktan sonra vereceğimiz boşluk ise margin olarak adlandırılır.

Bir Elementin Genişlik ve Yüksekliği
İçerik alanının genişliği width ve yüksekliği height özelliği ile ayarlanır.

Kod:
.kutum {
      width:250px;
      padding:10px;
      border:5px solid gray;
      margin:10px;
   }


Yukarıdaki örnekte genişlik (width) 250 piksel olarak ayarlanmıştır. Peki HTML dosyamızda da bu elementin kaplayacağı alan 250 piksel mi olacaktır? Tabiki HAYIR!

Şimdi hesaplayalım:

250 piksel = Genişlik
20 piksel = Sağdan ve Soldan İç Boşluk (padding 10x2)
10 piksel = Sağ ve Sol Kenarlıklar (border 5x2)
20 piksel = Sağ ve Sol Dış Boşluk (margin 10x2)
300 piksel = Toplam Genişlik

Kısacası kodlama yaparken genişliği iyi hesap etmek için boşluk, kenarlık ve içerik genişliği toplanarak hesaplanmalıdır.

Yüksekliği hesap ederken width değeri yerine height değeri ve boşluk, kenarlıklar toplanarak hesap edilmelidir.

Şimdi dış boşluğu 20 piksel, iç boşluğu 5 piksel, kenarlığı 3 piksel ve genişliği 300 piksel olan bir kutu oluşturalım:

CSS Kodumuz:

Kod:
.kutum {

      /* Dış boşluk */
      margin: 20px;

      /* Kenarlık */
      border: 3px black solid;

      /* İç boşluk */
      padding: 5px;

      /* Genişlik */
      width: 300px;

   }

Şimdi bu tablomuzun nasıl göründüğüne bakalım:

Vazgeç gönlüm sen bu aşktan!
Sana kıymet veren mi var?

Yukarıdaki kutumuzun toplam genişliği (20x2)+(3x2)+(5x2)+300 = 356 dır.

Tarayıcı Uyumluluğu
Bazı eski tarayıcılar sitenizi hazırladığınızdan farklı gösterebilir. Bu sorunla karşılaşma nedeniniz sayfanızın başında DOCTYPE kullanmamanız olabilir. Bu nedenle uyumluluk için aşağıdaki kodu mutlaka sayfa kodlarınızın başında kullanın.
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


CSS Kenarlıklar (Border)


Bir HTML elementinin kenarlarına çizgi çekerken kullanacağımız kodlar şunlardır:

Kod:
border-style
    border-width
    border-color
Ayrıca bunlarla birlikte şu konularda da bilgi vereceğiz:

Kenarları ayrı ayrı şekillendirmek
Kenarlık kullanımının kısa yolu

border-style: Kenarlık Stili
Kenarların görünüşünün nasıl olacağı ile ilgili bilgi vermemizi sağlar.

Kullanabileceğiniz stiller:

Kod:
none - Kenarlık yok
dotted - Noktalı
dashed - Kesik çizgili
solid - Çizgi
double - Çift çizgi
groove
ridge
inset
outset
Örnek bir kullanım:

Kod:
.kutum { border-style: dotted; }

border-width: Kenarlık Boyutu
Kenar genişliğini belirtmemizi sağlar. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Örnek bir kullanım:

Kod:
.kutum { border-style: solid; border-width: 1px; }

border-color: Kenarlık Rengi
Kenarlık rengini bu komutla değiştirebiliriz. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Renk kullanımı hakkında bilgi için buraya tıklayın.

Örnek bir kullanım:

Kod:
.kutum {
      border-style: solid;
      border-width: 1px;
      border-color: #0000CC;
   }

Kenarları Ayrı Ayrı Şekillendirmek
İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendirebiliriz.

Kod:
border-left-style - Sol kenarın şekli.
    border-right-style - Sağ kenarın şekli.
    border-top-style - Üst kenarın şekli.
    border-bottom-style - Alt kenarın şekli.
Ayrıca border-style dört kenarın değerini de alacak şekilde yazılabilir. Örneğin:

border-style: dotted solid double dashed;

Kod:
Üst kenar - dotted,
Sağ kenar - solid,
Alt kenar - double,
Sol kenar - dashed.
Farkettiyseniz border-style yazdıktan sonra sırasıyla saat yönünde kenarları ayrı ayrı belirttik.

border-style: dotted solid double;
Kod:
Üst kenar - dotted,
Sağ ve Sol kenar - solid,
Alt kenar - double,
Bu kullanımda 4. kenarı yazmadık. Bu kenar solu işaret ettiği için tam tersi olan Sağ taraftaki özelliği alacaktır.

border-style: dotted solid;

Üst kenar ve alt kenar - dotted,
Sağ ve Sol kenar - solid,
Bu kullanımda Yukarı - Aşağı kenarlar ilk yazılan dotted, Sol ve Sağ kenarlar ikinci yazılan solid biçiminde olacaktır.

Kenar Belirtmenin Kısa Yolu
Sadece border kullanarak da border-width, border-color ve border-style değerlerini belirtmemiz mümkün. Örneğe bakalım:

Kod:
.kutum {
      border: 1px #0000CC solid;
   }



Buradaki örnekte yer alan üç kodu tek bir kodda birleştirdik. Sırasıyla önce border-width değerini yazdık, sonra border-color ve en son border-style ile üç özelliği birlikte kullandık.

Bu kısayolu da kenarlara ayrı ayrı uygulamanız mümkün. Bu komutlar:

Kod:
border-left - Sol kenar
    border-right - Sağ kenar
    border-top - Üst kenar
    border-bottom - Alt kenar


CSS Dış Kenarlık (Outline)


İstiyorsak kenarlığın dışında bir kenar daha çizebiliriz. Bunun için outline komutunu kullanıyoruz. Üç özelliği var:

Kod:
outline-style
    outline-width
    outline-color
outline-style: Kenarlık Stili
Dış kenarlığı burada belirtilen şekillerde çizmemizi sağlar.

outline-width: Kenarlık Boyutu
Piksel olarak dış kenarlık boyutunu belirtmemizi sağlar.

outline-color: Kenarlık Rengi
Kenarlığın rengini belirlememizi sağlar.

Dış Kenarlığın Kısa Kullanımı
Yukarıda sayılan tüm özellikleri tek bir outline koduyla belirtebiliriz.

Kod:
.kutu1
   {
      outline-width: 1px;
      outline-color: black;
      outline-style: solid;
   }
Kod:
.kutu2
   {
      outline: 1px black solid;
   }


Yukarıda yer alan kutu1 stilinde bu sayfadaki özellikler tek tek kullanılmıştır. Ancak kutu2 stilinde tek bir kod ile yine aynı stil sağlanmıştır.

CSS Dıştan Boşluk (Margin)

margin özelliği bir HTML elementinin çevresi ile ona komşu başka bir HTML elementi arasında belirtilen miktarda genişletip boşluk yaratır. Bu boşluk kenarlığın dışında olacağı için dış kenarlık diyoruz.

Dış kenarlığı belirlerken üst, sol, alt ve sağ için ayrı ayrı belirlenebileceği gibi tek bir css koduyla da bunlar hızlıca belirlenebilir.

Tüm margin komutları:

Kod:
margin - Hızlı kullanım
    margin-top - Üstten boşluk
    margin-right - Sağdan boşluk
    margin-bottom - Alttan boşluk
    margin-left - Soldan boşluk
Alabileceği değerler:
Kod:
auto - Kenarlıklar tarayıcı tarafından otomatik ayarlanır
    px - piksel olarak boşluk belirtme
    % - İçerik genişliğine göre oranlar
Ayrı Ayrı Dış Boşlukları Ayarlamak
Üst, sağ, alt ve sol boşlukları ayrı ayrı ayarlanabilir. Bunun için margin komutuna araya tire (-) koyarak ilgili yönün ingilizcesini yazıyoruz.

Kod:
.stilim
   {
      margin-top: 10px;
      margin-bottom: 10px;

      margin-left: 20px;
      margin-right: 20px;
   }


Yukarıdaki örnekte üst ve alt boşluklar 10 piksel yüksekliğinde, sağ ve sol boşluklar 20 piksel genişliğinde olacaktır.

Dış Boşlukları Ayarlamanın Kısa Yolu
Sadece margin kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:

Kod:
.stilim
   {
      /* Açıklama: margin: [üst] [sağ] [alt] [sol] */

      margin: 10px 20px 10px 20px;
   }

Yukarı ve alt değeri ile Sağ ve sol değeri aynı olan ifadelerde şu şekilde de kullanabileceğimizi unutmayalım:

Kod:
.stilim
   {
      /* Açıklama: margin: [üst|alt] [sağ|sol] */

      margin: 10px 20px;
   }

Yazdığımız bu kod, bir önceki yazdığımız kod ile aynı işlevi görecektir.

CSS İçten Boşluk (Padding)

padding özelliği bir HTML elementinin kenarlarının içinde bir boşluk yaratmamızı sağlar.

Kenardan içerdeki bu boşlukları belirlerken üst, sol, alt ve sağ için ayrı ayrı belirlenebileceği gibi tek bir css koduyla da bunlar hızlıca belirlenebilir.

Tüm padding komutları:

Kod:
padding - Hızlı kullanım
    padding-top - Üstten boşluk
    padding-right - Sağdan boşluk
    padding-bottom - Alttan boşluk
    padding-left - Soldan boşluk
Alabileceği değerler:
Kod:
genişlik belirtme - px, em, pt gibi ölçülerle genişliği belirtme
    yüzde kullanma (%) - İçerik genişliğine göre oranlar
Ayrı Ayrı İç Boşlukları Ayarlamak
Üst, sağ, alt ve sol boşlukları ayrı ayrı ayarlanabilir. Bunun için padding komutuna araya tire (-) koyarak ilgili yönün ingilizcesini yazıyoruz.

Kod:
.stilim
   {
      padding-top: 10px;
      padding-bottom: 10px;

      padding-left: 20px;
      padding-right: 20px;
   }

Yukarıdaki örnekte üst ve alt boşluklar içerden 10 piksel yüksekliğinde, sağ ve sol boşluklar içerden 20 piksel genişliğinde olacaktır.

İç Boşlukları Ayarlamanın Kısa Yolu
Sadece padding kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:

Kod:
.stilim
   {
      /* Açıklama: padding: [üst] [sağ] [alt] [sol] */

      padding: 10px 20px 10px 20px;
   }

Yukarı ve alt değeri ile Sağ ve sol değeri aynı olan ifadelerde şu şekilde de kullanabileceğimizi unutmayalım:

Kod:
.stilim
   {
      /* Açıklama: padding: [üst|alt] [sağ|sol] */

      padding: 10px 20px;
   }


Yazdığımız bu kod, bir önceki yazdığımız kod ile aynı işlevi görecektir.

Padding ve Margin'in farkı ile ilgili buradan bilgi alabilirsiniz.

CSS Gruplama ve Üzerine Yazma

Gruplama
Birden fazla stilde sıklıkla kullanılan CSS komutları varsa, bunları toplu olarak yazıp özelliği bir kez yazma şansına sahibiz. Buna gruplama diyoruz. Örneğe bakalım:
Kod:
h1 { color: green; }
   h2 { color: green; }
   p { color: green; }

Yukarıda görüldüğü gibi üç element için de tek bir özellik belirtilmiş. Bu da rengin yeşil olması. Bu kodu kısaltmak için element ve stil adlarını aralara virgül gelecek şekilde sıralayabiliriz. Şöyle ki:
Kod:
h1, h2, p { color: green; }


Verdiğimiz elementlerin tamamı yeşil renkli görünecektir.

Üzerine Yazma
Bazen tüm elementleri kapsayacak kodlar yazarız. Ancak bir ya da birkaç element bundan farklı olmalıdır. İşte bu durumda tüm elementlerde geçerli olan özellikleri değiştirmemiz gerekebilir.

Şu şekil bir HTML kodumuz olsun:

Kod:
<p>Bu bir paragraf</p>

   <p>Bu da bir paragraf ancak farklı bir stili olacak</p>

   <p>Bu da bir paragraf ve 1. paragraf ile aynı olacak</p>


Tüm P elementleri için genel özellikleri belirledikten sonra, farklı olmasını istediğimiz 2. paragraf özelliklerini yeni bir stil adı oluşturarak yazıyoruz. Geriye kalan ilgili paragrafa class="stil_adı" eklemek olacaktır.

Kod:
p {
      font: 10pt Tahoma;
      color: gray;
   }
   .kirmizi p {
      color: red;
   }

Yukarıdaki kısım incelendiğinde tüm <P> elementleri 10 punto Tahoma ve gri olacaktır. Ancak class belirtip kirmizi yazdığımız P diğerlerinden farklı olarak kırmızı renkli olacaktır.

Kod:
<p>Genel stile sahip paragraf</p>

   <p class="kirmizi">Kırmızı renkli olacak paragraf</p>

   <p>Diğer bir genel stile sahip paragraf</p>

CSS Sınırlamalar

Genişlik ve Yükseklik
Bir nesnenin genişliğini width, yüksekliğini height kodu kullanarak belirleriz. Alacağı değer piksel, punto, Yüzde gibi bir ölçü değeri olacaktır.

Kod:
.kutu {
      width: 400px;
      height: 400px;
   }

Bu stili kullandığımız element 400x400'lük bir alanda yer alacaktır.

En Düşük Genişlik ve Yükseklik Değeri
Bir nesnenin minimum yani en düşük sahip olmak zorunda olduğu genişlik için min-width, yükseklik için min-height kodlarından faydalanırız.

Kod:
.kutu {
      min-width: 100px;
      min-height: 100px;
   }


Yukarıdaki örnekte elementin sahip olduğu yükseklik ve genişlik 100 pikselden düşük olursa otomatik olarak 100 piksele büyütülecektir.

En Yüksek Genişlik ve Yükseklik Değeri
Bir nesnenin maksimum yani en fazla sahip olabileceği genişlik için max-width, yükseklik için max-height kodlarından faydalanırız.

Kod:
.kutu {
      max-width: 500px;
      max-height: 200px;
   }

Örneği incelersek bu stile sahip bir HTML elementinin genişliği 500 pikseli, yüksekliği 200 pikseli aşamaz. Aşarsa özelliklerin uygulanmadığı başka bir alana taşacaktır. İstenirse sonraki konularda göreceğiniz overflow özelliği ile taşan kısmın gösterilmesi engellenebilir.

CSS Gösterme - Gizleme

Bazen HTML elementlerini kullanıcıdan gizlemek gerekebilir. Bir nesnenin görünme şekli ve gizlenmesini display komutu kullanarak yaparız.

Bir Elementi Gizlemek/Göstermemek
Bunun için kullanabileceğimiz iki kalıp ifade var:

visibility: hidden; - Element gizlenir ancak elementin sahip olduğu alan boşluk şeklinde sayfada görünecektir.
display: none; - Element gizlenir ve sahip olduğu alan da sayfada gösterilmez ve yer kaplamaz.

Block (Kutu) ve Inline (Satıriçi) İfadeler
Bir HTML elementi kutu yapısında olabilir. Bu durumda sayfada bulabildiği tüm genişliği kullanan bir kare alan kaplayacaklardır. DIV, P, H1 elementleri bu tarz elementlerdir.

Bazı elementler ise satır içinde sadece başladığı ve bittiği yere kadar alan kaplar. Bunlarsa satıriçi (inline) elementlerdir.

Bir Elementin Kutu Ya Da Satır İçi Olmasını Sağlamak
Element stiline display'ı kullanarak ekleyeceğimiz şu özellikler HTML elementinin kutu mu yoksa satır parçası mı olacağını belirtmemizi ve değiştirmemizi sağlar:

display: block; - Element kutu şeklinde alan kaplayacaktır. Kullanıldığı anda yeni bir satırdan başlar.
display: inline; - Element satır içinde yer alacaktır. Kullanıldığı satırda devam edecektir.

Element özelliklerini değiştirmekle ilgili iki örnek verelim. İlk örneğimizde aslında BLOCK (kutu) tarzı olan LI elementini satır içi ifadeye dönüştürüyoruz:

.kutu {

li { display: inline; }

span { display: block; }

}



Yukarıdaki ikinci örnekte ise aslında satır içi özelliğe sahip SPAN elementi BLOCK (kutu) yapısına dönüştürülmüştür.

CSS Pozisyon Belirleme (position)

CSS aynı zamanda HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlar. Bir HTML elementini diğerinin altına ya da üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına karar verebilirsiniz.

Tüm elementler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Ancak bu özellikler CSS'deki position özelliği belirtilmemişse işe yaramayacaktır. Ayrıca birbirinden farklı dört pozisyon belirleme yöntemi vardır. Bunlar:
Kod:
static - Hiçbir özellik belirtilmediyse
    fixed - Sabit, tarayıcıya göre hareket etmeyen element
    relative - Normal olması gereken pozisyona göre konum belirlemek
    absolute - Koordinat belirleyerek sayfada bir yere yerleştirmek
static: Olması Gerektiği Gibi Bırakmak
Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi sıralanacaktır. Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri belirlenemez.

fixed: Sabitlemek
Bir HTML elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez).

Kod:
p.fixed
   {
      position: fixed;

      top: 30px;
      right: 5px;
   }

Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.

relative: Normal Pozisyona Göre Konumlama
Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz. Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.

Kod:
h2
   {
      position: relative;

      left: -20px;
   }

Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola kayacak ve oradan başlayacaktır. Bu durumda diğer elementlerin alanına girebilecektir.

absolute: Herhangi Bir Konum Belirleme
Herhangi bir elemente göre ya da element belirtilmediyse tüm HTML sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2 elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150 piksel altında (100, 150) olmasını istiyorsak:

Kod:
h2
   {
      position: absolute;

      left: 100px;
      top: 150px;
   }


Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir.

z-index: Elementin Önceliğini Belirlemek
Nasıl Photoshop tarzı programlarda katmanlarla çalışılıyor ve katmanların sırası belirlenebiliyorsa, CSS'de de z-index özelliği ile bunu belirleyip bir HTML elementinin diğerinin üzerinde ya da altında görünmesini sağlayabiliriz.

Kod:
img
   {
      position: absolute;

      left: 0px;
      top: 0px;

      z-index: -1;
   }

Yukarıda -1 değeri ile belirttiğimiz resim diğer tüm elementlerin altında görünecektir. Çünkü diğer elementlerde bu değer belirtilmediyse 0 (sıfır) olarak algılanacaktır. Buna karşın bu element -1 olduğu için alt katman kabul edilecektir.

Negatif değerler en alt katmanı pozitif değerler üst katmanları ifade eder. Örneğin biri -2 biri -5 olan iki z-index özelliğine sahip elementten daha büyük olan -2 özelliğine sahip element daha üstte görünecektir.

CSS Kaydırma (float)

Katmanlarla çalışmak ve resim galerileri oluşturmak için HTML elementlerini sağa ve sola doğru kaydırmamız gerekebilir. İşte css kodu float bunu yapmamızı sağlıyor:

Elementler Nasıl Kaydırılır?
Elementler yatay yönde sağa ve sola doğru kaydırılabilir. Yani aşağı doğru kaydırma söz konusu değil.

Kaydırılan element, sağ ya da soldaki elementin sağından veya solundan başlar. Yeni kaydırılan elementler, ilk önce kaydırılan elementten sonra gelir. Dolayısıyla önceden kaydırılmış elementlerde bir değişiklik olmaz.

Örneğin bir resim için float: right; özelliği belirttiysek yazılar sağ tarafta yer alacak bu resmin solunda yer alacaktır.

Elementleri Yan Yana Sıralamak
Resim galerilerini görmüşsünüzdür. Resim sayfalarına giden küçük görüntüler sayfada yan yana sıralanırlar. Bunlar birbirine eşit olmalı ki kaydırıldığında birbiriyle uyumlu olsunlar. Örneğin küçük görüntümüz:

Kod:
.thumb
   {
      float: left;

      width: 110px;
      height: 110px;

      margin: 5px;
   }

Yukarıdaki örnek kodda yer alan özelliğe sahip resimleri sıraladık. Görüldüğü gibi her biri diğerinin sağına kaydırıldı ve aralara 5x2 (sağ, sol) piksellik boşluk (margin) verildi. Sığmayan nesneler ise bir aşağı satıra kaydırıldı.

Kaydırmayı Sonlandırmak
clear: both; kodu artık kaydırmanın sonlandığını ve bundan sonra geçerli olmayacağını bildirmemize yarar.

Kod:
.text_line
   {
      clear: both;
   }


Kaydırmalı bir nesnenin hemen ardından class="text_line" kullanılmış bir element yer alıyorsa, bu element kaydırma olayının dışında tutulacak ve normal şekilde sayfaya yerleştirilecektir.

CSS Hizalama (align)

Kutu Özellikli Elementlerin Hizalanması
Daha önceki derslerimizde bazı HTML elementlerinin kutu bazılarının satır içi olduğundan söz etmiştik (bak. CSS Display).

Kutu özellikli nesnelerde hizayı ayarlamak için text-align kullanılabilir.

Fakat bu dersimizde farklı yollardan nasıl hizalama yapılır bundan bahsedeceğiz.

Margin Kullanarak Ortalamak
Kutu özellikli elementler sağ ve sol dış boşluk (margin) değerleri auto yapılarak ortalanabilir. Tarayıcı bu durumda sağ ve sol boşlukları kendi ayarlayacağı için yazı ortalanacaktır. Ancak bu durumda genişlik yani width hiçbir zaman 100% olmamalıdır. Aksi takdirde kenarlık tarayıcı tarafından ayarlanamaz. Örneğe bakalım:

Kod:
.center
   {
      margin-left:auto;
      margin-right:auto;

      width:70%;

      background-color:#b0e0e6;
   }

Yukarıdaki örnek çalıştırıldığında tarayıcı otomatik olarak 15% sola 15% sağa boşluk verir ve genişliğe göre bunu oranlar.

Position Kullanarak Sağa ve Sola Yaslamak
Normal akıştan farklı olacak bir position: absolute; kodu kullanarak belirttiğimiz genişlikte bir kutunun sağa ya da sola yaslanmasını sağlayabiliriz. Örneğin 500 piksellik bir kutuyu sağa yaslamak isteseydik:

Kod:
.center
   {
      position: absolute;

      right; 0px;

      width: 500px;

      background-color:#b0e0e6;
   }

Sağdan 0 piksel boşluk bırakılacağını right: 0px; ile belirtmiş olduk.

Float Kullanarak Sağa ve Sola Yaslamak
Float HTML elementlerini sağa veya sola kaydırarak listelememizi sağlar. Kaydırma özelliğini hizalamak için kullanabiliriz:
Kod:
.right
   {
      float: right;

      width: 300px;

      background-color:#b0e0e6;
   }

Kod çalıştığında 300 piksellik bir kutu sağa yaslanmış olacaktır.

CSS Özel İfadeler (Pseudo)

ElementLerin Alt Özellikleri
HTML'de A kodu belli durumlarda belli stiller alabilir. Örneğin fare ile üzerine gelindiğinde (hover) veya ziyaret edildiğinde (visited) farklı farklı stiller kullanmak gerekebilir. İşte bu tarz kullanımlar CSS nin özel kullanımlarıdır.

Pseudo Class olarak ifade edilen bu kullanımda seçimden hemen sonra iki nokta (Smile kullanılır ve alt özellik belirtilir. Örneğin aşağıdaki kod tüm linklerin tüm alt özellikleri için geçerli olacaktır:

Kod:
a { color: #FF0000; }

Ancak aktifken, üzerine gelindiğinde ya da ziyaret edilmişse nasıl görüneceğini ayrı ayrı şu şekilde belirtebiliriz:

Kod:
a:link {color:#FF0000;}    /* ziyaret edilmemiş */
      a:visited {color:#00FF00;} /* ziyaret edilmiş */
      a:hover {color:#FF00FF;}   /* fare üzerinde */
      a:active {color:#0000FF;}  /* seçilmişse */

Eğer kendi belirlediğimiz bir stilde bu alt özellikleri biçimlendireceksek elementten sonra stil adını nokta ile ayırarak yazmalıyız:

Kod:
a.kirmizi:visited {color:#FF0000;}

İlk Elemente Özel Stil Belirleme
Aynı elementten birden çok kullandığımız bir yerde sadece ilk elementin diğer elementlerden farklı görünmesi için first-child alt özelliğini kullanırız. Örneğe bakalım:

Kod:
<html>
<head>
<style type="text/css">
    p:first-child i { color:blue; }
</style>
</head>

<body>
  <p>Ben <i>güçlü</i> biriyim. Ben <i>güçlü</i> biriyim.</p>
  <p>Ben <i>güçlü</i> biriyim. Ben <i>güçlü</i> biriyim.</p>
</body>

</html>

Yukarıdaki kodu bir not defterine yapıştırıp sonunu .html olarak kaydedin ve açın. Göreceksiniz ilk "güçlü" yazısı mavi renkle yazılmış. Bunu diğer tüm elementlerde de kullanmanız mümkündür.

CSS Transparanlık (opacity)

CSS kullanarak kolaylıkla resimlerinize şeffaflık (transparanlık) özelliği verebilirsiniz.

Transparan Resim Yaratmak
CSS3'de yer alan opacity kodu resmin şeffaflık oranını ayarlamamızı sağlar:



Kod:
img
   {
      /* Transparanlık oranı 40% */
      opacity: 0.4;

      /* IE8 ve aşağısındaki tarayıcılarda sorun çıkmaması için */
      filter: alpha(opacity=40);
   }

Yukarıda dikkat edildiyse iki kez 40% olduğunu belirttik. Birinci opacity kodumuz tüm güncel tarayıcılar için geçerli. Ancak bu kod Internet Explorer 8 ve aşağısında görüntülenmez. Bu sorunu düzeltmek için IE8 ve aşağı browserların anlayacağı tarz ikinci bir kod yazdık: filter: alpha(opacity=40); Buradaki 40, %40 ı ifade eder.

Fareyle Resmin Transparanlığını Değiştirmek


Kod:
img.stil { opacity: 0.5; filter: alpha(opacity=50); }

   img:hover.stil { opacity: 1.0; filter: alpha(opacity=100); }


Arkaplan Üzerinde Transparan Yazı

"Sevdiği kızı bırakıp gurbete gitmişti genç. Fakat aradan geçen yıllar sevgisinde hiç bir azalışa neden olmamıştı.Yıllar sonra döndügünde sevdiğinden şu sözleri işitti:"A gönlüme hükmeden. Bunca yıl geçti, yolunu gözledim. Ne bir haber, ne bir mektup?!. Meğer ne kadar vefasızmışsın?."

Bunun üzerine genç başını önüne eğdi, gözlerinden yaşlar akarken cevap verdi:" Ey sevgili! yüzünü görmek benim için uğruna ölünecek bir hasret iken, o şerefi postacıya mı bağışlasaydım?!"


HTML kodumuz ve stillerimiz:

Kod:
<html>
<head>
<style type="text/css">
   div.background {
      width:400px;
      height:330px;
      background:url('th_4.jpg') repeat;
      border:2px solid black;
   }
   div.transbox {
      width:300px;
      height:260px;
      margin:30px 50px;
      background-color:#ffffff;
      border:1px solid black;
      opacity:0.6;
      filter:alpha(opacity=60);
   }
   div.transbox p {
      margin:30px 40px;
      font-weight:bold;
      color:#000000;
   }
</style>
</head>

<body>

   <div class="background">
   <div class="transbox">
   <p>"Sevdiği kızı bırakıp gurbete gitmişti genç.
      Fakat aradan geçen yıllar sevgisinde hiç bir azalışa
      neden olmamıştı.Yıllar sonra döndügünde sevdiğinden
      şu sözleri işitti:"A gönlüme hükmeden. Bunca yıl geçti,
      yolunu gözledim. Ne bir haber, ne bir mektup?!. Meğer ne
      kadar vefasızmışsın?."<br /><br />
      Bunun üzerine genç başını önüne eğdi, gözlerinden yaşlar
      akarken cevap verdi:" Ey sevgili! yüzünü görmek benim
      için uğruna ölünecek bir hasret iken, o şerefi postacıya
      mı bağışlasaydım?!"
   </p>
   </div>
   </div>

</body>
</html>

CSS Çıktı Türleri (media)

Sitenizi farklı medya türlerinde (sayfa, ekran, tarayıcı) nasıl görüneceğini ayrı ayrı ayarlamanız için bir CSS kodu olan @media <çıktı türü> kodundan faydalanırız.

En çok kullanılan çıktı türleri:

Kod:
all - Tüm çıktı türlerinde geçerli
    print - Yazıcı tarafından içeriğin nasıl görüneceği
    screen - Bilgisayar ekranında nasıl görüneceği
    tv - Televizyonda nasıl görüneceği
Örneğin ekranda 14 punto Times New Roman ile görünen yazımızın yazıcıda (printer) 10 punto Arial ile görünmesini şu şekilde sağlayabiliriz:

Kod:
@media screen
   {
      p { font: 14pt Times New Roman; }
   }

   @media print
   {
      p { font: 10pt Arial; }
   }

   @media screen, print
   {
      p { font-weight: bold; }
   }

Yukarıdaki 3. örnekte font-weight: bold; ile yazının kalın olacağını belirtik ve bunun her iki tür (print, screen) için geçerli olacağı bilgisini araya virgül koyarak verdik.

CSS Özellik Seçimi (Attribute)


Element Özelliklerine Göre Stilleme
HTML dilinde elementler belli özellikler alabilmektedir. Örneğin HREF bir A elementi özelliğidir. İşte buradaki element özelliklerine göre stilleme yapmamız mümkün. Sadece iki özelliğe göre bunu yapamayız. Bunlar id ve class. Şimdi örneğe bakalım:

Kod:
[title]
      {
           color: red;
      }

Yukarıdaki kod title özelliğine sahip tüm elementlerin mavi renkli olacağını bildirir.

Kod:
[title=CSSSitesi]
      {
           color: red;
      }

Yukarıdaki kodda bir öncekinden farklı olarak sadece title özelliğinin değeri "CSSSitesi" olan mavi renkli olacaktır.

Birden fazla özellik değerine göre stilleme yapacaksak dikey çizgi (|) ile bunları ayırabiliriz:

Kod:
input[type="text"|type="password"]
      {
           color: blue;
      }

CSS'ye Genel Bakış


Bu çalışmamızda nasıl stiller yaratıp kontrol edebileceğiniz ve katmanlarla nasıl çalışabileceğiniz ile ilgili genel bilgiler verildi.

CSS'de nasıl arkaplan eklenir, yazı biçimlendirilir, kenarlıklar ayarlanır ve boşluklar nasıl verilir öğrendiniz.

Ayrıca elementlerin görünürlüğü, transparanlığı, boyutları, birbirinin üzerine yazılması ve bağımsız stiller yaratılması hakkında bilgiler edindiniz.

CSS ile ilgili öğrenmek istediğiniz başka bilgiler ve sorularınız için admin[at]venus.gen.tr mail adresini kullanabilirsiniz.

Artık CSS Biliyorsunuz, Ya Sonra?
Sıradaki çalışmamız JavaScript üzerine olacak.

JavaScript internet sayfalarını daha dinamik hale getirmekte size yardımcı olacaktır. JavaScript kullanıcının sayfada daha aktif olmasını sağlayarak sayfanızı işlevselleştirir. Tüm tarayıcılarla uyumludur.

Biz JavaScript ile ilgili bilgilerimizi bir web sayfasında derlerken siz de bu süreçte internette diğer JavaScript bilgi sitelerinden faydalanarak bu eksiğinizi giderebilirsiniz.

İyi çalışmalar

Kaynak :

css . sitesi . web . tr