3.HTML'E CSS TAKVİYESİ
CSS bu zamana kadar anlattığımız özelliklerinin dışında, bazı HTML etiketlerine ekstra parametreler kazandırır, veya bazı özellilliklere kendi aracılığıyla ulaşıp onları şekillendirmemize olanak verir.Şimdi bunları görelim.
1.Text Özellikleri
*text-align: Yatay hizalama
left: Sola hizalama
right: Sağa hizalama
center: Ortaya hizalama
line-height: Satır yüksekliğinin pixel değeri
line-intdent: Sol kenardan uzaklığın piksel değeri
*text-transform: Metni büyük veya küçük harflerle görüntüleme
uppercase: Metni büyük harflerle yazar
lowercase: Metni küçük harflerle yazar.
*text-decoration:
underline: Alt çizgili yazar
overline: Üst çizgili yazar
line-trough: Yazının üstünü çizer.
none: Herhangi bir çizgi olmaksızın yazar.
PHP Kodu:
<html>
<body>
<head>
<title>Text özellikleri</title>
<style type="text/css">
<!--
p {
text-transform: uppercase;
line-height: 30;
text-indent: 20;
text-align: center;
text-decoration: line-through;
}
-->
</style>
<body>
<p>deneme</p>
</body>
</html>
*font-size: Yazı büyüklüğünün piksel cinsinen değerini bildirir.
*color: Yazının rengini bildirir.
*font-family: Yazının tipini belirler(Times New Roman,vedana vs.)
*font-style: Yazının italik olup olmamasını belirler.
italic: Yazıyı eğik yapar
normal: Yazıyı bir değişiklik yapmadan yazar.
*font-weight: Yazının bold olup olmamasını belirler.
bold: Yazıyı koyu yazar.
normal: Yazıyı bir değişiklik yapmaksızın yazar.
PHP Kodu:
<html>
<body>
<head>
<title>Css ve Fontlar</title>
<style type="text/css">
<!--
p {
font-size: 30;
color: teal;
font-weight: bold;
font-style: italic;
font-family: Times New Roman;
}
-->
</style>
<body>
<p>Deneme
</body>
</html>
*list-style-type:Liste elemanlarının başına:
disc: Daire,
circle: Çember,
square: Kare,
decimal: Sayı koyar.
*lower(upper)-roman: Liste elemanlarınınn başına küçük(büyük) romen rakamları koyar.
*lower(upper)-alpha: Liste elemanlarının başına küçük(büyük) harfler koyar.
*none: Listeleme için herhangi bir sembol kullanmaz.
*list-syle-image: Listelemeyi vereceğiniz resim ile yapar
*list-style-position:
inside: Listenin ikinci satırını en soldan başlatır.
outside: İkinci satırı bir öncekinin dikey hizasından başlatır.
PHP Kodu:
<html>
<body>
<head>
<title>Css ve listeler</title>
<style type="text/css">
<!--
li {
list-style-type: square;
list-style-position: inside;
list-style-image: url(deneme.gif);
}
-->
</style>
<body>
<li>Deneme
<li>Deneme
<li>Deneme
</body>
</html>
·background-color: Arkaplan rengi, Hexdecimal veya renk adı olarak yazabilirsiniz.
·background-image:Arkaplan resmi, url(ResimAdı.gif) şeklinde yazılır.
·background-repeat:Resmin;
§repeat: tüm yönlerde,
§repeat-x: x ekseni boyunca,
§repeat-y: y ekseni boyunca tekrar edilmesini, veya
§no-repeat: Tekrar edilmemesini bildirir.
·background-position:
§left: Resmi pencerenin sol kenarına yaklaştırır.
§right: Resmi pencerenin sağ kenarına yaklaştırır.
§center: Resmi ortalar.
PHP Kodu:
<html>
<body>
<head>
<title>Css ve Fontlar</title>
<style type="text/css">
<!--
p {
background-color:teal;
background-image: url(deneme.gif);
background-position:left;
backround-repeat:repeat-x;
}
-->
</style>
<body>
<p>Deneme</p>
</body>
</html>
*width: Katmanın genişliği
*height: Katmanın yüksekliği
*position:
absolute: Katmanını konumunu kesin olarak bildireceğimiz zaman kullanırız.
relative: Katmanın konumunu diğer öğelere göre değişebilen şekilde vermemizi sağlar.
*top: Katmanının pencerenin üst kenarından uzaklığı
*left: Katmanın pencerenin sol kenarından uzaklığı
*overflow: 'auto' değerini verirseniz katmanın belirtilen alana sığmayan öğelerini otomatik olarak belirler, 'scroll' değeri ise kaydırma çubukları ekler.
*visibility: Görününrlük, visible veya hidden değerlerini alır.
*z-index: Sayfanın görüntülenme önceliğini bildiren sıra numarası.
PHP Kodu:
<html>
<body>
<head>
<title>Css ve Fontlar</title>
<style type="text/css">
<!--
div {
background-color:teal;
width:200;
height:100;
position:absolute;
top:10;
left:200;
z-index:1;
overflow:scroll;
}
-->
</style>
<body>
<div>deneme</div>
</body>
</html>
