Tüm Haberler için tıklayınız
|
ANA SAYFA -
HTML DERSİ -
JAVASCRİPT DERSİ -
JAVASCRİPT KODLARI -
CSS DERSİ -
ÖNERİLER
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> |
- 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> |
- 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> |
|
|
|
