Css öğreniyorum

M
⚪ Konu sahibi son olarak 3346 gün önce görüldü
CSS ile tek seferde birden çok web sayfasının stil Ve düzenini değiştirebilriz.

Kod: 
<!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ış olduk.
 
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.
 
Örnek 1

Kod: 
<!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

Kod: 
<!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.

selector.gif



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

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.


Kod: 
<!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.

Kod: 
<!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:

Kod: 
<!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.
 
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:

Kod: 
<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:

Kod: 
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:

Kod: 
<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:

Kod: 
<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:

Kod: 
h3
{
color:red;

text*alin:left;

font-size:8pt;

}


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

Kod: 
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.

Kod: 
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ı.
 
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.


Kod: 
<!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.

Kod: 
<!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.


Kod: 
<!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:

Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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.


Kod: 
<!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
 
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


Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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>

Kod: 
<!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.


Kod: 
<!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.

Kod: 
<!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>
 
CSS Font

CSS font özellikleri font ailesini , koyuluğunu , boyutunu ve stilini belirler.


serif.gif


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

Kod: 
<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)


Kod: 
<!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

Kod: 
<!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.


Kod: 
<!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>
 
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


Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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>
 
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.


Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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
 
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.


Kod: 
<!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üş.

Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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.


Kod: 
<!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


Kod: 
<!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>
 
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.

box-model.gif


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.

Kod: 
<!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.


Kod: 
<!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>
 
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.


Kod: 
<!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.

Kod: 
<!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.


Kod: 
<!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.

Kod: 
<!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.

Kod: 
<!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.


Kod: 
<!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

Kod: 
<!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

Kod: 
<!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>
 
CSS Anahat

Öğelerin dikkat çekmesi için kenarlıkların dışında bir anahat oluşturabilirsiniz.

Anahat özellikleri stil, renk, ve genişliktir.

Örnekler;

