html de bilmemiz gerekenler nelerdir..
Necmi hocam html öğrenmelisin dediniz html de bilmemiz gerekenler nelerdir.Elinizde yazılı döküman warsa yada hazırlayabilirseniz paylaşırmısınız.İlginize şimdiden teşekkürler.
html
html hakkında çok konu var. ama başlangıç olarak temel yapıyı ve CSS öğrenmeniz yeterli olacaktır. elimde döküman yok. olunca yayınlarım.
CSS (Cascading Style Sheets)
1 CSS NEDİR?
CSS (Cascading Style Sheets) HTML sayfasına stil eklemek için kullanılırCSS çok kullanışlıdır ve kullanımıda çok kolaydır Fakat şu anda browser savaşları yüzünden hakettiği yere gelemediğinide söylemek istiyorum Henüz CSS 'nin bütün özellikleri iki browser tarafından da (explorer ve netscape popüler oldukları için sadece bu iki browserı ele alıyorum) tam olarak desteklenmemekte veya farklı etkiler yapmaktadır Bunun için burada size CSS'nin kullanımı anlatırken her iki browser tarafından da desteklenen özelliklerini anlatacam
Sakın CSS'nin çok kolay olduğuna aldanmayın Kolay olmasına rağmen müthiş esnektirBu özelliği sayesinde cok güzel sayfa dizaynları yapılabilmektedirHTML ile dizayn edemediğiniz veya çok uzun süren sayfa tasarımlarını CSS kullanarak çok kısa bir sürede ve çok daha kolay bir şekilde dizayn edebilirsiniz Çünkü CSS kullanarak istenirse bir metin,bir html sayfası veya tüm sitenin HTML sayfaları aynı anda değiştirilebilir Aslında CSS bizim ilk okulda kullandığımız ince seffaf kağıtlara benzetebilir Adından da anlaşılacağı gibi bu stil kağıtları bilgisayarın hafızasına üst üstte yığılır ve en üsteki işletilir Bu kağıtlarda bir metnin veya başlığın nasıl olacağı (renginin veya fontunun ne olacağı) veya sayfada nereye yerleştirileceği belirlenebilir CSS kullanarak daha bir çok özelliği değiştirebilirsiniz
2 YAZIM KURALLARI
CSS'nin de diğer dillerde olduğu gibi kendine ait bazı yazım kuralları vardır HTML'de bütün stiller <style></style> etiketleri arasında tanımlanır Stil tanımlarken seçicileri kullanırız Seçicilerinde çeşitleri vardır ilerede göreceğiz Bir seçici tanımlarken, Önce seçicinin adı yazılır (tabiki türüne uygun olarak ilerde göreceğiz) sonra değiştirilmek istenen özellikler ile değerleri köşeli parantez içine alınarak yazılır Seçicilerin isimler bir rakamla başlıyamazlar Fakat ilk harften sonra istenirse rakam kullanılabilir Birde isim seçerken lütfen Türkçe karekter kullanmayın
kucukfont { font-size : small }
| | |__ deger
| |
| |__değiştirilmek istenen özellik
|
|___ seçicinin isimi
Şimdilik bazı terimlerin anlamlarını bilmiyor olabilirsiniz kafanızı fazla takmayın ilerde hepsini anlatacam Bir köşeli parantezin içinde birden çok özellik tanımlanabilir Fakat bu özellikleri aralarına noktalı virgül";" konularak birbirlerinden ayırmanız gerekir
h1{
font-family :
arial ;
font-size : small }
Bir stil etiketi içinde istediğiniz kadar seçici tanımlayabilir ve bunları HTML sayfasında kullanabilirisiniz şimdilik bu kadar kural yeter gelelim bunları nerede tanımlıyacağınıza ve nasıl kullanacağınıza
3 HTML'YE BAĞLAMA ŞEKİLLERİ
Burada stilleri HTML'ye nasıl ekleyeceğinizi ve eklendiği yere göre HTML üzerinde nasıl etkiler yaptığını anlatacam Stiller HTML'ye üç değişik şekilde eklenebilirler
31 Local Bağlama
Local bağlamayı kullanarak yanlızca HTML'nin içinde kullanılan etiketleri (örneğin H1,A,P) ve sadece olduğu yerde özelliklerini değiştirebiliriz Fakat bunu fazla kullanacağınızı zannetmiyorum Çünkü bu tanımlama sadece tanımlandığı yerde ve bir kere kullanılabilir
<html>
<head><title> SAU WEB GROUP - - - [ CSS ] - - - </title>
</head >
<body >
<h3 > CSS Kullanımına Örnek </h3>
<h3 style= "font-family : arial; color : blue"> CSS Kullanımına Örnek </h3>
</body>
</html>
CSS Kullanımına Örnek
Burada stil yardımıyla H2 etiketinin bazı özelliklerini değiştirmiş oldukBunlar font renginin mavi olması ve fontun arial olmasıydıYukarıda da görüldüğü gibi iki yazınında aynı etiketi taşımasına rağmen farklı şekillerdedir Sakın unutmayın bu değişiklik sadece birkez geçerli olacaktır Bir daha H2 ekitini kullandığınız zaman etkili olmayacaktır
32 Global Bağlama
Tanımlama HTML'nin <head> </head>başlığı içinde yapılır Daha öncede belirttiğim gibi böylece bir etiketin sadece bir kez özelliklerini tanımlayarak tüm HTML de tekrar tanıtmadan istediğimiz yerde kullanabilirsiniz
<html>
<head>
<title> SAU WEB GROUP - - - [ CSS ] - - - </title>
<style type="text/css">
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz < /h3>
</body>
</html>
H3 etiketini bu şekilde değiştirdiğimiz zaman HTML sayfasının neresinde kullanırsanız kullanıın artık o etiketin rengi mavi fontuda arial'dır
33 Link Bağlama
Evet geldik son bağlama şeklimize buda faydaları azımsanmıyacak kadar önemli bir özellik Bu bağlama şeklini kullanarak Bir CSS dosyası dışarıdan HTML sayfasına veya sayfalarına bağlanabiliyor Mesela bütün sitedeki sayfalarda H1 etiketinin renginin kırmızı olmasını istiyorsunuz Bütün sayfalarda mavi olmasını tek tek belirtene kadar bu bağlama şeklini kullanabilirsiniz Daha sonra maviyi beğenmediniz kırmızı olmasınımı istiyorsunuz tek yapmanız gereken CSS dosyasına gidip blue yerine red yazmak Önce tanımlamak istediğimiz butun seçicileri yazıyoruz ve css soyadı ile kaydediyoruz
<style>
baslik1{
font-size : 40px;
font-family : Arial;
color : #284422 }
H4 baslik {
font-family:Arial;
font-weight:bold;
color : #284422 }
P {
font-style : arial;
font-size : 11pt;
color : #284422; }
A {
font-size : 15pt ;
color : #284422 }
A:hover {
font-size :15pt;
color : red }
</style>
Bunları istediğiniz bir düz yazı yazma programı ile hatta notpad ile de yazabilirsiniz Yazdıktan sonra denemecss ismiyle kaydedin Bundan sonra bu dosyayı HTML sayfasına yüklenmesi gerekiyor
<html>
<head>
<title> SAU WEB GROUP - - - [ CSS ] - - - </title>
<link rel="stylesheet nofollow" href="deneme.css">
</head >
<body >
<h4 class="baslık" >WEB Okuluna Hoşgeldiniz < /h4>
<h5 class="baslık1" >WEB Okuluna Hoşgeldiniz < /h5>
<p>CSS ilk başta zor gibi görünsede aslında çok kolaydır</p>
</body>
</html>
Bunuda yaptıkdan sonra artık bu HTML sayfasını çağırdınız zaman sanki CSS dosyası HTML sayfasının içinde tanımlanmış gibi davranacaktır
4 KULLANIM ŞEKİLLERİ
41 HTML Etiketleri İle Kullanım
Stilleri HTML'nin içinde kullanılan tüm etiketlerle birlikte kullanabilirsiniz Hatta <BODY> için bile stil kullanarak özellikler tanımlıyabilirsiniz Yanlız stilleri böyle kullanarak bir etiketi yanlızca bir still tanımlayabilir ve kullanabilirsiniz
<html>
<head>
<title> SAU WEB GROUP - Css</title>
<style type="text/css">
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz </h3>
</body>
</html>
Eğer isterseniz aynı anda birden çok etikete aynı stilli atıyabilirsiniz Etiketleri birbirinden ayırmak için aralarına virgül " , " konulur
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
h3 , h4 , p , a { font-family : arial; color : blue }
</style>
</head >
<body >
<h4 >WEB Okuluna Hoşgeldiniz </h4>
<h3 >CSS kullanımına örnek< /h3>
</body>
</html>
42 Seçiciler İle Kullanımı
Seçiciler yardımı ile bir etikete birden fazla still tanımlayabilir ve kullabilirsiniz İstediğiniz kadar çok secici tanımlayabilirsiniz İstenirse bir still birden fazla etikete aynı anda aktarılabilir
421 Sınıf Seçiciler
Mesala <P> etiketi için bir still tanımladınız fakat HTML sayfanızda kullandığınız her <p> etiketinin aynı olmasını istemiyorsanız o zaman sınıf seçiçiler tam sizin aradığınız birşey Aslında sınıf seçiciler ikiye ayrılıyor hangisini işinize yarıyorsa onu kullanabilirsiniz Birinci tipi sadece HTML etiketine bağımlı tanımlamaktır
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
h1 mavi { font-family : arial; color : blue }
h1 siyah { font-family : arial; color : black }
</style>
</head >
<body >
<h1 class="mavi" >CSS Kullanımına Örnek </h1>
<h1 class="siyah" >CSS Kullanımına Örnek </h1>
</body>
</html>
Bu birinci tipiydiBurada önce kullanmak istediğiniz etiketi belirtiyorsunuz Sonra stillin adını yazıyorsunuz tabi arasına nokta koymayı unutmayın daha sonra HTML sayfası içinde etiketi hangi stille kullanmak istiyorsan <h1 class="stilin_adi"> o stilin adını yazıyorsun Bu tanımlamada bu özellikleri <H1> etiketi dışında kullanamazsınız Fakat şimdi göstereceğim ikinci tip sınıf seçicide durum birazdaha farklı;
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
mavi { font-family : arial; color : blue }
siyah { font-family : arial; color : black }
</style>
</head >
<body >
<a class="siyah" >anasayfa</h3>
<h1 class="mavi" >CSS Kullanımına Örnek </h1>
<h3 class="siyah" >CSS Kullanımına Örnek </h3>
</body>
</html>
Görüldüğü gibi burada stilli tanımlarken etiketin ismini koymuyoruz Fakat noktayı koyuyoruz sonra bu stilli istediğimiz biryerde istediğimiz bir etiketle birlikte kullanabiliyoruz
422 ID Seçiciler
Bu seçicilerde stil isminin önüne # işareti konulur ve HTML sayfasının içinde herhangi bir etiketle birlikte (buna DIV,SPAN 'da dahil) adı ile çağrılarak kullanılabilirler Bunları çağırırken class değil id kullanılır
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
#mavi { font-size : 20pt; font-family : arial; color : blue }
#siyah { font-size : 11pt; font-family : arial; color : black }
</style>
</head >
<body >
<span id="mavi" >CSS Kullanımına Örnek </span>
<span id="siyah" >CSS Kullanımına Örnek </span>
</body>
</html>
43 <A> Etiketi İle Kullanımı
Bu kullanım sadece A etiketi ile kullanılabilir A etiketine ekstra özellikler kazandırırlar Bu özellikler toplam dört tanedir
link : Bu <a> etiketi içindeki link'in nasıl görüleceğini belirler
active :Bu ise link'in üzerine tıklandığı an alacağı şekli belirler
visited :Likin tıklandıktan sonra yani ziyaret edildikten sonraki halini belirler
hover on olarak bu özellik imleç(fare ile) linkin üzerine gelindiği an linkin alacağı hali belirlerBu özellik Netsacapr tarafından tanınmamaktadır
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
a { font-size : 20pt; font-family : arial; color : blue }
a : link { font-size : 11pt; font-family : arial; color : black }
a : active { font-size : 11pt; font-family : arial; color : red }
a : hover { font-size : 11pt; font-family : arial; color : blue }
a : visited { font-size : 11pt; font-family : arial; color : red }
</style>
</head >
<body >
<a href="#">Anasayfa < /a>
<a href="#">CSS Kullanımına Örnek < /a>
</body>
</html>
İstenirse seçicilerle birliktede kullanılabilirler
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
a menu {
font-size : 20pt;
font-family : arial; c
olor : blue }
a menu : link {
font-size : 11pt;
font-family : arial;
color : black }
a menu : active {
font-size : 11pt;
font-family : arial;
color : red }
a menu : hover {
font-size : 11pt;
font-family : arial;
color : blue }
a menu : visited {
font-size : 11pt;
font-family : arial;
color : red }
</style>
</head >
<body >
<a class="menu" href="#">Anasayfa < /a>
<a class="menu" href="#">CSS Kullanımına Örnek < /a>
</body>
</html>
5 DENETLENEBİLİR ÖZELLİKLER
Burada size CSS kullanarak denetliyebileceğiniz yani değiştirebileceğiniz özellikleri ve alabileceği değerleri anlatacam Önce size kolaylık olaması için özellikleri tablo içinde veriyorum
FONT ÖZELLİKLERİ TEXT ÖZELLİKLERİ BACKGROUND ÖZELLİKLERİ LIST ÖZELLİKLERİ
FONT-SIZE WORD-SPACING BACKGROUND-COLOR LIST-STYLE-TYPE
FONT-FAMILY LETTER-SPACING BACKGROUND-IMAGE LIST-STYLE-POSITION
FONT-WEIGHT LINE-HEIGHT BACKGROUND-REPEAT LIST-STYLE-IMAGE
FONT-STYLE TEXT-DECORATION BACKGROUND-ATTACHMENT
FONT-VARIANT TEXT-ALING BACKGROUND-POSITION
COLOR TEX-INDENT BACKGROUND
FONT BOX ÖZELLİKLERİ
MARGIN ÖZELLİKLERİ BORDER ÖZELLİKLERİ PADDING ÖZELLİKLERİ
MARGIN-BOTTOM BORDER-BOTTOM PADDING-BOTTOM
MARGIN-TOP BORDER-TOP PADDING-TOP
MARGIN-RIGHT BORDER-RIGHT PADDING-RIGHT
MARGIN-LEFT BORDER-LEFT PADDING-LEFT
BORDER-WIDTH
BORDER-STYLE
BORDER-COLOR
51 FONT Özellikleri
FONT-SİZE : fontun nekadar büyüklükte olacağını belirler
değerleri : xx-large | x-large | large | medium | small | x-small | xx-small | pt cinsinden değer
ilk değer : medium
FONT-FAMILY : fontun hangi tipite olacağını belirler
değerleri : fontun ismi
ilk değer : kullanıcının seçtiği font
FONT-WEIGHT : fontun kalınlığını belirler
değerleri : normal | bold | ligher | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
ilk değer : normal
FONT-STYLE : fontun stilini belirler
değerleri : normal | italic | oblique
ilk değer : normal
oblique : yazının yatık olmasını sağlar
FONT-VARIANT : Fontun küçük harf boyunda ama büyük harf olmasını sağlar
değerleri : normal | small-cops
ilk değer : normal
FONT : Bu özellik ile yukarıdaki tüm özellikler değiştirilebilir Mesela boyutunu değiştirmek istiyorsunuz ozaman font:12px yazmanız yeterli veya hem fontunu hemde boyunu değiştirmek istiyorsunuz Ozamanda font12px,arial veya font: arial,12px diyebilirsiniz Bunu daha çok bu özellikleri javascript kullanarak değiştirmek istediğimizde kullanacağız Çünkü javascript font-size ifadesini kabul etmiyor
COLOR : Fontun ne renk olacağını belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği
yazi { font-size : 10pt ; font-family : arial ; font-weight : bold ; font-style : italic ; font-variant : normal ; color : black }
52 TEXT Özellikleri
WORD-SPACING : Kelimelerin arasına konulmak istenen boşluğu ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal
LETTER-SPACING : Harfler arasındaki boşluk miktarını ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal
TEXT-DECORATION : Metni süslemede kullanılır
değerleri : none | underline | overline | line-through | blink
ilkdeğeri : none
underline : yazının altıçizgili olmasını sağlar
overline : yazının üstünün çizgili olmasını sağlar
line-trough : yazının ortasının çizgili olmasını sağlar
blik : yazının yanıp sönmesini sağlar
TEXT-TRANSFORM : Metnin büyük veya küçük harfe çevirmek için kullanılır
değerleri : capitalize | uppercase | lowercase | none
ilkdeğeri : none
capitalize : Yazıyı olduğu gibi bırakır
uppercase : yazıyı büyük arfe çevirir
lowercase : yazıyı küçük harfe çevirir
TEXT-ALING : Metni istenilen biryere bloklamada kullanılıyor
değerleri : left | right | center
ilkdeğeri : left
left : metni sola bloklar
right : metni sağa bloklar
center: metni ortalar
TEXT-INDENT : Yazının istenilen miktarda içierden başlamasını sağlar
değerleri : pt cinsinden değer
ilkdeğeri : 0
LINE-HEIGHT : Metnin satırları arasına istenilen miktarda boşluk bırakmayı sağlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal
metin { word-spacing : 10pt ; letter-spacing : 9pt ; line-height : 8pt ; text-decoration : none ; text-transform : capitalize ; text-aling : left ; text-indent : 5pt }
52 BACKGROUND Özellikleri
BACKGROUND-COLOR : Arka zeminin alacağı zemini belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği
BACKGROUND-IMAGE : Arka zemine resim yerleştirmeyi sağlar
değerleri : none | url ("dosyanın_ismi")
ilkdeğeri : none
BACKGROUND-REPEAT : Arka zemindeki resmi istenilen miktarda tekrarlar
değerleri : repeat | x-repeat | y-repeat | no-repeat
ilkdeğeri : repeat
repeat : Heryönde tekrar edilmesini sağlar
x-repeat : Sadece x ekseni üzerinde tekrarlar (soldan-sağa)
y-repeat : Sadece y ekseni üzerinde tekrarlar (yukardan-aşağı)
no-repeat : Tekrarlamaz
BACKGROUND-ATTECHMENT : Arka zeminin nasıl davranacağını belirler
değerleri : scroll | fixed
ilkdeğeri : scroll
scroll : Arka zeminin scroll ile birlikte hareket etmesini sağlar
fixed : Arka zeminin sabit kalmasını sağlar
BACKGROUND-POSITION : Arka zeminin yerini belirler
değerleri : left | center | right | top | bottom
ilkdeğeri : 0,0
BACKGROUND : Bu özellik aynı font taki gibidir
BODY { background-color : rgb(252,253,255) ; background-image : url ("zeminjpg") ; background-repeat : no-repeat ; background-attechment : fixed ; background-position : center ; }
54 LIST Özellikleri
LIST-STYLE-TYPE : Listede kullanulacak basamakların nasıl kullanılacağını belirler
değerleri : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none
ilkdeğeri : disc
disc : Her basamak içi dolu dairelerle başlar
circle : Her basamak içi boş dairelerle başlar
square : her basamak kare ile başlar
decimal : Her basamak 1,2,3,4 gibi sayılar alır
lower-roman : Her basamak i,ii,iii gibi küçük roma rakamları alır
upper-roman : Her basamak I,II,III gibi büyük roma rakamları alır
lower-alpha : Her basamak a,b,c gibi küçük harf alır
upper-alpha : Her basamak A,B,C gibi büyük harf alır
LIST-STYLE-POSITION : Listenin ikinci satırınından itbaren başlıyacağı yeri belirler
değerleri : outside | inside
ilkdeğeri : outside
outside : İkinci satır ve diğerlerinin birinci satırın hizasında olması sağlanır
inside : İkinci satır ve diğerlerinin birinci satırdan içerde başlamasını sağlar
LIST-STYLE-IMAGE : Listenin basamaklarına istenilen bir resim konulmasını sağlar
değerleri : none | url ("dosyanın_ismi")
ilkdeğeri : none
list { list-style-type : lower-alpha ; list-style-position : inside ; list-style-image : none ; }
55 BOX Özellikleri
Buaradaki özellikler genel olarak üç gruba ayrılmıştır (margin,box,padding) Burada margin en dışta yeralır Border ise yazının çevresine bir çizgi çizer ve margın'ın içindedir Padding ise yazının sınırlarını belirler ve border ile margin'in içindedir Bunları birde şekil üzerinde gösterim
Mesela web sayfası yazısını sol tarafını çizgiden (border) uzaklaştırmak istiyelim Yani yazı çizgiden birazdaha içerde başlasınOzaman padding-left özelliğini kullanmalıyız
MARGIN-BOTTOM : Margin'in aşagıdan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer
MARGIN-TOP : Margin'in yukarıdan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer
MARGIN-LEFT : Margin'in soldan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer
MARGIN-RIGHT : Margin'in sağdan nekadar boşluk bırakacağını belirler
değerleri : px cinsinden değer
BORDER-STYLE : Border çizgisini değiştirmek için kullanılır
değerleri : none | dotted | dashed | solid | double | groove | ridge | inset | outset
ilkdeğeri : solid
BORDER-WIDTH : Border çizgisinin kalınlığını belirler
değerleri : thin | medium | thick | length
ilkdeğeri : medium
BORDER-BOTTOM : Border'ın alt kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer
BORDER-TOP : Border'ın üst kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer
BORDER-LEFT : Border'ın sol kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer
BORDER-RIGHT : Border'ın sağ kısmı ile margin arasında kalan kısmı ayarlar
değerleri : px cinsinden değer
PADDING-BOTTOM : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer
PADDING -TOP : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer
PADDING -LEFT : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer
PADDING -RIGHT : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar
değerleri : px cinsinden değer
6 DIV İLE KULLANIMI
HTML deki bütün unsurları (metin,table,resim,çerçeve ) bu katmanın(DIV) üstüne koyup sayfada istediğiniz bir yere taşıyabilirsiniz Neler yapabileceğinizi veya istediğiniz bir ögeyi sayfanın istediğiniz yerine sadece kordinatlari değiştirerek koyabildiğinizi bir düşünsenize
POSITION : Katmanın HTML sayfası üzerindeki konumunun nasıl olacağını belirler
ABSOLUTE : Katmanın kendisine verilen üst ve sol kotdinatlara göre kesin olarak yerleştirir ve yeri diğer unsurlardan etkilenmez
RELATIVE : katmanın kendisine verilecek ölçüler kendinden önceki unsurun konumunun bittiği yerden başlar
STATIC : Katmanın kendisine verilen ölçüler HTML sayfasında nereye geliyorsa oraya yerleştirilir
TOP : katmanın üst kısımdan nekadar aşağı olacağı belirler
LEFT : katmanın sol kısımdan nekadar sağda olacağı belirler
HEIGHT : katmanın boyunun uzunluğu belirler
WIDTH : Katmanın eninin uzunluğunu belirler
Z-INDEX : Katmanın HTML sayfası üzerinde hangi katta duracağını belirler
OVERFLOW : Katmanın belirtilen boyutlara sığmaması durumunda ne yapacağını belirler
<div style= " position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 1 ; background-color:#ff9800">
<center>SAU WEB GROUP</center>
</div>
SAU WEB GROUP
Burada index numarsının önemini biraz anlatmak istiyorum Katmanlar sayfaya index numarasına göre yerleştirilirler Aslında yan yana yerleştirilirken önemli değil ama üst üste yerleştiriliyorlarsa önemliler Mesela iki tane katman olduğunu varsayalım Birincisinin numarası bir diğerinin iki ise ikinci birincinin üzerinde görülecektir
]
<div style= " position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 1 ; background-color:red">
<center>SAU WEB GROUP</center>
</div>
<div style= " position : absolute ; top : 250px ; left : 200px ; height : 50px ; width : 300px ; z-index : 2 ; background-color:blue">
<center>SAU WEB GROUP</center>
</div>
Cokmu uzun oLmus (:
