CSS ÖĞRENİYORUM

13 yıl

Yüzbaşı

Konu Sahibi

Bismillahirrahmanirrahim

CSS'ye başlıyorum. hadi hayırlısı

CSS ile tek seferde birden çok web sayfasının stil ve düzenini değiştirebilriz.

<!DOCTYPE html> 
   
  <html> 
   
  <head> 
   
  <style type="text/css"> 
   
  body 
   
  { 
   
  background-color:red; 
   
  } 
   
  h1 
   
  { 
   
  color:blue; 
   
  text-align:center; 
   
  } 
   
  p 
   
  { 
   
  font-family:"Times New Roman"; 
   
  font-size:30px; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>CSS örnekleri</h1> 
   
  <p>bu bir paragraftır<p> 
   
  </body> 
   
  </html>

Bu örnekte sayfaların arka plan rengini h1 başlığının rengini ve paragraf için yazı tipi ve boyutunu nasıl ayarladığımızı görüyoruz .

sayfa içindeki tüm h1 başlıkların rengini ve tüm paragrafların yazı tipi ve boyutunu tek seferde head etiketi içinde ayarlamış olsuk.

alıntı

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil

Bir Daha Gösterme

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 11 Haziran 2012; 0:30:38 >

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

buraya yazdığım her kodu 1 den başlayarak kendi bilgisayarıma kaydedeceğim ilerde tekrar etmek istediğimde sırayla açıp hangi kodun neyi değiştirdiğini görmek iyi bir tekrar olacaktır. web programlamaya yeni başlayanlara tavsiye ederim.

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Giriş

CSS ye başlamadan önce HTML ve XHTML konusunda teml bilgilerimizin olması gerekir.

CSS Cascading Style Sheets açılımıdır.

Stiller HTML öğelerinin nasıl görüntüleneceğini belirler.

Harici stil sayfaları ile bir çok işi bir arada yapabilirsiniz.

Harici stil sayfaları CSS dosyaları içinde saklanır.

Farklı sayfalarınızı farklı stillerde göstermek için birden çok CSS kodu oluşturup hangi sayfayı hangi stille göstermek istiyorsanız sayfaya o stilin kodunu yerleştrebilirsiniz. Örneğin sitenizde 10 ayrı kategori var siz 10 farklı stil kodu yazıp herbirini farlı bir kategori için kullanabilirsiniz sanırım.( türkçeye tam çeviremediğim için böyle yazdım doğru değilse bile zamanla doğrusunu öğreniriz.)

Stiller büyük bir problemi çözmüş

HTML 3.2 de etiketler için font ve renk gibi özellikler eklendiğinde web programcıları için zor bir dönem başlamış .çünkü büyük sitelerin programcıları her sayfaya font ve renk gibi özellikleri eklemek zorunda kalmışlar. buda hem zaman hemde maddi yönden sıkıntı yaratmış .

World Wide Web Consortium (W3C) bu sorunu çözmek için HTML 4.0 da tüm biçimlendirme özelliklerini ayrı CSS dosyasında kaydedip bu sıkıntıyı ortadan kaldırmış.

Şu anda tüm tarayıcılar CSS ‘yi destekliyormuş.

Stiller harici .css dosyaları şeklinde kaydedilir.

Harici stil sayfaları ile sadece tek bir dosya düzenleyerek, bir Web sitesindeki tüm sayfaların görünümünü ve düzenini değiştirmek mümkündür.

alıntı

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 11 Haziran 2012; 0:31:23 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

Örnek 1

<!DOCTYPE html><html><head><style type=”text/css”> 
  body {background-color:yellow;} 
   
  h1 {font-size:36pt;} 
   
  h2 {color:blue;} 
   
  p {margin-left:50px;} 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>bu başlık 36 pt boyutundadır</h1> 
   
  <h2>bu yazı mavidir</h2> 
   
  <p>bu paragraf sol taraftan 50 piksel boşluk bırakarak başlamıştır</p> 
   
  </body> 
   
  </html>

Örnek 2

<!DOCTYPE html><html><head> 
    
   
  <style type=”text/css”> 
   
    
   
  body {background-color:tan;} 
   
    
   
  h1 {color:maroon;font-size:20pt;} 
   
    
   
  hr {color:blue;} 
   
    
   
  p {font-size:11pt;margin-left:15px;} 
   
    
   
  a:link {color:green;} 
   
    
   
  a:visited {color:yellow;} 
   
    
   
  a:hover {color:black;} 
   
    
   
  a:active {color:blue;} 
   
    
   
  </style> 
   
    
   
  </head> 
   
    
   
  <body> 
   
    
   
  <h1> başlık 1</h1> 
   
    
   
  <hr/> 
   
    
   
  <p>Bu yazının yukarıda kodlandığı gibi göründüğünü farkediyorsunuzdur.</p> 
   
    
   
  <p><a href=”http://www.webciftligi.com” target=”_blank”>Bu bir linktir</a></p> 
  </body> 
   
    
   
  </html>

CSS kodu iki bölümden oluşur.

< Resime gitmek için tıklayın >

h1 kısmı sayfanızın hangi kısmının özelliklerini belirleyeceğini belirtir.

Property özellik, value se değer demektir.

color rengi font_size ise font büyüklüğü belirler.

Her özellik değer çifti noktalı virgül ile biter ve bu çiftleri kıvrımlı parantez ile başlatır ve bitiririz.{ işareti için alt tuşuna basılı tutup 0123 ü tuşlayın } için ise yine alt tuşuna basılı tutup 0125 tuşlayın.

CSS Hatırlatma kodu

Css kodları açıklama amaçlı yazılar koyabilirsiniz.Sonradan kaynak kodunuzu düzenlerken size yardımı dokunabilir.

“/*” ile başlayıp ”*/” ile biter.

Örnek

/*Bu sonradan hatırlamayı kolaylaştırmak için yazılan bir nottur*/p {text-align:center;
/*Buda başka bir nottur*/
color:black;
font-family:arial;
}

Bu hatırlatma kodu sayfanızda görünmez sadece kaynak kodunu görüntülediğinizde görürsünüz.

Alıntıdır

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Id(kimlik) and Class(sınıf)

Id ve sınıf seçiciler

Bir HTML öğesi için bir stil ayarlamanın yanı sıra, CSS, “id” ve “sınıf” olarak adlandırılan kendi seçicilerinizi belirlemenizi sağlar.

Id seçici

Id seçici tek ve özgün bir eleman için bir stil belirlemede kullanılır.
Id seçici HTML öğesinin id özniteliğini kullanır ve bir “#” işareti ile tanımlanır.
Aşağıdak örneği nceleyebilirsiniz.

<!DOCTYPE html><html><head><style type=”text/css”>#para1 
  { 
   
  text-align:center; 
   
  color:red; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <p id=”para1″>Merhaba dünya!</p> 
   
  <p>Bu  paragraf stil özelliklerinden faydalanmaz.</p> 
   
  </body> 
   
  </html>

Id seçici adını herhangi bir numara ile başlatırsanız mozilla ve firefox ta çalışmazmış.

Sınıf seçici

Sınıf seçiciler bir grup için stil belirlemede kullanılır.Id seçicilerin aksine sınıf seçiciler birkaç öğe için birden kullanılır.
Birden çok html öğesi için belli bir stili ayarlamak için kullanılır.

<!DOCTYPE html><html><head><style type=”text/css”>.center 
  { 
   
  text-align:center; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1 class=”center”>Ortanlanmış  başlık</h1> 
   
  <p class=”center”>Ortalanmış paragraf.</p> 
   
  </body> 
   
  </html>

Ayrıca, sadece belirli HTML öğelerinin bir sınıf tarafından etkileneceğini belirtebilirsiniz.
Aşağıdaki örnekte, tüm p öğeleri class = “center” ile ortalanmıştır olacaktır:

<!DOCTYPE html><html><head> 
  <style type=”text/css”> 
   
  p.center 
   
  { 
   
  text-align:center; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1 class=”center”>Bu başlık  center özelliğinden etkilenmeyecektir</h1> 
   
  <p class=”center”>Bu  paragraf ortalanacaktır.</p> 
   
  </body> 
   
  </html>

Sınıf isimlerini rakamla başlatmayın bu sadece internet explorerda destklenmektedir.
Alıntıdır.

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 12 Haziran 2012; 21:39:58 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS ekleme

Tarayıcı bir stil sayfası okuduğunda belgeyi buna göre biçimlendirir.

Belgelerinize CSS eklemenin 3 yolu vardır.
Harici stil sayfası
Dahili stil sayfası
Satır içi stil

Harici Stil Sayfası
Harici stil sayfaları birden çok belgenin stilini değiştirmek için en uygun yöntemdir.
Harici bir stil sayfası ile, bir dosyayı değiştirerek bir web sitesinin tamamının görünümünü değiştirebilirsiniz.
Bunu yapmak için her sayfada < link> etiketini kullanarak stil sayfasına bağlantı vermeniz gerekir.

<link> etiketi <head> bölümüne yazılır:

<head> 
  <link rel=”stylesheet” type=”text/css” href=”benimstilim.css”/> 
  </head>

Harici bir stil sayfası, herhangi bir metin editörü ile yazılabilir.
Dosya herhangi bir HTML etiketi içermemelidir.
Stil sayfanız örnekstilim.css uzantısı ile kaydedilmelidir.
Bir stil sayfası dosyasının bir örneği aşağıda gösterilmiştir:

 
  hr {color:sienna;} 
  p {margin-left:20px;} 
  body {background-image:url(“images/örnek.gif”);}

Özellik değeri ve birimi arasına (margin-left:20 px)bir boşluk koymayın.Doğru yol: margin-left:20px

Dahili Stil Sayfası
Sadece bir sayfanın stil özelliklerini belirlemek istiyorsanız dahili stil sayfalarını kullanmanız gerekir.
Bunun için html sayfanızın head bölümünde style etiketi aşağıdaki örnekteki gibi kullanabilirsiniz:

<head> 
  <style type=”text/css”> 
  hr {color:sienna;} 
   
  p {margin-left:20px;} 
   
  body {background-image:url(“images/örnek.gif”);} 
   
  </style> 
   
  </head>

Satır içi stil
Satır içi stil kullanmak stil sayfalarını sağladığı bir çok avantajı kaybetmenize yol açabilirmiş.Bu nedenle mümkün olduğunca az kullanılmalıymış.
İlgili etiket içinde satır içi stil kullanmak için style özniteliğini kullanmanız gerekir.
Style özniteliği herhangi bir CSS özelliği içerebilir.
Aşağıdaki örnek bir paragrafın rengini ve sol kenar boşluğunun değerini nasıl ayarlayacağınızı gösterir:

<p style=”color:sienna;margin-left:20px”>Bu bir paragraftır.</p>

Çoklu Stil Sayfaları
Bazı özellikleri farklı stil sayfalarında aynı seçici için ayarlanmış ise, hangi stil sayfası daha spesifik ise o baz alınarak sayfa gösterilir.
Örneğin, harici bir stil sayfası h3 seçici için şu özelliklere sahipse:

h3 
  { 
  color:red; 
   
  text*alin:left; 
   
  font-size:8pt; 
   
  }

Ve bir dahili stil h3 seçici için şu özelliklere sahipse:

h3 
  { 
  text-align:right; 
   
  font-size:20pt; 
   
  }

Sayfa görüntülenirken dahili stil özellikleri daha spesifik olduğundan sayfa aşağıdaki özelliklere göre görüntülenecektir.

color:red;text-align:right; 
  font-size:20pt;

Dikkat ettiyseniz dahili stil sayfasında renk belirtilmediği için harici stil sayfasındaki renk değeri değişmedi ama text-align ve font-size değerleri dahili stil sayfasındaki şeklini aldı.

Alıntıdır.

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 12 Haziran 2012; 21:53:24 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS arka plan

CSS arka plan özellikleri bir öğenin arkaplan efektlerini tanımlamak için kullanılır.

Arkaplan efektleri için kullanılan CSS özellikleri:

background-color
background-image
background-repeat
background-attachment
background-position
Arkaplan Rengi

Background-color özelliği bir öğenin arka plan rengini belirtir.

<!DOCTYPE html> 
  <html> 
  <head> 
   
  <style type=”text/css”> 
   
  body 
   
  { 
   
  background-color:red; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>CSS sayfam</h1> 
   
  <p>CSS arkaplan rengi belirleme</p> 
   
  </body> 
   
  </html>

CSS de renk değerlerini aşağıdaki gibi kullanabilirsiniz.
HEX değeri – “#ff0000″ gibi
RGB değeri – “rgb(255,0,0)” gibi
Bir renk adı – “kırmızı” gibi

Bir kaç örnek;
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de}

Arkaplan Resmi

Arkaplan için herhangi bir resim kullanabilirsiniz.Bu imaj kullandığınız öğenin içinde gösterilir ve gerekiyorsa görüntü tekrarlayarak tüm alanı kaplar.

<!DOCTYPE html> 
  <html> 
  <head> 
   
  <style type=”text/css”> 
   
  body 
   
  { 
   
  background-image:url(‘örnekimaj.gif’); 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>selam millet</h1> 
   
  </body> 
   
  </html>

Arka plan için imaj kullanırken siteniz görüntülendiğinde içeriğinizin okunup okunmadığına dikkat edin.

Arka plan resmini yatay veya dikey tekrarlama
Varsayılan olarak, arka plan hem yatay hem dikey olarak tekrarlar ama hoş olmayan bir görüntüye sebep olabilir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  body 
  { 
  background-image:url(‘gradient.jpg’); 
  } 
  </style> 
  </head><body> 
  <h1>selam millet</h1> 
  </body></html>

Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için burayatıklayın.

Görüntü sadece yatay (repeat-x) olarak tekrarlanırsa, arka plan daha iyi görünecektir:

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  body 
  { 
  background-image:url(‘gradient2.png’); 
  background-repeat:repeat-x; 
  } 
  </style> 
  </head><body> 
  <h1>selam millet!</h1> 
  </body></html>

Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

Arka plan resminin konumu ve tekrarlanmaması

Arka plan resmi kullanırken yazılarınızı engellememesi ve tekrarlamaması için aşağıdaki örneğleri inceleyin.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style text=”type/css”> 
   
  body 
   
  { 
   
  background-image:url(‘tree.jpg’); 
   
  background-repeat:no-repeat; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <p>Arkaplan  resmi örneği</p> 
   
  <p>Arka plan resmi ile yazılanlar bir arada olduğu için kesişen yerleri okumak güçleşiyor.</p> 
   
  </body> 
   
  </html>

Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style text=”type/css”> 
   
  body 
   
  { 
   
  background-image:url(‘tree.jpg’); 
   
  background-repeat:no-repeat; 
  background-position:right top; 
  margin-right:200px; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <p>Arka plan resmi örneği</p> 
   
  <p>Arka plan resmini sağ üst köşeye yerleştirtik ve yazı ile resim arasına 200 
  pixellik bir boşluk bıraktığımız için sayfamızın görüntüsü bozulmadı.</p> 
   
  </body> 
   
  </html>

Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

Arka plan kestirme yolu

Yukarıdaki örneklerden de görebileceğiniz gibi, arka planlar ile ilgili dikkate alınması gereken pek çok özellik vardır.
Tek bir kod içerisinde birden fazla özellik belirtebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
   
  <style text=”type/css”> 
   
  body 
   
  { 
   
  background:yellow url(‘tree.jpg’) no-repeat right top; 
  margin-right:200px; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <p>Arka plan resmi örneği</p> 
  <p>Arka plan özelliklerini tek bir kod içinde belirlemiş olduk.</p> 
  </body> 
   
  </html>

Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

Kestirme özelliğini kullanırken özellik değerleri sırası
şöyledir:
background-color
background-image
background-repeat
background-attachment
background-position

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Metin

Metin rengi

CSS ile metin rengini ayarlayabiliriz.

Aşağıdaki özellik değer çiftlerini kullanabiliriz.

HEX değeri – “#ff0000″ gibi

RGB değeri – “rgb(255,0,0)” gibi

Bir renk adı – “red” gibi

<!DOCTYPE html><html><head><style type=”text/css”>body {color:red;}h1 {color:#00ff00;}p.örn {color:rgb(0,0,255);} 
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>Bu bir başlıktır</h1> 
   
  <p>Bu  normal bir paragraftır.Yazının kırmızı olduğuna dikkat edin.Varsayılan metin rengini body seçicisi belirler.</p> 
   
  <p class=”örn”>Bu örn sınıfı ile  belirtiğimiz şekilde görüntülenecek. Bu paragraf mavidir.</p> 
   
  </body> 
   
  </html>

Metin Hizalama
Text-align özelliği bir metnin yatay hizalamasını ayarlamak için kullanılır.
Metni ortalayabilir sağa veya sola yanaştırabilirsiniz.Birde justify diye bir özellik var ne olduğunu anlayamadım.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  h1 {text-align:center;} 
  p.date {text-align:right;} 
  p.main {text-align:justify;} 
  </style> 
  </head><body> 
  <h1>CSS text-align Example</h1> 
  <p class=”date”>May, 2009</p> 
  <p class=”main”>In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since. ‘Whenever you feel like criticizing anyone,’ he told me, 
  ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’</p> 
  <p><b>Note:</b> Resize the browser window to see how the value “justify” works.</p> 
  </body> 
  </html>

Text-decoration özelliği

Yazıların altını üstünü çizmek için bu özelliği kullanabilirsiniz.Aşağıdaki iki örneği inceleyebilirsiniz.

<!DOCTYPE html><html> 
    
   
  <head> 
   
    
   
  <style type=”text/css”> 
   
    
   
  a {text-decoration:none;} 
   
    
   
  </style> 
   
    
   
  </head> 
   
    
   
  <body> 
   
    
   
  <p>Bağlanın: <a href=”http://www.webciftligi.com”/>Web Çiftliği</a></p> 
   
    
   
  </body> 
   
    
   
  </html>

<!DOCTYPE html><html><head><style type=”text/css”> 
  h1 {text-decoration:overline;} 
   
  h2 {text-decoration:line-through;} 
   
  h3 {text-decoration:underline;} 
   
  h4 {text-decoration:blink;} 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>başlık 1</h1> 
   
  <h2>başlık 2</h2> 
   
  <h3>başlık 3</h3> 
   
  <h4>başlık 4</h4> 
   
  <p><b>Not:</b>blink değerini İE Crome ve Safari desteklemiyormuş.Ne işe yaradığınıda anlamış değilim</p> 
   
  </body> 
   
  </html>

Metnin altını çizme çoğu zama kullanıcının kafasını karıştıracağından pek tavsye edilmezmiş.

Metin dönüşümü

Metin dönüşümü özelliği ile metnin küçük harflerle mi yoksa büyük harflerle mi gösterileceğini belirlersiniz.
Bütün harfleri küçük harfle yada büyük harfle gösterebileceğiniz gibi her kelimeni ilk harfini büyük diğerlerini küçük ayarlayabilirsiniz.

<!DOCTYPE html><html> 
    
   
  <head> 
   
    
   
  <style type=”text/css”> 
   
    
   
  p.uppercase {text-transform:uppercase;} 
   
    
   
  p.lowercase {text-transform:lowercase;} 
   
    
   
  p.capitalize {text-transform:capitalize;} 
   
    
   
  </style> 
   
    
   
  <body> 
   
    
   
  <p class=”uppercase”>bu paragraf büyük harflerle yazılacak.</p> 
   
    
   
  <p class=”lowercase”>bu paragraf küçük harflerle yazılacak</p> 
   
    
   
  <p class=”capitalize”>Bu paragrafın ilk harfleri büyük sonrakiler küçük 
  yazılacak</p> 
   
    
   
  </body> 
   
    
   
  </head> 
   
    
   
  </html>

Metin Girinti

Bu özellik ile paragrafın ilk satırının nereden başlayacağını belirlersiniz.

<!DOCTYPE html>  
  <html> 
   
    
   
  <head> 
   
    
   
  <style type=”text/css”> 
   
    
   
  p {text-indent:50px;} 
  </style> 
   
    
   
  </head> 
   
    
   
  <body> 
   
    
   
  <p>In my younger and more vulnerable years my father gave me some advice that I’ve 
  been turning over in my mind ever since. ‘Whenever you feel like criticizing 
  anyone,’ he told me, ‘just remember that all the people in this world haven’t had 
  the advantages that you’ve had.’</p> 
   
    
   
  </body> 
   
    
   
  </html>

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Font

CSS font özellikleri font ailesini , koyuluğunu , boyutunu ve stilini belirler.
< Resime gitmek için tıklayın >
Bilgisayar ekranlarında sans-serif fontlarını okumak serif fontlarını okumaktan daha kolaymış.

Yazı Tipi Aileleri

CSS de , font ailesi isimlerinin iki çeşidi vardır:

generic family(Genel aile) – Serif Monospace gibi benzer görünüme sahip bir grup font ailesidir.
font family(font ailesi)- Times New Roman veya Arial gibi spesifik font ailesidir.

Genel aile Yazı Tipi Ailesi Açıklama
Serif Times New Roman Georgia Şerif fontlarının bazı karakterleri ucunda küçük çizgiler vardır
Sans-serif Arial Verdana “Sans” olmadan anlamına gelir – Bu yazı karakterlerinin ucunda çizgileri yoktur
Monospace Courier NewLucida Console Tüm tek hacimli karakterler aynı genişliğe sahiptir

Yazı Tipi Ailesi

Bir metnin yazı tipi ailesi font-family özelliği ile ayarlanır.
Font-family özelliğinde birkaç aile belirtmek gerekiyormuş.Tarayıcının ilk yazılan font ailesi desteği yoksa, bir sonraki font ailesi çalışırmış.

İstediğiniz yazı tipi ile başlayın, ve genel bir aile ile sonlandırın.
Not: Bir font ailesinin adı bir kelimeden fazla ise, font-family gibi, tırnak içinde alınmalıdır: “Times New Roman”.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p.serif{font-family:”Times New Roman”,Times,Serif;} 
  p.sansserif{font-family:Arial,Helvetica,sans-serif;} 
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>CSS yazı tipi ailesi</h1> 
   
  <p class=”serif”>Bu paragraf Times New roman fontlarıyla gösterilecek</p> 
   
  <p class=”sansserif”>Bu paragraf Arial  fontlarıyla gösterilecek</p> 
   
  </body> 
   
  </html>

Yazı Stili
Font-style özelliği çoğunlukla italik yazı belirtmek için kullanılır.
Bu özellik üç değere sahiptir:
Normal – metin normal gösterilir
italik – metin italik olarak görüntülenir
oblik – metin “eğilmiş” olarak görüntülenir(oblik italiğe çok benzer, ancak daha az desteklenir)

<!DOCTYPE html><html> 
  <head> 
   
    
   
  <style type=”text/css”> 
   
    
   
  p.normal {font-style:normal;} 
   
    
   
  p.italic {font-style:italic;} 
   
    
   
  p.oblique {font-style:oblique;} 
   
    
   
  </style> 
   
    
   
  </head> 
   
    
   
  <body> 
   
    
   
  <p class=”normal”>Bu paragraf normal yazıyla yazılacak</p> 
   
    
   
  <p class=”italic”>Bu paragraf italik yazıyla yazılacak</p> 
   
    
   
  <p class=”oblique”>Bu paragraf oblik yazıyla yazılacak</p> 
   
    
   
  </body> 
   
    
   
  </html>

Yazı Tipi Boyutu

Font-size özelliği metnin boyutunu ayarlar.
Metnin boyutunu düzenlemek web tasarımında çok önemlidir.Ancak , font size özelliğini paragrafları başlık gibi başlıklarıda metin gibi göstermek için kullanmamalısınız.
Daima uygun HTML etiketlerini kullanın, başlıklar için

<h1>…</h1>
<h6>…</h6>

<p>…</p>
gibi …

Font-size değerinin mutlak veya göreceli büyüklüğü olabilir.

Mutlak büyüklüğü:
Metnin belirli bir boyutu vardır.Kullanıcı hiçbir tarayıcıda metin boyutunu değiştiremez.

Göreceli boyutu:
Çevresindeki elemanlara göre boyutunu ayarlar.Kullanıcının tarayıcısında yazı boyutunu değiştirmesine izin verir.

Not:Yazı boyutunu belirtmezseniz paragraflar için normal varsayılan değer 16px dir.

Piksel ile Yazı Tipi Boyutu ayarlama

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  h1 {font-size:40px;} 
  h2 {font-size:30px;} 
  p {font-size:20px;} 
  </style> 
  </head> 
  <body> 
  <h1>Bu birinci başlık</h1> 
  <h2>Bu ikinci başlık</h2> 
  <p>font-size değerinin px olarak belirtilmesi Internet Explorer 9, Firefox, Chrome, 
  Opera ve Safaride metni yeniden boyutlandırmak için olanak sağlar.</p> 
  <p>Bu örnek internet explorer 9 dan önceki sürümlerde çalışmaz.</p> 
  </body></html>

Em ile Yazı Tipi Boyutu ayarlama( em = baskı aralığı gibi bişey herhalde)
Internet Explorer’ın eski sürümleri ile yeniden boyutlandırma sorununu önlemek için, pek çok geliştirici piksel yerine em kullanırmış.
Em birimi W3C tarafından da tavsiye edilmektedir.
1 em geçerli yazı tipi boyutuna eşittir. Tarayıcılarında varsayılan metin boyutu 16px olduğundan 1 em=1 pixel dir.
pixels/16 = em formülü kullanılarak font-size değerini em cinsinden verebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  h1 {font-size:2.5em;} /* 40px/16=2.5em */ 
  h2 {font-size:1.875em;} /* 30px/16=1.875em */ 
  p {font-size:0.87em;} /* 14px/16=0.875em */ 
  </style> 
  <head> 
  <body> 
  <h1>bu birinci başlık</h1> 
  <h2>bu ikinci başlık</h2> 
  <p>bu bir paragraftır</p> 
  <p>font-size değeri olarak em bütün tarayıcılarda metni boyutlandırmanızı 
  sağlar.Ancak İE eski sürümlerinde bazı sorunlar yaşanabilmekteymiş.Metni 
  boyutlandırdığınızda olması gerektiğinden daha küçük veya daha büyük 
  olabiliyormuş.</p> 
  </body> 
  </html>

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Linkler

Linkleri farklı şekillerde gösterebiliriz.

Linklere şekil verme

Linkler herhangi bir CSS özelliği (renk,yazı tipi,arka plan gibi) ile şekle sokulabilir.

Dört bağlantı şekli kullanabiliriz:

a:link ziyaret edilmemiş link

a:visited ziyaret edilmiş link

a:hover fare link üzerindeyken

a:active linke tıklandığı anda

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  a:link {color:#ff0000;} /*ziyaret edilmemiş link*/ 
  a:visited {color:#00ff00;} /*ziyaret edilmiş link*/ 
  a:hover {color:#ff00ff;} /*fare üzreinde olan link*/ 
  a:active {color:#0000ff;} /*tıklanan link*/ 
  </style> 
  </head><body> 
  <p><b><a href=”http://www.webciftligi.com/” 
  target=”_blank”>www.webciftligi.com</a></b></p> 
  <p> 
  a:hover özelliğinin etkili olabilmesi için a:link ve a:visited özelliklerinden 
  sonra yazılmalıdır. 
  </p> 
  <p> 
  Aynı şekilde a:active özelliğinin etkili olabilmesi için a:hover özelliğinden sonra 
  yazılmalıdır. 
  </p> 
  </body> 
  </html>

Genel bağlantı stilleri

Text Decoration özelliği çoğunlukla linklerin altını çizmek için kullanılır.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  a:link {text-decoration:none;} /*ziyaret edilmemiş link*/ 
  a:visited {text-decoration:none;} /*ziyaret edilmiş link*/ 
  a:hover {text-decoration:underline;} /*fare üzreinde olan link*/ 
  a:active {text-decoration:underline;} /*tıklanan link*/ 
  </style> 
  </head><body> 
  <p><b><a href=”http://www.webciftligi.com/” 
  target=”_blank”>www.webciftligi.com</a></b></p> 
  <p> 
  a:hover özelliğinin etkili olabilmesi için a:link ve a:visited özelliklerinden 
  sonra yazılmalıdır. 
  </p> 
  <p> 
  Aynı şekilde a:active özelliğinin etkili olabilmesi için a:hover özelliğinden sonra 
  yazılmalıdır. 
  </p> 
  </body> 
  </html>

Arka plan rengi

background-color özelliği ile linkin arka plan rengini belirleyebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  a:link {background-color:red;} /*ziyaret edilmemiş link*/ 
  a:visited {background-color:blue;} /*ziyaret edilmiş link*/ 
  a:hover {background-color:yellow;} /*fare üzreinde olan link*/ 
  a:active {background-color:green;} /*tıklanan link*/ 
  </style> 
  </head><body> 
  <p><b><a href=”http://www.webciftligi.com/” 
  target=”_blank”>www.webciftligi.com</a></b></p> 
  <p> 
  a:hover özelliğinin etkili olabilmesi için a:link ve a:visited özelliklerinden 
  sonra yazılmalıdır. 
  </p> 
  <p> 
  Aynı şekilde a:active özelliğinin etkili olabilmesi için a:hover özelliğinden sonra 
  yazılmalıdır. 
  </p> 
  </body> 
  </html>

Aşağıdaki örnekte linkler için farklı özellikleri nasıl ayarlayacağınızı görebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  a.bir:link {color:red;} 
  a.bir:visited {color:blue;} 
  a.bir:hover {color:yellow;} 
   
  a.iki:link {color:red;} 
  a.iki:visited {color:blue;} 
  a.iki:hover {font-size:40px;}  
   
  a.üç:link {color:red;} 
  a.üç:visited {color:blue;} 
  a.üç:hover {background:yellow;} 
   
    
   
  a.dört:link {color:red;} 
  a.dört:visited {color:blue;} 
  a.dört:hover {font-family:monospace;} 
   
    
   
  a.beş:link {color:red;text-decoration:none;} 
  a.beş:visited {color:blue;text:decoration:none} 
  a.beş:hover {text-decoration:underline;} 
  </style> 
   
  </head> 
   
  <body> 
   
  <p>Fareyi linklerin üzerinde gezdirerek farkları görebilirsiniz.</p> 
   
  <p><b><a class=”bir” href=”http://www.webciftligi.com/” target=”_blank”>Bu link 
  renk değiştiriyor.</a></b></p> 
   
  <p><b><a class=”iki” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin 
  yazı boyutu değişiyor.</a></b></p> 
   
  <p><b><a class=”üç” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin 
  arka plan rengi değişiyor.</a></b></p> 
   
  <p><b><a class=”dört” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin 
  yazı tipi değişiyor.</a></b></p> 
   
  <p><b><a class=”beş” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin 
  altı çiziliyor.</a></b></p> 
   
  </body> 
   
  </html>

Bazı CSS özelliklerini birleştirerek gelişmiş linkler oluşturabilirmişiz.Örneğin link kutuları oluşturabilirmişiz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  a:link,a:visited 
  { 
  display:block; 
  font-weight:bold; 
  color:red; 
  background-color:yellow; 
  width:200px; 
  text-align:center; 
  padding:4px; 
  text-decoration:none; 
  } 
  a:hover,a:active 
  { 
  background-color:blue; 
  } 
   
  </style> 
   
  </head> 
   
  <body> 
  <a href=”http://www.webciftligi.com/” target=”_blank”> Web Çiftliği’ne 
  hoşgeldiniz.</a> 
   
  </body> 
   
  </html>

Alıntıdır:)

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 18 Haziran 2012; 1:28:25 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Listeler

CSS liste özellikleri size aşağıdaki imkanları sağlar:

Sıralı listeler için farklı liste öğesi işaretleri ayarlama

Sırasız listeler için farklı liste öğesi işaretleri ayarlama

Liste öğesi işareti olarak resim ayarlama
CSS ile listeler daha iyi şekillendirilebilir ve resimler liste ögelerini işaretlemek için kullanılabilir.

Farklı liste ögesi işaretleyicileri

Liste ögesi işaretleyicileri list-style-type özelliği ile belirleyebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  ul.a {list-style-type:circle;} 
  ul.b {list-style-type:square;} 
  ol.c {list-style-type:upper-roman;} 
  ol.d {list-style-type:lower-alpha;} 
  </style> 
  </head> 
  <body> 
  <p>Sırasız liste örneği</p> 
  <ul class=”a”> 
  <li>domates</li> 
  <li>biber</li> 
  <li>patlıcan</li> 
  </ul> 
  <ul class=”b”> 
  <li>domates</li> 
  <li>biber</li> 
  <li>patlıcan</li> 
  </ul><p>Sıralı liste örneği</p> 
  <ol class=”c”> 
  <li>domates</li> 
  <li>biber</li> 
  <li>patlıcan</li> 
  </ol> 
  <ol class=”d”> 
  <li>domates</li> 
  <li>biber</li> 
  <li>patlıcan</li> 
  </ol> 
  </body> 
  </html>

Değerlerin bazıları sıralı bazıları sırasız listeler için oluşturulmuş.

Liste ögesi işaretleyicisi olarak resim kullanma
Liste ögesi işareti olarak resim kullanmak için list-style-image özelliği kullanılır.

<!DOCTYPE html><html> 
  <head> 
   
  <style type=”text/css”> 
   
  ul 
   
  { 
   
  list-style-image:url(‘isaret.png’); 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <ul> 
   
  <li>domates</li> 
   
  <li>biber</li> 
   
  <li>patlıcan</li> 
   
  </body> 
   
  </html>

Yukarıdaki örnek tüm tarayıcılarda aynı görülmezmiş.İE ve Opera ,crome,firefox ve safariye göre daha büyük görüntülermiş.

Tüm tarayıcılarda aynı görünmesini istiyorsanız aşağıdaki Crossbrowser örneğin inceleyin.

<!DOCTYPE html><html> 
  <head> 
   
  <style type=”text/css”> 
   
  ul 
   
  { 
   
  list-style-type:none; 
  padding:0px; 
  margin:0px; 
   
  } 
  ul li 
  { 
  background-image:url(isaret.png); 
  background-repeat:no-repeat; 
  background-position:0px 5px; 
  padding-left:14px; 
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <ul> 
   
  <li>domates</li> 
   
  <li>biber</li> 
   
  <li>patlıcan</li> 
   
  </body> 
   
  </html>

Liste kestirme özelliği

Tek bir özellik belirterek bütün liste özelliklerini ayarlayabilirsiniz.Buna kestirme özellik denir.Bu özellik için list-style kullanılır.

<!DOCTYPE html><html> 
  <head> 
   
  <style type=”text/css”> 
   
  ul 
   
  { 
   
  list-style:square url(“isaret.png”); 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <ul> 
   
  <li>domates</li> 
   
  <li>biber</li> 
   
  <li>patlıcan</li> 
   
  </body> 
   
  </html>

Kestirme özelliğini kullanırken, değerlerin sırası şu şekilde olmalıdır:

list-style-type
list-style-position
list-style-image

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Tablolar

Tablo kenerlıkları

CSS ile tablo kenarlıklarını düzenlemek için border özelliğini kullanın

Aşağıdaki örnekte table,th ve td ögeleri için siyah kenarlığın nasıl oluşturulacağını görebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  table,th,td 
  { 
  border:1px solid black; 
  } 
  </style> 
  </head> 
  <body> 
  <table> 
  <tr><th>isim</th><th>soyisim</th></tr> 
  <tr><td>dr</td><td>hrn</td></tr> 
  </table> 
   
  </body> 
   
  </html>

Yukarıdaki örnekte iki kenarlık varmış gibi görünüyor bunun sebebi table th ve td ögeleri için ayrı ayrı kenarlık olmasıdır.
Tablonun tek kenarlı olması için border-collapse özelliğini kullanmamız gerekiyormuş.

Collapse kenarlık(sıkıştırılmış kenarlık diyebiliriz)

Border-collapse özelliği ile tablo kenarlıkları tekmiş gibi görünürmüş.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  table 
  { 
  border-collapse:collapse; 
  } 
  table,th,td 
  { 
  border:1px solid black; 
  } 
  </style> 
  </head> 
  <body> 
  <table> 
  <tr> 
  <th>isim</th> 
  <th>soyisim</th> 
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Tablo genişlik ve yüksekliği

Bir tablonun genişlik ve yüksekliğini width ve height özellikleri ile belirlersiniz.
Aşağıdaki örnek tablonun genişliği %100 th öğesinin genişliği ise 50 px olarak verilmiştir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  table,td,th 
  { 
  border:1px solid black; 
  } 
  table 
  { 
  width:100%; 
  } 
  th 
  { 
  height:50px; 
  } 
  </style> 
  </head> 
  <body> 
  <table> 
   
  <tr> 
   
  <th>isim</th> 
   
  <th>soyisim</th> 
   
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Tablo metin hizalama

Tablo içeriklerini text-align ve vertikal-align özellikleri ile hizalayabilirsiniz.

Text-align özelliği ile metinleri sağ,sol ya da orta gibi yatay olarak hizalayabilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  table,td,th 
  { 
  border:1px solid black; 
  } 
  td 
  { 
  text-align:right; 
  } 
  </style> 
   
  </head> 
   
  <body> 
   
  <table> 
   
  <tr> 
   
  <th>isimisimisim</th> 
   
  <th>soyisimsoyisimsoyisim</th> 
   
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Vertical-align özelliği ile de alt,üst ve orta gibi dikey hizalama sağlayabilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
   
  table,td,th 
  { 
  border:1px solid black; 
  } 
  td 
  { 
  height:50px; 
  vertical-align:bottom; 
  } 
  </style> 
   
  </head> 
   
  <body> 
   
  <table> 
   
  <tr> 
   
  <th>isimisimisim</th> 
   
  <th>soyisimsoyisimsoyisim</th> 
   
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Table Padding

Tablodaki kenarlık ile içeriğin arasındaki boşluğu belirlemek için th ve td ögelerinde padding özelliğini kullanın.

<!DOCTYPE html> 
  <html> 
  <head> 
   
  <style type=”text/css”> 
   
  table,td,th 
  { 
  border:1px solid black; 
  } 
  td 
  { 
  padding:15px; 
  } 
  </style> 
   
  </head> 
   
  <body> 
   
  <table> 
   
  <tr> 
   
  <th>isimisimisim</th> 
   
  <th>soyisimsoyisimsoyisim</th> 
   
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Tablo rengi
Aşağıdaki örnekte tablo kenarlık ve içeriklerinin rengini nasıl ayarlayacağınızı görebilirsiniz.

<!DOCTYPE html> 
  <html> 
   
  <head> 
   
  <style type=”text/css”> 
   
  table,td,th 
  { 
  border:1px solid black; 
  } 
  th 
  { 
  background-color:green; 
  color:white; 
  } 
  td 
  { 
  background-color:white; 
  color:green; 
  } 
  </style> 
   
  </head> 
   
  <body> 
   
  <table> 
   
  <tr> 
   
  <th>isimisimisim</th> 
   
  <th>soyisimsoyisimsoyisim</th> 
   
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Süslü bir tablo örneği

<!DOCTYPE html> 
  <html> 
   
  <head> 
   
  <style type=”text/css”> 
   
  #örnek 
  { 
  font-family:”Trebuchet MS”,Arial,Helvetica,sans-serif; 
  width:100%; 
  border-collapse:collapse; 
  } 
  #örnek td, #örnek th 
  { 
  font-size:1em; 
  border:1px solid #98bf21; 
  } 
  #örnek th 
  { 
  font-size:1.1em; 
  text-align:left; 
  padding-top:5px; 
  background-color:#a7c942; 
  color:#ffffff; 
  } 
  #örnek tr.alt td 
  { 
  color:#000000; 
  background-color:#eaf2d3; 
  } 
  </style> 
   
  </head> 
   
  <body> 
   
  <table id=”örnek”> 
  <tr> 
  <th>Birinci sütun başlığı(th)</th> 
  <th>İkinci sütun başlığı(th)</th> 
  <th>Üçüncü sütun başlığı(th)</th> 
  <th>Dördüncü sütun başlığı(th)</th> 
  </tr><tr class=”alt”> 
  <td>satır 1 sütun 1</td> 
  <td>satır 1 sütun 2</td> 
  <td>satır 1 sütun 3</td> 
  <td>satır 1 sütun 4</td> 
  </tr><tr> 
  <td>satır 2 sütun 1</td> 
  <td>satır 2 sütun 2</td> 
  <td>satır 2 sütun 3</td> 
  <td>satır 2 sütun 4</td> 
  </tr><tr class=”alt”> 
  <td>satır 3 sütun 1</td> 
  <td>satır 3 sütun 2</td> 
  <td>satır 3 sütun 3</td> 
  <td>satır 3 sütun 4</td> 
  </tr><tr> 
  <td>satır 4 sütun 1</td> 
  <td>satır 4 sütun 2</td> 
  <td>satır 3 sütun 3</td> 
  <td>satır 4 sütun 4</td> 
  </tr></table> 
  </body> 
   
  </html>

Alıntıdır.

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Kutu Modeli

Bütün html öğelerni kutu olarak kabul edebiliriz.CSS de tasarım ve düzen hakkında konuşurken kutu modeli kunuşulmuştur.

CSS kutu modeli aslında kenar çizgileri dolgularıiçeriği ile HTML öğelerini saran bir kutudur.

Kutu model bize öğeler ve boşluk öğeleri etrafında diğer öğelere göre bir sınır yerleştirmemize olanak sağlar.

Aşagıdaki örnek bize kutu modelini göstermektedir.

< Resime gitmek için tıklayın >

margin (kenar boşluğu) kenarlığın etrafında bir miktar alanı temizler.Arkaplan rengi yoktur tamamen şeffaftır.

border (kenarlık) dolgu ve içeriğin etrafını sarar ve kutunun arkaplan renginden etkilenir.

padding (dolgu) içeriğin etrafında bir miktar alanı temizler ve arkaplan renginden etkilernir.

content (içerik) metin ve resim gibi içeriklerin görüneceği alan

Tüm tarayıcılarda bir öğenin doğru görüntülenmesi için,kutu modelinin nasıl çalıştığını bilmeniz gerekir.

Bir öğenin genişliği ve yüksekliği

CSS ile bir öğenin yükseklik ve genişliğini ayarladığınızda sadece içerik alanının genişliğini ve yükseliğini ayarlayın.Bir öğenin tam boyutunu hesaplamak için ayrıca kenar çizgileri ve kenar boşluklarını da eklemelisiniz.

Örnek olarak 300px genişliğinde bir kutu elde etmek için aşağıdaki ölçüleri kullanabilirsiniz..

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

paddin margin ve border ölçülerini sağ ve sol olarak hesapladığınızda toplamda 300px genişliği elde edersiniz.

Aşağıdaki kodlarla 250px genişliğinde bir kutu elde edersiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  div.ex 
  { 
  width:220px; 
  padding:10px; 
  border:5px solid gray; 
  margin:0px; 
  } 
  </style> 
  </head> 
  <body><div class=”ex”>Bu tablo 250px genişliğindedir.</div> 
  </body> 
  </html>

Bu örnek İE 8 ve önceki sürümlerinde doğru görüntülenmez ama sonraki örneklerde bu sorunu nasıl çözeceğimizi göreceğiz.

Bir öğenin toplam genişliği aşağıdaki gibi hesaplanır.
Toplam genişlik= width + sol padding + sağ padding + sol border + sağ border + sol margin + sağ margin

Bir öğenin toplam yüksekliği ise aşağıdaki gibi hesaplanır.
Toplam yükseklik= height + üst padding + alt padding + üst border + alt border + üst margin + alt margin

Tarayıcıların Uyumluluk Sorunu

Yukarıdaki örnek İE8 ve önceki sürümlerinde düzgün görüntülenmez.Bu sorunu gidermek için HTML sayfanıza DOCTYPE eklemeniz gerekir.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” 
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
  <html> 
  <head> 
  <style type=”text/css”> 
  div.ex 
  { 
  width:220px; 
  padding:10px; 
  border:5px solid gray; 
  margin:0px; 
  } 
  </style> 
  </head> 
  <body><div class=”ex”>Bu tablo 250px genişliğindedir.</div> 
  </body> 
  </html>

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Kenarlık

CSS Kenarlık Özellikleri

CSS kenarlık özelliği bir öğenin Kenarlığın stilini ve rengini belirtmenize izin verir.

Kenarlık Stili

Border-style özelliği kenarlığın ne şekilde gösterileceğini belirtir.
Border-style özelliği ayarlanmadığı sürece kenarlık özelliklerinin hiçbiri etkili olmayacaktır.

border-style değerleri:

none: hiçbir kenarlık olmadığını belirtir
dotted: noktalı kenarlık
dashed: kesik çizgili kenarlık
solid: ek çizgili kenarlık
double: çift kenarlık her iki kenarlığın genişliği border-width değerinde verildiği gibidir.
groove: 3D oluklu kenarlık etki border-color değerine göre değişir.
ridge: 3D kabarık kenarlık etki border-color değerine göre değişir.
inset: 3D insert(?) kenarlık etki border-color değerine göre değişir.
outset: 3D outset(?) kenarlık etki border-color değerine göre değişir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p.none {border-style:none;} 
  p.dotted {border-style:dotted;} 
  p.dashed {border-style:dashed;} 
  p.solid {border-style:solid;} 
  p.double {border-style:double;} 
  p.groove {border-style:groove;} 
  p.ridge {border-style:ridge;} 
  p.inset {border-style:inset;} 
  p.outset {border-style:outset;} 
  p.hidden {border-style:hidden;} 
  </style> 
  </head> 
  <body><p class=”none”>kenarlık yok</p> 
  <p class=”dotted”>noktalı kenarlık</p> 
  <p class=”dashed”>kesik çizgili kenarlık</p> 
  <p class=”solid”>tek çizgili kenarlık</p> 
  <p class=”double”>çift kenarlık</p> 
  <p class=”groove”>3D oluklu kenarlık</p> 
  <p class=”ridge”>3D kabarık kenarlık</p> 
  <p class=”inset”>inset kenarlık</p> 
  <p class=”outset”>outset kenarlık</p> 
  <p class=”hidden”>hidden kenarlık</p> 
  </body></html>

Kenarlık Genişliği

border-width özelliği kenarlığın genişliğini ayarlamak için kullanılır.
Genişlik üç ön tanımlı değer olan thin, medium, veya thick ten br kullanılarak ayarlanır.
Tek başına kullanıldığında border-width özelliği çalışmaz.Bu nedenle kenarlıkları ayarlamak için border-style özelliğini kullanın.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p.bir 
  { 
  border-style:solid; 
  border-width:5px; 
  } 
  p.iki 
  { 
  border-style:solid; 
  border-width:medium; 
  } 
  p.üç 
  { 
  border-style:solid; 
  border-width:1px; 
  } 
  </style></head> 
  <body> 
  <p class=”bir”>kenarlık genişliği</p> 
  <p class=”iki”>kenarlık genişliği</p> 
  <p class=”üç”>kenarlık genişliği</p> 
  </body></html>

Kenarlık rengi

border-color özelliğini kullanarak kenarlık rengini ayarlayabilirsiniz.
Şeffaf bir kenarlıkta ayarlayabilirsiniz.
Tek başına kullanıldığında border-color özelliği çalışmaz.Bu nedenle kenarlık rengini ayarlamak için border-style özelliğini kullanın.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p.bir 
  { 
  border-style:solid; 
  border-color:red; 
  } 
  p.iki 
  { 
  border-style:solid; 
  border-color:#98bf21; 
  } 
  </style> 
  </head><body> 
  <p class=”bir”>kırmızı kenarlık</p> 
  <p class=”iki”>yeşil kenarlık</p></body> 
  </html>

Kenarlık Individual sides (Bağımsız taraf)

Kenarlığın her tarafı için farklı bir özellik belirleyebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border-top-style:dotted; 
  border-right-style:solid; 
  border-bottom-style:dotted; 
  border-left-style:solid; 
  } 
  </style> 
  </head><body> 
  <p>2 farklı kenarlık stili</p> 
  </body> 
  </html>

Yukarıdaki örnekteki kenarlığı tek bir özellik ile de oluşturabiliriz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border-style:dotted solid; 
  } 
  </style> 
  </head><body> 
  <p>2 farklı kenarlık</p> 
  </body> 
  </html>

Border-style özelliği dört değer birden alabilir.

border-style:dotted solid double dashed;

üst kenarlık dotted biçiminde
sağ kenarlık solid biçiminde
alt kenarlık double biçiminde
sol kenarlık dashed biçiminde olur

border-style:dotted solid double;

üst kenarlık dotted biçiminde
sağ ve sol kenarlık solid biçiminde
alt kenarlık double biçiminde olur

border-style:dotted solid;

üst ve alt kenarlık dotted biçiminde
sağ ve sol kenarlık solid biçiminde olur

border-style:dotted;

bütün kenarlar dotted biçiminde olur

Border-style özelliğini border-width ve border color özellikleri içinde kullanabilirsiniz.

Kenarlık – Kestirme özelliği

Yukarıdaki örneklerden de görebileceğiniz gibi, kenarlıklar ile ilgili dikkate alınması gereken pek çok özellik vardır.
Kenarlığın özelliklerini tek bir kodda belirtebilirsiniz.Buna kestirme özellik denir.

border-width
border-style (required)
border-color

sırasıyla özellikleri belirtebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border:5px solid red; 
  } 
  </style> 
  </head><body> 
  <p>CSS kenarlık kestirme özelliği</p> 
  </body> 
  </html>

Örnek 1

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border-style:solid; 
  border-top:thick double #ff0000; 
  } 
  </style> 
  </head><body> 
  <p>Sadece üst kenarlık özelliklerini belirleyen kestirme özellik.</p> 
  </body></html>

Örnek 2

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p {border-style:solid;} 
  p.none {border-bottom-style:none;} 
  p.dotted {border-bottom-style:dotted;} 
  p.dashed {border-bottom-style:dashed;} 
  p.solid {border-bottom-style:solid;} 
  p.double {border-bottom-style:double;} 
  p.groove {border-bottom-style:groove;} 
  p.ridge {border-bottom-style:ridge;} 
  p.inset {border-bottom-style:inset;} 
  p.outset {border-bottom-style:outset;} 
  </style> 
  </head><body> 
  <p class=”none”>alt kenarlık yok.</p> 
  <p class=”dotted”>dotted alt kenarlık.</p> 
  <p class=”dashed”>dashed alt kenarlık.</p> 
  <p class=”solid”>solid alt kenarlık.</p> 
  <p class=”double”>double alt kenarlık.</p> 
  <p class=”groove”>groove alt kenarlık.</p> 
  <p class=”ridge”>ridge alt kenarlık.</p> 
  <p class=”inset”>inset alt kenarlık.</p> 
  <p class=”outset”>outset alt kenarlık.</p> 
  </body> 
  </html>

örnek 3

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border-style:solid; 
  border-left-width:15px; 
  } 
  </style> 
  </head><body> 
  <p><b>Not:</b>”border-left-width” özelliği tek başına kullanılmaz.”border-style” 
  özelliğinden sonra yazılmalıdır.</p> 
  </body> 
  </html>

örnek 4

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p.bir 
  { 
  border-style:solid; 
  border-color:#0000ff; 
  } 
  p.iki 
  { 
  border-style:solid; 
  border-color:#ff0000 #0000ff; 
  } 
  p.üç 
  { 
  border-style:solid; 
  border-color:#ff0000 #00ff00 #0000ff; 
  } 
  p.dört 
  { 
  border-style:solid; 
  border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); 
  } 
  </style> 
  </head><body> 
  <p class=”bir”>Tek renk kenarlık!</p> 
  <p class=”iki”>İki renkli kenarlık!</p> 
  <p class=”üç”>Üç renkli kenarlık!</p> 
  <p class=”dört”>Dört renkli kenarlık!</p></body> 
  </html>

örnek 5

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border-style:solid; 
  border-right-color:#ff0000; 
  } 
  </style> 
  </head><body> 
  <p>Sağ kenarlığı reklendirme.</p> 
  </body> 
  </html>

Alıntıdır.

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 5 Temmuz 2012; 16:07:12 >
Bu mesaja 1 cevap geldi.

L

lextor

13 yıl

Yarbay

Hocam çok güzel.Bende birkaç güne css'ese giriş yapacağım.

Bu mesaja 2 cevap geldi.

M

Mark Knopfler

13 yıl

Er

input[type="text"]{}
a[rel="deneme"]{}

ile attributelere göre de ayrı css ayarlayabilirsiniz.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

quote:

Orijinalden alıntı: lextor

Hocam çok güzel.Bende birkaç güne css'ese giriş yapacağım.

web programlama için css yi mutlaka öğrenmek gerekirmiş başlarken ne işe yaradığını tam olarak bilmiyordum. Baya bir kolaylık sağlıyormuş. bu aralar yoğun olduğum için ara verdim ama en kısa sürede kaldığı yerden devam edeceğim .kolay gelsin

Bu mesaja 1 cevap geldi.

L

lextor

13 yıl

Yarbay

quote:

Orijinalden alıntı: Dr.Hrn

quote:

Orijinalden alıntı: lextor

Hocam çok güzel.Bende birkaç güne css'ese giriş yapacağım.

web programlama için css yi mutlaka öğrenmek gerekirmiş başlarken ne işe yaradığını tam olarak bilmiyordum. Baya bir kolaylık sağlıyormuş. bu aralar yoğun olduğum için ara verdim ama en kısa sürede kaldığı yerden devam edeceğim .kolay gelsin

Biliyordum zaten css önemli.

Sağolun bakalım kolay olacakmı

İ

ikiodayediduvar

13 yıl

Yüzbaşı

quote:

Orijinalden alıntı: Dr.Hrn

Bismillahirrahmanirrahim

CSS'ye başlıyorum. hadi hayırlısı

CSS ile tek seferde birden çok web sayfasının stil ve düzenini değiştirebilriz.
<!DOCTYPE html> 
   
  <html> 
   
  <head> 
   
  <style type="text/css"> 
   
  body 
   
  { 
   
  background-color:red; 
   
  } 
   
  h1 
   
  { 
   
  color:blue; 
   
  text-align:center; 
   
  } 
   
  p 
   
  { 
   
  font-family:"Times New Roman"; 
   
  font-size:30px; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>CSS örnekleri</h1> 
   
  <p>bu bir paragraftır<p> 
   
  </body> 
   
  </html>
Bu örnekte sayfaların arka plan rengini h1 başlığının rengini ve paragraf için yazı tipi ve boyutunu nasıl ayarladığımızı görüyoruz .

sayfa içindeki tüm h1 başlıkların rengini ve tüm paragrafların yazı tipi ve boyutunu tek seferde head etiketi içinde ayarlamış olsuk.

alıntı

Html bitti galiba, hayırlı olsun.

Css te başarılar.

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

quote:

Orijinalden alıntı: ikiodayediduvar
quote:

Orijinalden alıntı: Dr.Hrn

Bismillahirrahmanirrahim

CSS'ye başlıyorum. hadi hayırlısı

CSS ile tek seferde birden çok web sayfasının stil ve düzenini değiştirebilriz.
<!DOCTYPE html> 
   
  <html> 
   
  <head> 
   
  <style type="text/css"> 
   
  body 
   
  { 
   
  background-color:red; 
   
  } 
   
  h1 
   
  { 
   
  color:blue; 
   
  text-align:center; 
   
  } 
   
  p 
   
  { 
   
  font-family:"Times New Roman"; 
   
  font-size:30px; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>CSS örnekleri</h1> 
   
  <p>bu bir paragraftır<p> 
   
  </body> 
   
  </html>
Bu örnekte sayfaların arka plan rengini h1 başlığının rengini ve paragraf için yazı tipi ve boyutunu nasıl ayarladığımızı görüyoruz .

sayfa içindeki tüm h1 başlıkların rengini ve tüm paragrafların yazı tipi ve boyutunu tek seferde head etiketi içinde ayarlamış olsuk.

alıntı
Html bitti galiba, hayırlı olsun. Css te başarılar.

Teşekkürler

Bu mesaja 1 cevap geldi.