1.örnek Kenarlık etrafında anahat çizme

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p 
{
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>

<body>
<p><b>Note:</b> İE 8 !DOCTYPE belirtilmezse bu özelliği tanımazmış.</p>
</body>
</html>

2. örnek Anahat stilini ayarlama

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>

<p class="dotted">A dotted anahat</p>
<p class="dashed">A dashed anahat</p>
<p class="solid">A solid anahat</p>
<p class="double">A double anahat</p>
<p class="groove">A groove anahat</p>
<p class="ridge">A ridge anahat</p>
<p class="inset">An inset anahat</p>
<p class="outset">An outset anahat</p>
<b>Note:</b> İE 8 !DOCTYPE belirtilmezse bu özelliği tanımazmış.
</body>
</html>


3. örnek Anahat rengini ayarlama


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p 
{
border:1px solid red;
outline-style:dotted;
outline-color:#00ff00;
}
</style>
</head>

<body>
<p><b>Note:</b>  İE 8 !DOCTYPE belirtilmezse bu özelliği tanımazmış.</p>
</body>
</html>


4. örnek Anahattın genişliğini ayarlama


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.one
{
border:1px solid red;
outline-style:solid;
outline-width:thin;
}
p.two
{
border:1px solid red;
outline-style:dotted;
outline-width:10px;
}
</style>
</head>
<body>

<p class="one">Bu bir paragraftır.</p>
<p class="two">Bu bir paragraftır.</p>

<p><b>Note:</b> İE 8 !DOCTYPE belirtilmezse bu özelliği tanımazmış.</p>
</body>
</html>


Anahat öğeler etrafında dikkat çekmesi için çizlilen bir çizgidir.
kenarlık özlelliğinden farklıdır.
Anahat öğelerin boyutunun bir parçası değildir.Öğenin toplam genişliği ve yüksekliği anahat genişliğini etkilemez.

box_outline.gif


Tüm CSS Anahat Özellikleri

Özellik Açıklama Değer

outline -----------Bu bildirim tüm anahat özelliklerini belirler ---------outline-color,outline-style,outline-width,inherit
outline-color-----Anahat rengini ayarlar----------------------------------color_name,hex_number,rgb_number,invert,inherit
outline-style-----Anahat stilini ayarlar------------------------------------none,dotted,dashed,solid,double,groove,ridge,inset,outset,inherit
outline-width-----Anahat genişliği-----------------------------------------thin,medium,thick,length,inherit
 
CSS Margin (Kenar Boşluğu)

CSS kenar boşluğu öğelerin etrafındaki boşluğu tanımlar.

Margin öğelerin etrafındaki(kenarlığın dışı) bir alanı temizler.Marjın arkaplan

rengi yoktur ve tamamen şeffaftır.

Sağ sol alt ve üst kenar boşlukları farklı özellikler kullanılarak bağımsız olarak

değiştirilebilir.Kestirme özellik kullanarak bir kerede tüm kenar boşluklarınıda

değiştrebilirsiniz.

Olası Değerler

Değer Açıklama

auto------------Tarayıcı boşluğu belirler.
length----------Px, pt, cm ile boşluk boyutunu belirleyebilirsiniz.varsayılan değer

0px tir

%---------------Öğenin boyutuna göre % olarak boşluk belirler.
inherit----------Specifies that the margin should be inherited from the parent element(çeviremedim)

Not:İçerikle örtüşmesi için negatif değer kullanılabilir.

Kenar Boşluğu - Bağımsız taraflar

CSS'de her kenar için farklı bir boşluk belirtebilirsiniz.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>Bu margin özellikleri belirtilmemiş bir paragraftır.</p>
<p class="margin">Bu da margin özellikleri belirtilmiş bir paragraftır.</p>
</body>
</html>


Kenar Boşluğu - Kestirme özelliği

Kodu kısaltmak için tüm margin özelliklerini tek bir özellikte belirtebiliriz.Buna

kestirme özellik denir.


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>Bu margin özellikleri belirtilmemiş bir paragraftır.</p>
<p class="margin">Bu da margin özellikleri kestirme olarak  belirtilmiş bir 

paragraftır.</p>
</body>
</html>

Margin özelliği bir değerden dört değere kadar olabilir.

margin:25px 50px 75px 100px;

üst margin 25px
sağ margin 50px
alt margin 75px
sol margin 100px


margin:25px 50px 75px;

üst margin is 25px
sağ and left margins are 50px
alt margin is 75px


margin:25px 50px;

üst ve alt marginler 25px
sağ ve sol marginler 50px


margin:25px;

Bütün boşluklar 25px

Örnek 1

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.örnek {margin-top:5cm;}
</style>
</head>

<body>

<p>Margin özelliği belirtilmemiş paragraf.</p>
<p class="örnek">Üst boşluğu 5 cm olan paragraf.</p>
<p>Margin özelliği belirtilmemiş paragraf.</p>

</body>
</html>

Örnek 2

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.altboşluk {margin-bottom:25%;}
</style>
</head>
<body>

<p>Margin özelliği belirtilmemiş paragraf.</p>
<p class="altboşluk"> Margin özelliği belirtilmiş bir paragraf.</p>
<p>Margin özelliği belirtilmemiş paragraf.</p>

</body>
</html>
 
CSS Padding (Dolgu)

CSS padding özellikleri elemanın kenarlığı ve element içeriği arasındaki boşluğu tanımlar.

Padding öğeni içeriğinin etrafını temizler ve öğenin arka plan renginiden etkilenir.

Ayrı belirtilerek sağ sol alt ve üst dolgular bağımsız olarak değiştirilebilir.

Kısaltma dolgu özelliği kullanılarak bütün dolguları bir kerede düzenleyebilirsiniz.

Muhtemel Değerler

length =sabit bir değeri tanımlar (piksel, pt, em, vb)

% =öğenin belli bir yüzdesini tanımlar

Dolgu - Bağımsız taraflar

Farklı taraflar için farklı değerler vermek mümkündür.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>

<body>
<p>Padding özelliği belirtilmemiş bir paragraf.</p>
<p class="padding">Padding değerleri verilmiş bir paragraf.</p>
</body>

</html>

Dolgu - Kestirme özelliği

Bütün dolgu özelliklerini tek bir özellikte belirtmek mümkündür .Buna kestirme özellik denir.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.padding
{
padding:25px 50px;
}
</style>
</head>

<body>
<p>Padding özelliği belirtilmemiş bir paragraf..</p>
<p class="padding">Padding değerleri kestirme olarak verilmiş bir paragraf..</p>
</body>

</html>

Doldurma özelliği bir değerden dört değere kadar olabilir.

padding:25px 50px 75px 100px;
üst dolgu 25px
sağ dolgu 50px
alt dolgu 75px
sol dolgu 100px

padding:25px 50px 75px;
üst dolgu 25 px
sağ ve sol dolgular 50 px
alt dolgu 75px

padding:25px 50px;
üst ve alt dolgular 25px
sağ ve sol dolgular 50px

padding:25px;
bütün kenarlar 25px olur


Örnek 1

Tek bildirimde tüm padding özellikleri

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>

<body>
<p class="ex1">Bu metinde her iki tarafta da eşit dolgu vardır.Dolgular iki santimliktir.</p>
<p class="ex2">Bu metinde ise altta ve üstte 0.5 cm sağda ve solda 3 cm dolgu vardır.</p>
</body>
</html>

Örnek 2

Sol dolgu değerini ayarlamak

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.padding {padding-left:2cm;}
p.padding2 {padding-left:50%;}
</style>
</head>

<body>
<p>Bu metinde dolgu özelliği kullanılmamıştır.</p>
<p class="padding">Bu metinde sol dolgu değeri 2 cm dir.</p>
<p class="padding2">Bu metinde sol dolgu değeri %50 dir.</p>
</body>
</html>
 
CSS Gruplandırma ve İç içe Seçiciler

Gruplandırma seçicileri

Stil sayfalarında sıklıkla aynı stille gösterilen öğeler mevcuttur.

Kod: 
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

Kodu en aza indirgemek için grup seçici kullanabilirsiniz.

Virgül ile tüm seçicileri ayırmanız gerekir.

Aşağıdaki örnekte yukarıdaki koddaki seçicileri nasıl gruplandıracağımızı görebilirsiniz.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1,h2,p
{
color:green;
}
</style>
</head>

<body>
<h1>Merhaba Dünya!</h1>
<h2>Daha küçük başlık!</h2>
<p>Bu bir paragraftır.</p>
</body>
</html>


İç içe Seçiciler

Bir seçici içinde bir seçici için bir tarz uygulamak mümkündür.(?)

Aşağıdaki örnekte , bir stil bütün paragraf öğeleri için belirlenir ,bir stil marked ile sınıflandırılmış tüm öğeler için belirlenir ve üçüncü bir stil se sadecemarked ile sınıflandırılmış paragraf öğeleri için belirlenmiştir.


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:yellow;
}
</style>
</head>

<body>
<p>Bu yazı mavidir ve ortalanmıştır.</p>
<div class="marked">
<p>Bu p öğesi kırmızı arkaplan rengi üzerinde sarı yazılmış olmalıdır.</p>
</div>
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.( Burayı çeviremedim)</p>
</div>

</body>
</html>
 
CSS Boyut

CSS boyut özellikleri bir öğenin yükseklik ve genişliğini kontrol etmenizi sağlar.

Örnek 1

Öğenin yüksekliğini ayarlama
Bu örnek, farklı öğelerin yüksekliğini nasıl ayarlanacağını gösterir.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img.normal
{
height:auto;
}
img.big
{
height:200px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>

<body>
<img class="normal" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /><br />
<img class="big" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" />
<p class="ex">Bu paragraf için yükseklik ve genişlik 100 pikseldir.</p>
<p>Bu paragraf için herhangi bir yükseklik ve genişlik belirtilmemiştir.
Bu paragraf için herhangi bir yükseklik ve genişlik belirtilmemiştir.
Bu paragraf için herhangi bir yükseklik ve genişlik belirtilmemiştir.</p>
</body>
</html>


Örnek 2

Yüzde kullanarak bir görüntünün yüksekliğini ayarlayabilirsiniz.


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:40%;}
img.small {height:10%;}
</style>
</head>

<body>
<img class="normal" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /><br />
<img class="big" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /><br />
<img class="small" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" />
</body>
</html>

Örnek 3

Bir piksel değeri kullanarak bir öğenin genişliğini ayarlayabilirsiniz.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img {width:200px;}
</style>
</head>
<body>

<img src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" />

</body>
</html>

Örnek 4

Bir öğenin maksimum yüksekliği ayarlamak

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
max-height:50px;
background-color:red;
}
</style>
</head>

<body>
<p>Bu paragrafın maksimum yüksekliği 50pxdir. Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.</p>
</body>
</html>


Örnek 5

Yüzde kullanarak bir elemanın maksimum genişliğini ayarlamak


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
max-width:20%;
background-color:yellow;
}
</style>
</head>
<body>

<p>Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.</p>

</body>
</html>
 
CSS Görüntü ve Görünürlük

Bir elemanın gizlenmesi görüntü(display) özelliği "none" veya görünürlük(visibility) özelliği "hidden" ayarlanarak yapılabilir.Ancak bu iki yöntem farklı sonuçlar ortaya çıkarabilir.

