css4
Arkaplan Resim Özelliklerini Tek Kodla İfade Etme
Bir arkaplan resmini CSS'de ifade etmek için; son uygulamamızda olduğu gibi,
dört özellikten yararlanmamız şart değil. Bu özelliklerin hepsini background
özelliğinde toplayabiliriz: background: (background-color değeri)
(background-image değeri) (background-repeat değeri) (background-attachment değeri)
(background-position değeri).
dört özellikten yararlanmamız şart değil. Bu özelliklerin hepsini background
özelliğinde toplayabiliriz: background: (background-color değeri)
(background-image değeri) (background-repeat değeri) (background-attachment değeri)
(background-position değeri).
Kod:
body
{
background: #ffffcc url(monalisa.jbg) no-repeat fixed 100px 60px
}
td
{
background-image: crimson url(c:\kaplamalar\tiles.gif) no-repeat scroll top left
}
div
{
background-image: rgb(100%, 100%, 85%) url(http://geocities.com/selnur/resimler/newworld.jpg) no-repeat fixed center center
}
span
{
background-image: rgb(255, 255, 217) url(manzara.bmp) no-repeat scroll 35% 35%
}
Burada Netscape gözatıcısı kullananlar bu kodun daha önce belirttiğim background-positon, background-attachment bölümlerini göremezler ama geri kalan kısımlarını görürler. Bu kod bir önceki Font Formatı konusunda font koduna benziyor değil mi? Herşey bir yana, iki kod da kendi sayfalarının sonunda yer alıyor.
Sınır Çizgisi
Sınır Çizgi Şekilleri
CSS'de sınır çizgilerinin şeklini belirlemek için border-style özelliğinden
yararlanırız. Bu özelliğin değerleri şunlardır: none, dotted, dashed, solid, double,
groove, ridge, inset, ve outset. Aşağıdaki uygulama bu değerlerin nasıl sonuç
verdiğini gösteriyor.
yararlanırız. Bu özelliğin değerleri şunlardır: none, dotted, dashed, solid, double,
groove, ridge, inset, ve outset. Aşağıdaki uygulama bu değerlerin nasıl sonuç
verdiğini gösteriyor.
NOT: Bu özelliği Netscape desteklemiyor.
Kod:
<html>
<head>
<title>Sınır çizgi şekilleri,</title>
</head>
<body>
<p style="border-style: none">none</p>
<p style="border-style: dotted">dotted</p>
<p style="border-style: dashed">dashed</p>
<p style="border-style: solid">solid</p>
<p style="border-style: double">double</p>
<p style="border-style: groove">groove</p>
<p style="border-style: ridge">ridge</p>
<p style="border-style: inset">inset</p>
<p style="border-style: outset">outset</p>
</body>
</html>
Uygulamada sonuçlarını gördüğümüz bu özellik değerlerinin listesini aşağıda
bulabilirsiniz.
bulabilirsiniz.
none Sınır çizgisinin olmamasını sağlar.
border-style: none
dotted Sınır çizgisini noktalı formatta gösterir. Çoğu gözatıcıda (browser'da)
katı formatta çıkar.
katı formatta çıkar.
border-style: dotted
dashed Sınır çizgisini kesikli formatta gösterir. Çoğu gözatıcıda (browser'da)
katı formatta çıkar.
katı formatta çıkar.
border-style: dashed
solid Sınır çizgisini katı formatta gösterir.
border-style: solid
solid Sınır çizgisini katı formatta gösterir.
border-style: double
solid Sınır çizgisini çift çizgili formatta gösterir.
border-style: double
groove Sınır çizgisini oluk formatında gösterir.
border-style: groove
ridge Sınır çizgisini tümsek formatında gösterir.
border-style: ridge
inset Sınır çizgisini 3D basılmış düğme formatında gösterir.
border-style: inset
outset Sınır çizgisini 3D düğme formatında gösterir.
border-style: outset
Bunların yanısıra dilersek birkaç değeri birden yazarak melez sınır çizgileri de
oluşturabiliriz: border-style: değer1 değer2 değer3.
oluşturabiliriz: border-style: değer1 değer2 değer3.
Sınır Çizgi Rengi
Sınır çizgilerinin rengini belirlemek için border-color özelliğine renk değerleri
veririz. Eğer border-color özelliğine tek bir renk değeri verirsek, sınır çizgisi o
renkte olur. Eğer iki renk değeri verirsek, sınırın üst ve alt çizgileri ilk rengi,
sınırın sol ve sağ çizgileri ikinci rengi alırlar. Eğer özelliğe üç renk değeri verirsek,
üst sınır çizgisi ilk rengi, sol ve sağ çizgiler ikinci rengi, alt çizgi üçüncü rengi alır.
Eğer özelliğe dört renk değeri atarsak, üst çizgi ilk rengi, sağ çizgi ikinci rengi, alt
çizgi üçüncü rengi ve sol çizgi dördüncü rengi alır.
veririz. Eğer border-color özelliğine tek bir renk değeri verirsek, sınır çizgisi o
renkte olur. Eğer iki renk değeri verirsek, sınırın üst ve alt çizgileri ilk rengi,
sınırın sol ve sağ çizgileri ikinci rengi alırlar. Eğer özelliğe üç renk değeri verirsek,
üst sınır çizgisi ilk rengi, sol ve sağ çizgiler ikinci rengi, alt çizgi üçüncü rengi alır.
Eğer özelliğe dört renk değeri atarsak, üst çizgi ilk rengi, sağ çizgi ikinci rengi, alt
çizgi üçüncü rengi ve sol çizgi dördüncü rengi alır.
NOT: Bu özelliği Netscape desteklemiyor.
Kod:
<html>
<head>
<title>Sınır çizgi renkleri,</title>
</head>
<body>
<p style="border-style: solid; border-color:red">Tek renk</p>
<p style="border-style: solid; border-color:red blue">İki renk</p>
<p style="border-style: solid; border-color:red blue green">Üç renk</p>
<p style="border-style: solid; border-color:red blue green yellow">Dört renk</p>
</body>
</html>
Sınır Çizgi Kalınlığı
Sınır çizgisinin kalınlığını border-width özelliği ifade eder. Bu özelliğe thick
(kalın), medium (orta kalın), thin (ince) gibi standart değerler verebileceğimiz
gibi, birimsel değerler de verebiliriz. Eğer tek bir değer verilmişse, sınır çizgisinin
her yanı o değeri alır. Eğer iki değer verilmişse, üst ve alt çizgiler ilk değeri, sol
ve sağ çizgiler ikinci değeri alır. Eğer üç değer verilmişse, üst çizgi ilk değeri, sol
ve sağ çizgiler ikinci değeri, alt çizgi üçüncü değeri alır. Eğer dört değer verilmişse,
üst çizgi ilk değeri, sağ çizgi ikinci değeri, alt çizgi üçüncü değeri alır, sol çizgi
dördüncü değeri alır.
(kalın), medium (orta kalın), thin (ince) gibi standart değerler verebileceğimiz
gibi, birimsel değerler de verebiliriz. Eğer tek bir değer verilmişse, sınır çizgisinin
her yanı o değeri alır. Eğer iki değer verilmişse, üst ve alt çizgiler ilk değeri, sol
ve sağ çizgiler ikinci değeri alır. Eğer üç değer verilmişse, üst çizgi ilk değeri, sol
ve sağ çizgiler ikinci değeri, alt çizgi üçüncü değeri alır. Eğer dört değer verilmişse,
üst çizgi ilk değeri, sağ çizgi ikinci değeri, alt çizgi üçüncü değeri alır, sol çizgi
dördüncü değeri alır.
Kod:
<html>
<head>
<title>Sınır çizgi kalınlığı,</title>
</head>
<body>
<p style="border-style: solid; border-width: thick">Tek kalınlık değeri</p>
<p style="border-style: solid; border-width: thin thick">İki kalınlık değeri</p>
<p style="border-style: solid; border-width: 5px 10px 1px">Üç kalınlık değeri</p>
<p style="border-style: solid; border-width: 5px 10px 1px medium">Dört kalınlık değeri</p>
</body>
</html>
border-width özelliğine değerler vererek, sınır çizgilerinin dört tarafına değerler
verebileceğimiz gibi, aşağıdaki özelliklerle sınır çizgisinin tek bir tarafına da değerler
verebiliyoruz.
verebileceğimiz gibi, aşağıdaki özelliklerle sınır çizgisinin tek bir tarafına da değerler
verebiliyoruz.
border-top-width Üst sınır çizgisinin kalınlığını ifade eder.
border-top-width: thin
border-right-width Sağ sınır çizgisinin kalınlığını ifade eder.
border-right-width: 1 cm
border-left-width sol sınır çizgisinin kalınlığını ifade eder.
border-left-width: thick
border-bottom-width Alt sınır çizgisinin kalınlığını ifade eder.
border-bottom-width: 20px
Sınır Çizgi Özelliklerini Tek Kodla İfade Etme
Konunun finalinde, yine bütün bu özellikleri aynı anda barındıran bir özellik
sunuyoruz: border.
sunuyoruz: border.
Bu özelliğe şu şekilde değer veririz: border: (border-width değeri) (border-style değeri)
(border-color değeri). Bu özelliğin sınır kenarlarına indirgendiği aşağıdaki özellikleri
de kullanabilirsiniz.
border-top Üst sınır çizgisinin özelliklerini ifade eder.
border-top: thin outset green
border-right Sağ sınır çizgisinin özelliklerini ifade eder.
border-right: 12px solid rgb(100%, 20%, 20%)
border-left Sol sınır çizgisinin özelliklerini ifade eder.
border-left: thick dotted #ccffff
border-bottom Alt sınır çizgisinin özelliklerini ifade eder.
border-bottom: 1cm double rgb(218, 97, 255)
Bu konu bu kadar Wink
Dışkenar Boşluğu
Bir önceki konuda nesnelerin sınır çizgilerini CSS ile şekillendirmeyi öğrenmiştik.
Şimdi bu sınır çizgilerin dışkenar boşluklarını şekillendirmeyi göreceğiz.
Şimdi bu sınır çizgilerin dışkenar boşluklarını şekillendirmeyi göreceğiz.
HTML'de nesnelerin diğer nesnelere olan konumunu, dışkenar boşlukları ile
belirleyebiliriz. Her nesnenin bir sınır çizgisi olduğu gibi, sınır çizgisinin dışında
bir boşluk da vardır; ancak bu boşluğun varsayılan değeri sıfırdır. Bu dersimizde
bu boşluğu margin özelliği ile ifade edeceğiz.
belirleyebiliriz. Her nesnenin bir sınır çizgisi olduğu gibi, sınır çizgisinin dışında
bir boşluk da vardır; ancak bu boşluğun varsayılan değeri sıfırdır. Bu dersimizde
bu boşluğu margin özelliği ile ifade edeceğiz.
Dışkenar Boşluk Değeri
margin özelliğine vereceğimiz değerler şu şekillerde olabilir:
auto Dışkenar boşluğunu gözatıcı (browser) otomatik olarak belirler.
margin: auto
birim Dışkenar boşluğunun CSS birimleriyle ifade edilmesidir.
margin: 12px, margin:1cm, vb.
yüzde oranı Dışkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.
margin: 20%
Eğer margin özelliğine tek değer verirsek, tüm dışkenar boşlukları bu değeri alır.
Eğer iki değer verirsek, üst ve alt dışkenar boşlukları ilk değeri, sol ve sağ dışkenar
boşlukları ikinci değeri alır. Eğer üç değer verirsek, üst dışkenar boşluğu ilk değeri,
sol ve sağ dışkenar boşlukları ikinci değeri, alt dışkenar boşluğu üçüncü değeri alır.
Eğer dört değer verirsek, üst dışkenar boşluğu ilk değeri, sağ dışkenar boşluğu ikinci
değeri, alt dışkenar boşluğu üçüncü değeri, sol dışkenar boşluğu dördüncü değeri alır.
Eğer iki değer verirsek, üst ve alt dışkenar boşlukları ilk değeri, sol ve sağ dışkenar
boşlukları ikinci değeri alır. Eğer üç değer verirsek, üst dışkenar boşluğu ilk değeri,
sol ve sağ dışkenar boşlukları ikinci değeri, alt dışkenar boşluğu üçüncü değeri alır.
Eğer dört değer verirsek, üst dışkenar boşluğu ilk değeri, sağ dışkenar boşluğu ikinci
değeri, alt dışkenar boşluğu üçüncü değeri, sol dışkenar boşluğu dördüncü değeri alır.
Kod:
<html>
<head>
<title>Dışkenar boşlukları,</title>
</head>
<body>
<p>Dışkenar boşlukları:</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm">Tek değer.</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm 20px">İki değer.</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm 20px 10%">Üç değer.</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm 20px 10% auto">Dört değer.</p>
</body>
</html>
Öğretici uygulamamızda dışkenar boşluklarının daha iyi gözlenebilmesi amacıyla,
sınır çizgileri 2px (piksel) kalınlıkta tasarlandı. (Sınır çizgilerini belirtmek gibi bir
zorunluluk yoktur.) Uygulamamızda görüldüğü üzere, ilk nesnemizin dışkenar
boşluğu 1 cm. İkinci nesnemizin üst ve alt dışkenar boşluklar 1 cm, sol ve sağ
dışkenar boşluklar 20 piksel. Üçüncü nesnemizin üst dışkenar boşluğu yine 1 cm,
sol ve sağ dışkenar boşluğu 20 piksel, alt dışkenar boşluğu ise sayfanın onda biri
(10%) kadar. Son nesnemizin üst dışkenar boşluğu 1 cm, sağ dışkenar boşluğu 20
piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve sol dışkenar boşluğu ise
gözatıcının (browser'ın) atadığı otomatik değer kadardır.
sınır çizgileri 2px (piksel) kalınlıkta tasarlandı. (Sınır çizgilerini belirtmek gibi bir
zorunluluk yoktur.) Uygulamamızda görüldüğü üzere, ilk nesnemizin dışkenar
boşluğu 1 cm. İkinci nesnemizin üst ve alt dışkenar boşluklar 1 cm, sol ve sağ
dışkenar boşluklar 20 piksel. Üçüncü nesnemizin üst dışkenar boşluğu yine 1 cm,
sol ve sağ dışkenar boşluğu 20 piksel, alt dışkenar boşluğu ise sayfanın onda biri
(10%) kadar. Son nesnemizin üst dışkenar boşluğu 1 cm, sağ dışkenar boşluğu 20
piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve sol dışkenar boşluğu ise
gözatıcının (browser'ın) atadığı otomatik değer kadardır.
CSS'de üst, alt, sol ve sağ dışkenar boşluklarını ayrı ayrı ifade etmek de mümkündür.
Bu özelliklere de aynı şekilde değer verilir. Aşağıda bu özellikler ve açıklamaları
görülmektedır:
Bu özelliklere de aynı şekilde değer verilir. Aşağıda bu özellikler ve açıklamaları
görülmektedır:
margin-top Üst dışkenar boşluğunu ifade eder.
margin-top: 15%
margin-left Sol dışkenar boşluğunu ifade eder.
margin-left: 25mm
margin-bottom Alt dışkenar boşluğunu ifade eder.
margin-top: auto
margin-right Sağ dışkenar boşluğunu ifade eder.
margin-top: 30px
Bu konuda anlatılacak başka bir şey kalmadı Wink
İç Kenar Boşluğu
Bu konu bir önceki konunun tekrarı gibi olacak. Her nesnenin dışkenar boşluğu
olduğu gibi, sınır çizgisiyle nesne arasında bulunan içkenar boşluğu da vardır.
Şimdiki konumuz bu içkenar boşluklarını CSS ile şekillendirmek.
olduğu gibi, sınır çizgisiyle nesne arasında bulunan içkenar boşluğu da vardır.
Şimdiki konumuz bu içkenar boşluklarını CSS ile şekillendirmek.
İçkenar Boşluk Değeri
Özellikle tablolarda içkenar boşluklarının ayarlanması, tablo düzeni için önemli bir işlemdir. CSS'de dışkenar boşluklarını ifade etmek için padding özelliğinden yararlanırız.
padding özelliğine vereceğimiz değerler şu şekillerde olabilir:
birim İçkenar boşluğunun CSS birimleriyle ifade edilmesidir.
padding: 12px, margin:1cm, vb.
yüzde oranı İçkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.
padding: 20%
Eğer padding özelliğine tek değer verirsek, tüm içkenar boşlukları bu değeri alır.
Eğer iki değer verirsek, üst ve alt içkenar boşlukları ilk değeri, sol ve sağ içkenar
boşlukları ikinci değeri alır. Eğer üç değer verirsek, üst içkenar boşluğu ilk değeri,
sol ve sağ içkenar boşlukları ikinci değeri, alt içkenar boşluğu üçüncü değeri alır.
Eğer dört değer verirsek, üst içkenar boşluğu ilk değeri, sağ içkenar boşluğu ikinci
değeri, alt içkenar boşluğu üçüncü değeri, sol içkenar boşluğu dördüncü değeri alır.
Eğer iki değer verirsek, üst ve alt içkenar boşlukları ilk değeri, sol ve sağ içkenar
boşlukları ikinci değeri alır. Eğer üç değer verirsek, üst içkenar boşluğu ilk değeri,
sol ve sağ içkenar boşlukları ikinci değeri, alt içkenar boşluğu üçüncü değeri alır.
Eğer dört değer verirsek, üst içkenar boşluğu ilk değeri, sağ içkenar boşluğu ikinci
değeri, alt içkenar boşluğu üçüncü değeri, sol içkenar boşluğu dördüncü değeri alır.
Kod:
<html>
<head>
<title>İçkenar boşlukları,</title>
</head>
<body>
<p>İçkenar boşlukları:</p>
<p style="background-color: red; padding: 1cm">Tek değer.</p>
<p style="background-color: red; padding: 1cm 20px">İki değer.</p>
<p style="background-color: red; padding: 1cm 20px 10%">Üç değer.</p>
<p style="background-color: red; padding: 1cm 20px 10% auto">Dört değer.</p>
</body>
</html>
Öğretici uygulamamızda içkenar boşluklarının daha iyi gözlenebilmesi amacıyla,
nesnemize (paragrafa) arkaplan rengi verildi. Uygulamamızda görüldüğü üzere,
ilk nesnemizin içkenar boşluğu 1 cm. İkinci nesnemizin üst ve alt içkenar boşlukları
1 cm, sol ve sağ içkenar boşlukları 20 piksel. Üçüncü nesnemizin üst içkenar
boşluğu yine 1 cm, sol ve sağ içkenar boşlukları 20 piksel, alt içkenar boşluğu
ise sayfanın onda biri (10%) kadar. Son nesnemizin üst içkenar boşluğu 1 cm,
sağ içkenar boşluğu 20 piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve
sol içkenar boşluğu ise gözatıcının (browser'ın) atadığı otomatik değer kadardır.
nesnemize (paragrafa) arkaplan rengi verildi. Uygulamamızda görüldüğü üzere,
ilk nesnemizin içkenar boşluğu 1 cm. İkinci nesnemizin üst ve alt içkenar boşlukları
1 cm, sol ve sağ içkenar boşlukları 20 piksel. Üçüncü nesnemizin üst içkenar
boşluğu yine 1 cm, sol ve sağ içkenar boşlukları 20 piksel, alt içkenar boşluğu
ise sayfanın onda biri (10%) kadar. Son nesnemizin üst içkenar boşluğu 1 cm,
sağ içkenar boşluğu 20 piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve
sol içkenar boşluğu ise gözatıcının (browser'ın) atadığı otomatik değer kadardır.
CSS'de üst, alt, sol ve sağ içkenar boşluklarını ayrı ayrı ifade etmek de mümkündür.
Bu özelliklere de aynı şekilde değer verilir. Aşağıda bu özellikler ve açıklamaları görülmektedır:
Bu özelliklere de aynı şekilde değer verilir. Aşağıda bu özellikler ve açıklamaları görülmektedır:
padding-top Üst içkenar boşluğunu ifade eder.
padding-top: 15%
padding-left Sol içkenar boşluğunu ifade eder.
padding-left: 25mm
padding-bottom Alt içkenar boşluğunu ifade eder.
padding-top: auto
padding-right Sağ içkenar boşluğunu ifade eder.
padding-top: 30px
Bı konu da bitti 
