HTML'e CSS Takviyesi.
Kaynak::
http://html-dersler.tr.gg/HTML-h-e-CSS-Takviyesi.htm
1- Text Özellikleri:
>>text-align: Yatay hizalama left: Sola hizalamaright: Sağa hizalamacenter: Ortaya hizalamaline-height: Satır yüksekliğinin pixel değeriline-intdent: Sol kenardan uzaklığın piksel değeri>>text-transform: Metni büyük veya küçük harflerler görünteleme uppercase: Metni büyük harflerle yazarlowercase: Metni küçük harflerle yazar>>text-decoration: underline: Alt çizgili yazaroverline: Üst çizgili yazarline-trought: Yazının üstünü çizernone: Herhangi bir çizgi olmaksızın yazar 1- Text Özellikleri:
Kod: <html>
<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-throught;
}
-->
</style></head>
<body>
<p>deneme</p>
</body>
</html >
2- Font Özellikleri:
font-size: Yazı büyüklüğünün piksel cinsinden değerini bildirir.
color: Yazının rengini bildirir.
font-family: Yazının tipini belirler(Times New Roman, verdana vs.)
font-style: Yazının italik olup olmadığı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.
2- Font Özellikleri: Kod: <html>
<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></head>
<body>
<p>Deneme</p>
</body>
</html>
3- Liste Özellikleri:
list-style-type: Liste elemanlarının başına
disc: Daire
circle: Çember
square: Kare
decimal: Sayı koyar
lower(upper)-roman: Liste elemanlarının 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-style-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.
3-Liste Özellikleri:
Kod: <html>
<head>
<title>Css ve Listeler</title>
<style type="text/css">
<!--
li {
list-style-type: square;
list-style-position: inside;
}
-->
</style>
</head>
<body>
<li>Deneme
<li>Deneme
<li>Deneme
</body>
</html>
4- Background Özellikleri:
background-color: Arkaplan rengi, Hexdemical veya renk adı olarak yazabilirsiniz.
background-image: Arkaplan resmi, url(ResimAdresi.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,
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.
4- Background Özellikleri: Kod: <html>
<head>
<title>Css ve Fontlar</title>
<style type="text/css">
<!--
p {
background-color:teal;
background-image:url(deneme.gif);
background-position:left
background-repeat:repeat-x;
}
-->
</style>
</head>
<body>
<p>Deneme</p>
</body>
</html>
5- Katman Özellikleri:
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 değişebilen şekilde vermemizi sağlar.
top: Katmanın pencerenin üst kenarından uzaklığı.
left: Katmanın pencerenin sol kenarından uzaklığı
overlow: 'auto' değerini verirseniz katmanın belirtilen alana sığmayan öğelerinin otomatik olarak belirler, 'scoll' değeri ise kaydırma çubukları ekler.
visibility: Görünürlük, visible veya hidden değerini alır.
z-index: Sayfanın görüntülenme önceliğini bildiren sıra numarası.
5- Katman Özellikleri: Kod: <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:100;
z-index:1;
overlow:scroll;
}
-->
</style></head>
<body>
<div>deneme</div>
</body>
</html> |
