3.HTML'YE 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.
- 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.
<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>
- text-align: Yatay hizalama
- Font Özellikleri
- 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.
<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>
- 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ı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.
<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>
- list-style-type:Liste elemanlarının başına:
- Background Özellikleri
- 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.
<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>
- 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 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ı.
<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>
Bizi Takip Edin
Pinterest Facebook Twitter
© by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.
Yorum Gönder Blogger Facebook