ONBİNRENK - Bilgi Arşivi

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). 
 
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. 
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. 
 
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. 
border-style: dotted 
 
dashed Sınır çizgisini kesikli formatta gösterir. Çoğu gözatıcıda (browser'da)
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. 
 
 
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. 
 
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. 
 
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. 
 
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. 

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. 
 
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. 
 
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. 
 
 
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. 
 
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: 
 
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. 
 
İç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. 
 
 
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. 
 
 
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: 
 
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



  


=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=