Bu kısmı çevirmekte zorlandım .örnekleri inceleyerek konuyu daha iyi kavrayabiliriz sanırım.


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1.hidden {visibility:hidden;}
</style>
</head>

<body>
<h1>Bu görünür bir başlıktır.</h1>
<h1 class="hidden">Bu gizli bir başlıktır.Sayfanızda görünmeyecektir.</h1>
<p>Gizli başlığın hala yer kapladığını fark ettinizmi?..</p>
</body>
</html>


display:none kullanıldığı öğeyi gizler ve herhangi bir yer kaplamasını önler.Öğe sanki yokmuş gibi görüntülenir.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1.hidden {display:none;}
</style>
</head>

<body>
<h1>Bu görünür bir başlıktır.</h1>
<h1 class="hidden">Bu gizli bir başlıktır.</h1>
<p>Gizli başlık bu sefer yer kaplamayacaktır.</p>
</body>

</html>


(Çevirisini tam yapamadığım için olduğu gibi kopyalıyorum bu kalan kısmı.)

Block and Inline Öğeleri

A block element is an element that takes up the full width available, and has a line break before and after it.

Examples of block elements:

<h1>
<p>
<div>
An inline element only takes up as much width as necessary, and does not force line breaks.

Examples of inline elements:

<span>
<a>


Changing How an Element is Displayed

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.

The following example displays list items as inline elements:


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li{display:inline;}
</style>
</head>
<body>

<p>Display this link list as a horizontal menu:</p>

<ul>
<li><a href="http://www.w3schools.com/html/default.asp" target="_blank">HTML</a></li>
<li><a href="http://www.w3schools.com/css/default.asp" target="_blank">CSS</a></li>
<li><a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a></li>
<li><a href="http://www.w3schools.com/xml/default.asp" target="_blank">XML</a></li>
</ul>

</body>
</html>


The following example displays span elements as block elements:


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span
{
display:block;
}
</style>
</head>
<body>

<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>

</body>
</html>
 
CSS Konumlandırma

CSS positioning özelliği herhangi bir öğeyi konumlandırmanızı sağlar.Aynı zamanda bir öğenin arkasına başka birini yerleştirebilir ve öğenin içeriği çok büyükse ne yapılması gerektiğini belirtebilirsiniz.

Ögeler üst, alt, sol ve sağ özellikleri kullanılarak yerleştirilebilir.Ancak,position özelliği ilk önce ayarlanmazsa bu özellikler çalışmaz.

Dört farklı konumlandırma yöntemi vardır.

Statik Konumlandırma

HTML elemanları varsayılan olarak statik konumlandırılmıştır. Statik konumlandırılmış öğeler her zaman sayfanın normal akışına göre konumlandırılır.

Statik konumlandırılmış öğeler üst, alt, sol ve sağ özelliklerinden etkilenmez.

Sabit Konumlandırma

Sabit pozisyonda olan bir eleman tarayıcı penceresine göre konumlandırılır.

Penceresi kaydırılsa bile bu hareket etmeyecektir:

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.pos_fixed
{
position:fixed;
top:30px;
right:50px;
}
</style>
</head>
<body>

<p class="pos_fixed">Sabit konumlandırılmış metin</p>
<p><b>Note:</b> IE7 ve IE8 sadece !DOCTYPE belirtilmişse sabit konumlandırmayı destekler. </p>
<p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazıt</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p>
</body>
</html>

Sabit konumlandırılmış öğeler normal akıştan kaldırılır.Belge ve diğer öğeler sabit konumlandırılmış öğe yok gibi davranırlar.

Sabit konumlandırılmış öğeler diğer öğelerle çakışabilir.

Göreceli Konumlandırma

Göreceli konumlandırılmış öğe normal konumuna göre konumlandırılır.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-50px;
}

h2.pos_right
{
position:relative;
left:50px;
}
</style>
</head>

<body>
<h2>Bu konumlandırılmamış bir başlıktır.</h2>
<h2 class="pos_left">Bu başlık normal pozisyonuna göre sola konumlandırılmıştır.</h2>
<h2 class="pos_right">Bu başlık ise normal konumuna göre sağa konumlandırılmıştır.</h2>
<p>Göreceli konumlandırmada öğe orijinal konumuna göre hareket eder. </p>
<p>"left:-50px" değeri öğenin orijinal konumuna göre 50 px solda olmasını sağlar.</p>
<p>"left:50px" değeri ise öğenin orijinal konumuna göre 50 px solda olmasını sağlar.</p>
</body>

