HTML ile tablolar oluşturabilirsiniz.
Tablolar
Tablolar <table> etiketi ile belirtilir. Bir tablo <tr> etiketi satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür. <td> etiketinin anlamı "table data"dır. Bir veri hücresi (data cell) metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler, tablolar vs. içerebilir.
<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>
Çıktısı aşağıdaki gibi olacaktır:
| satır 1, hücre 1 | satır 1, hücre 2 |
| satır 2, hücre 1 | satır 2, hücre 2 |
Tablolar ve Kenarlık (border) Parametresi
Eğer bir border parametresi belirtmezseniz, tablonuz kenarlık olmadan görüntülenir. Bu bazen yararlı olabilir ama çoğu zaman kenarlıkları göstermek daha çok işinize yarayacaktır.
Kenarlıkları göstermek için aşağıdaki parametreyi kullanmalısınız:
<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
</table>
Tablolarda Başlıklar
Başlıklar <th> etiketi ile belirtilir.
<table border="1">
<tr>
<th>Başlık</th>
<th>Başka Başlık</th>
</tr>
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
</tr>
</table>
Çıktısı:
| Başlık | Başka Başlık |
|---|---|
| Satır 1, Hücre 1 | Satır 1, Hücre 2 |
| Satır 2, Hücre 1 | Satır 2, Hücre 2 |
Bir Tabloda Boş Hücreler
Veri içermeyen hücreler bir çok tarayıcıda görüntülenmezler.
<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td></td>
</tr>
</table>
Çıktısı:
| Satır 1, Hücre 1 | Satır 1, Hücre 2 |
| Satır 2, Hücre 1 |
Boş hücre etrafındaki iç kenarlıkların görünmediğine dikkat edin. (Mozilla Firefox bunu görüntüler).
Bundan kurtulmak için, ( ) özel karakterlerini boş hücre içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz.
<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td> </td>
</tr>
</table>
| Satır 1, Hücre 1 | Satır 1, Hücre 2 |
| Satır 2, Hücre 1 |
HTML başka sayfalara kendi üzerinden bağlantı (link) kurmak için hyperlink (çoklu bağlantı) özelliğini kullanılır.
<a> Etiketi ve href parametresi
HTML başka bir dökümana link oluşturmak için <a> etiketini kullanır.
Kullanım biçimi:
<a href="/url">Görüntülenecek Metin</a>
Bir örnek:
<a href="http://www.bakirkoynet.com"> Kodlayın, Tıklayın, Görün...</a>
Bu örnek tarayıcınızda aşağıdaki gibi görünecektir:
Hedef (target) Parametresi
Target parametresi ile dökümanın nerde açılacağını belirtebilirsiniz.
Aşağıdaki bağlantıya tıklanırsa, döküman yeni bir pencerede açılacaktır.
<a href="http://www.bakirkoynet.com">
target="_blank">Kodlayın, Tıklayın, Görün...</a>
<a> Etiketi ve Name Parametresi
Bu parametre ile aynı döküman içinde belirlenmiş başka bir satıra direkt geçiş yapılabilir.
Kullanım Biçimi:
<a name="label">Görüntülenecek Metin</a>
Bir Örnek:
<a name="ipucu">Yararlı Bilgiler</a>
İpucu kısmına direkt link vermek için, URL'nin sonuna #ipucu yazınız:
<a href=http://www.bakirkoynet.com">
Yararlı İpuçları</a>
Dosya ismi kullanmadan o dosya içerisinde bir yere geçmek:
<a href="#ipucu">Yararlı İpuçları</a>
Başlıklar
Başlıklar <h1> ve <h6> dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir. <h1> en büyük puntoyu belirtirken, <h6> ise en küçük puntoyu belirtir.
<h1>Bu bir başlık</h1>
<h2>Bu bir başlık</h2>
<h3>Bu bir başlık</h3>
<h4>Bu bir başlık</h4>
<h5>Bu bir başlık</h5>
<h6>Bu bir başlık</h6>
HTML dili otomatik olarak başlık etiketlerinin öncesinde ve sonrasında bir satır atlar.
Paragraflar
Paragraflar <p> etiketi ile belirtilir.
<p>Bu bir paragraf</p>
<p>Bu da başka bir paragraf</p>
HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar
Etiketleri kapatmayı unutmayın!
Bir önceki örnekte paragrafın </b> etiketi ile bittiğini gördünüz:
<p>Bu bir paragraf
<p>Bu da başka bir paragraf
Çoğu browser büyük ihtimalle yukardaki gibi yazsanız bile çalıştıracaktır ama buna pek fazla güvenmeyin çünkü gelecek versiyon HTML dili hiçbir etiketi atlamanıza izin vermeyecektir.
Satır atlama
Satır atlamak için <br> etiketi kullanılır. Ancak bu etiketin yeni bir paragraf açmadığını da unutmayınız.
<p>Bu <br>bir <br>çok satırlı paragraftır.</p>
<br> etiketi boş bir etikettir. </br> gibi bir bitiş etiketi yoktur.
<br> mi <br /> mi?
Bir çok yerde <br> etiketinin <br /> olarak kullanıldığını göreceksiniz.
Çünkü <br> etiketi bir bitiş etiketi bulundurmaz ve bu özellik gelecek nesil HTML (XML ve XHTML) dilinin ilk kuralını bozmaktadır. Bu yüzden <br /> etiketini kullanmanızı tavsiye ederiz.
HTML içinde açıklama (yorum) satırları yaratmak
Yorum satırları HTML kaynak kodu içerisine programcıların hangi satırın ne iş gördüğünü anlatmak için kullanılır. Bu satırlar, sayfa browser'da görüntülenirken dikkate alınmazlar.
<!-- Bu bir açıklama -->
Temel Notlar - Yararlı İpuçları
HTML kodlarınızın başka browser'larda nasıl görüntüneceğini asla bilemezsiniz. Ayrıca bazı kullanıcılar geniş ekran monitörlere sahipken bazıları küçük ekranlara sahiptir. Bu sebeple metinler, kullanıcı penceresini her yeniden boyutlandırmasında değişecektir. Asla metinlerinizi fazladan boşluk bırakmak gibi tekniklerle biçimlendirmeye çalışmayın.
HTML koyduğunuz boşlukları sürekli teke indirecektir.
Boş bir satır bırakmak için <p> kullanmak kötü bir tekniktir, bunun yerine <br /> etiketini kullanınız. (Ama asla <br /> ile sıralı liste oluşturmayınız. HTML ile listeleme konusuna kadar bekleyiniz.)
HTML Etiketleri
- HTML etiketleri, HTML öğelerini belirtmek için kullanılır.
- HTML etiketleri 2 karakter ile sınırlanır. < ve >
- Bu karakterlere grup parantezleri (angle brackets) denir.
- HTML etiketleri çift olarak kullanılır. Örn: <b> Bu metin koyu fonttadır. </b>
- Bu çiftlerden birincisine başlama etiketi, ikincisine ise bitiş etiketi denir.
- Başlama ve bitiş etiketleri arasında kalan herşeye ise öğe içeriği (element contents) denir.
- HTML etiketleri büyük/küçük harfe duyarlı değildir, yani <b> ve <B> aynı görevi görür. (Türkçe karakter olan "İ" ve "ı" harflerinin bu durumun dışında kaldığını unutmayınız.)
HTML Öğeleri
Önceki sayfadaki örneğimizi hatırlayalım:
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
Bu benim ilk sayfam <b>Bu metin koyu</b>
</body>
</html>
Bu bir HTML öğesidir:
<b>Bu metin koyu</b>
HTML öğesi başlangıç etiketi olan <b> ile başladı.
HTML öğesinin içeriği: Bu metin koyu
HTML öğesi bitiş etiketi olan </b> ile sonlandırıldı.
<b> etiketinin amacı, görüntülenecek olan metinin koyu gösterilmesi gerektiğini bildirmektir
Etiketleri neden küçük harflerle belirtiriz?
HTML etiketlerinin büyük/küçük harfe duyarlı olmadığını söylemiştik: <B> ve <b> aynıdır. Eğer Web'de gezintiye çıkarsanız bir çok sitenin kaynak kodunun bütük harflerle yapılmış olduğunu göreceksiniz..Fakat biz her zaman küçük harf kullanırız. Neden?
Eğer Web standartlarını kontrol etmek istiyorsanız küçük harf kullanmalısınız. World Wide Web Consortium (W3C) HTML 4 versiyonu ile beraber küçük harf kullanımını önerir. Ayrıca XHTML (yeni nesil HTML) dili de bunu kullanmanızı şiddetle önerir.
- HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir.
- Bir HTML dosyası bir text dosyası olmakla beraber markup tags (işaretlenmiş etiketler) içerir
- Markup tag'ler web tarayıcınıza sayfanın nasıl gösterileceğini gösterir.
- Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.
- Bir HTML dosyası basit bir text editör ile oluşturulabilir.
Eğer Windows kullanıyorsanız not defterini açın.
Eğer MAC kullanıyorsanız SimpleText programını açın.
Eğer OSX kullanıyorsanız, TextEdit'i açın ve aşağıdakileri yapın: "Format" menüsünü açın ve "Rich Text" yerine "Plain Text" seçeneğini seçin. Sonra "Text Edit" menüsünün altında bulunan "Preferences" penceresini açın ve "Ignore rich text commands in HTML files" seçeneğini seçin. Eğer bu değişiklikleri yapmazsanız HTML dosyasınız büyük ihtimalle çalışmayacaktır!
Aşağıdaki metini açtığınız editör içerisine yazın:
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
Bu benim ilk sayfam <b>Bu metin koyu</b>
</body>
</html>
Dosyayı "index.htm" olarak kaydedin.
Oluşturduğunuz dosyaya çift tıklayın. Dosya tarayıcınızda açılacaktır
Örneğin Açıklaması
HTML dökümanınızdaki ilk tag (etiket) <html>'dir. Bu etiket tarayıcınıza bir HTML dosyasının koşturulacağını söyler. HTML dökümanınızdaki son tag (etiket) </html>'dir. Bu da tarayıcınıza HTML dosyasının sonunun geldiğini söyler.
<head> ve </head> etiketleri arasında kalan kısım başlık bilgilerini içerir. Başlık bilgileri tarayıcı penceresinde görüntülenmez.
<title> ve </title> etiketleri arasında kalan kısım dökümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir.
<body> ve </body> etiketleri arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısımı içerir.
<b> ve </b> etiketleri arasında kalan kısım ise koyu (bold) biçimde gösterilir.
HTML Editörleri Hakkında Not:
HTML dosyalarınızı kolay bir şekilde WYSIWYG (what you see is what you get), FrontPage veya Dreamweaver ile de hazırlayabilirsiniz.
Bununla beraber, eğer profesyonel anlamda HTML çalışmak istşyorsanız mutlaka not defteri (notepad) kullanmanızı tavsiye ederiz
a : Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
a:active : Linkin tıklandığı andaki durumudur.
a:visited : Linkin tıklandıktan sonraki durumudur.
BİÇİMLENDİRME:
color : Linkin rengini belirler.
background-color : Linkin zemin rengini belirler.
background-image : Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration : Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight : Yazının kalınlık veya inceliğini belirler.
border : Linkin etrafına kenarlık ekler.
display : Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar
TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.
İMLEÇ ÖZELLİKLERİ
crosshair:İmlecin artı işareti şeklinde olmasını sağlar.
auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move:İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize:İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize:İmlecin sola yatık normal ok olmasını sağlar.
se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait:İmlecin meşgul animasyonuna dönüşmesini sağlar.
help:İmlecin yardım-soru işaretine dönüşmesini sağlar
ZEMİN ÖZELLİKLERİ
background-color: Zeminin rengini belirler.
#color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.
TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.
padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
border : Tablonun kenarlarının şekillendirilmesini sağlar.
border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.
border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.
border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.
border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.
color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.
NOT : Başlık “TABLO” olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS’ yi özel kılan da zaten bu…
KAYDIRMA ÇUBUĞU ÖZELLİKLERİ
scrollbar-face-color :Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor.
scrollbar-base-color :Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor.
scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi.
scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color :Yön oklarının rengi
Css Nedir?
HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.
Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.
CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.
Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser’ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.
LİNK ÖZELLİKLERİ
a :Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover :Linkin imleç üzerine getirildiğindeki durumudur.
a:active :Linkin tıklandığı andaki durumudur.
a:visited :Linkin tıklandıktan sonraki durumudur.
BİÇİMLENDİRME:
color:Linkin rengini belirler.
background-color:Linkin zemin rengini belirler.
background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight:Yazının kalınlık veya inceliğini belirler.
border:Linkin etrafına kenarlık ekler.
display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.
LİSTE ÖZELLİKLERİ
disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.
KATMAN ÖZELLİKLERİ
position:Katmanın yerinin belirlenmesini sağlar.
absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static:Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top:Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left:Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width:Katmanın genişliğinin ne kadar olacağını belirler.
height:Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow:Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto:Otomatik olarak belirlenir.
scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden:Sığmayan yerleri gizler.
visibility:Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden:Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.
FONT ÖZELLİKLERİ
font-family:Yazı türünü belirler.(Arial , Verdana gibi.)
font-style:Yazının normal veya sağa eğik olmasını sağlar.
font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight:Yazının kalınlık-inceliğini belirler.
font-size:Yazının büyüklüğünü belirler