</html>


Göreceli konumlandırılmış öğeler diğer öğelerle üst üste gelebilir.


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2.pos_top
{
position:relative;
top:-40px;
color:red;
}
</style>
</head>

<body>
<h2>Bu konumlandırılmamış bir başlıktır.</h2>
<h2 class="pos_top">Bu başlık normal konumuna göre yukarı doğru konumlandırılmıştır.</h2>
<p><b>Not:</b> Göreceli olarak konumlandırılmış öğenin içerik hareket ettirildiğinde bile , öğe için ayrılan alan hala normal akışiçinde korunur.  </p>
</body>

</html>

Mutlak Konumlandırma

Mutlak konumlandırma ile, bir öğe bir sayfada herhangi bir yere yerleştirilebilir.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>

<body>
<h2>Bu başlık mutlak konumlandırılmıştır</h2>
<p>Mutlak konumlandırma ile, bir öğe bir sayfada herhangi bir yere yerleştirilebilir. Aşağıdaki başlık sayfanın solundan 100 px ve sayfanın üst sınırından 150 px uzaklıkta konumlandırılmıştır.</p>
</body>

</html>


Mutlak konumlandırılmış öğeler normal akıştan bağımsızdır.Belge ve diğer öğeler mutlak konumlandırılmış öğe yokmuş gibi görüntülenir.Bu nedenle mutlak konumlandırılmış öğeler diğer öğelerle çakışabilir.

Çakışan Ögeler

Öğeler normal akış dışında konumlandırılmış ise diğer öğelerle çakışabilirler.

z-index özelliği ile çakışan öğelerden hangisinin üstte veya alta olacağını belirtebilirsiniz.


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>Bu bir başlıktır.</h1>
<img src="http://www.w3schools.com/images/w3schoolslogo.gif" width="200" height="200" />
<p>Z-index değeri -1 olduğu için imaj resmi yazıların arkasında görünecektir.Eğer z-index değeri -1 değilde 1 olsaydaı imaj resmi yazıların üzerinde görünecektir</p>
</body>
</html>


Eğer z-index değeri verilmemiş iki öğe çakışırsa HTML kodunda hangi öğe sonra yazıldıysa o öğe üstte gösterilecektir.

Örnek 1

Bir elemanın şeklini ayarlama

Bu örnek, bir öğenin şeklini nasıl ayarlanacağınızı gösterir.Eleman ayarladığınız şekilde kırpılır ve görüntülenir.


Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img 
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
</style>
</head>

<body>
<img src="http://www.w3schools.com/images/w3html.gif" width="100" height="140" />
</body>
</html>

Örnek 2

Bu örnek, bir elemanın içeriği belirtilen bir alana sığmayacak kadar büyük olduğunda, bir kaydırma çubuğu oluşturmak için taşma özelliği nasıl ayarlanacağını gösterir.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}

div.hidden 
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>

<body>
<p>overflow özelliği ile bir öğenin içeriğinin kutu boyunu aşması halinde ne yapacağını belirlersiniz.</p>

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>

Örnek 3

overflow özelliğini tarayıcının otomatik ayarlamasını sağlayabilirsiniz.

Kod: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:auto;
}
</style>
</head>

<body>
<p>Overflow özelliği eğer içerik verilen yükseklik ve genişlik değerleri aşarsa ne yapacağına otomatik karar verebilir.</p>

<div>
Eğer düzeni daha iyi kontrol etmek istiyorsanız overflow özelliğini kullanabilirsiniz. Bu örnekte overflow değerini: visible, hidden, scroll, veya inherit olarak değiştirip ne işe yaradıklarınnı görebilirsiniz. 
</div>
</body>

</html>


Örnek 4

İmleç değiştirme


Kod: 
<!DOCTYPE html>
<html>
<body>
<p>Fareyi kelimelerin üzerinde gezdirdiğinizde imlecin nasıl değiştiğini görebilirsiniz.</p>
<span style="cursor:auto">auto</span><br />
<span style="cursor:crosshair">crosshair</span><br />
<span style="cursor:default">default</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:help">help</span><br />
<span style="cursor:move">move</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:pointer">pointer</span><br />
<span style="cursor:progress">progress</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:wait">wait</span><br />
</body>
</html>
 
Cevap yazmak için giriş yap yada kayıt ol.
Geri