HTML Stilleri (STYLE)
bu mavi renkli bir metindir
bu kırmızı renkli bir metindir
Her html elementi varsayılan bir stile (style) sahiptir. Örneğin yazı rengi (color) sihay, arkaplan rengi (background-color) beyaz varsayılır. Yani herhangi bir stil vermezsek, metnimiz bu renklerde olacaktır.
Bir html elemanının varsayılan stilini istenilen şekilde değiştirmek style özelliği ile mümkündür.
Aşağıdaki örnekte; sayfa stillerinden biri olan, arkaplan rengine (background-color), mavi (blue) değerini atadık ve arkaplanını mavi renk yapmış olduk:
<body style="background-color:blue">
<h1>bu bir başlıktır</h1>
<p>bu bir paragraftır</p>
</body>
<h1>bu bir başlıktır</h1>
<p>bu bir paragraftır</p>
</body>
Yukarıdaki kodlar, web tarayıcımızda şöyle görünecektir:
bu bir başlıktır
bu bir paragraftırHTML5 den önceki versiyonlarda arkaplan rengi, "bgcolor" özelliği ile atanırdı, fakat bgcolor özelliği HTML5'den sonra geçerliliğini yitirmiştir.
HTML Style Özelliğinin Kullanım Şekli
Bu özellik, hangi html elemanının stili değiştirilecekse o elemanın başlangıç tagının içine yerleştirilir. Kullanım kalıbı aşağıdaki gibidir:
<tag style="property:value">tag içeriği</tag> yani;
<tag style="yapı:değeri">tag içeriği</tag>
Örneğin bir paragarafın arkaplan renginin (background-color), kırmızı (red) olmasını isityorsak:
<p style="background-color:red">
Burada akraplan rengi kırmızı olan bir paragraf vardır
</p>
Burada akraplan rengi kırmızı olan bir paragraf vardır
</p>
Yukarıdaki kodlar, web tarayıcımızda şöyle görünecektir:
Burada akraplan rengi kırmızı olan bir paragraf vardır
Style özelliğinde belirtilen yapı (property), bir CSS yapısıdır. CSS yapıları hakkında detaylı bilgi, CSS derslerinde verilecektir.
HTML Text-Color Yapısı
color yapısı, bir metindeki yazının rengini belirler.
Aşağıda, yazılarının mavi renkli olmasını istediğimiz iki html elemanı vardır:
<h1 style="color:blue"> bu mavi bir başlıktır</h1>
<p style="color:blue"> bu mavi bir paragraftır.</p>
Yukarıdaki kodlar, web tarayıcımızda şöyle görünecektir:
font-family yapısı bir yazının font biçimini belirler.Aşağıda, yazılarının mavi renkli olmasını istediğimiz iki html elemanı vardır:
<h1 style="color:blue"> bu mavi bir başlıktır</h1>
<p style="color:blue"> bu mavi bir paragraftır.</p>
Yukarıdaki kodlar, web tarayıcımızda şöyle görünecektir:
bu mavi bir başlıktır
bu mavi bir paragraftır.
HTML Fontları
Aşağıda verdana ve courier font biçimleriyle yazılmış iki html elemanı vardır:
<h1 style="font-family:verdana">bu bir başlıktır</h1>
<p style="font-family:courier">bu bir paragraftır</p>
Font yapısı için eski versiyonlarda kullanılan <font> tagı HTML5'de geçerli değildir.
Yukarıdaki kodlar, web tarayıcımızda şöyle görünecektir:
bu bir başlıktır
bu bir paragraftır
HTML Metin Büyüklüğü
font-size yapısı bir html dökümanında yazıların büyüklüğünü ifade eder.
<h1 style="font-size:300%">bu bir başlıktır</h1>
<p style="font-size:160%">bu bir paragraftır</p>
Yukarıdaki örneklerde, başlık, varsayılan büyüklüğünden yüzde 300, paragraf ise yüzde 160 daha büyük olacak şekilde ayarlanmıştır.
Bu kodlar, web tarayıcımızda şöyle görünecektir:
bu bir başlıktır
bu bir paragraftır
Metin büyüklüğü, yüzde olarak belirlenmek zorunda değildir. Bunun yerine 12, 16 gibi tam sayılar da kullanılabilir. Bu sayılar, piksel olarak, belirli metin büyüklüklerine karşılık gelir.
HTML Metin Hizalama
text-align yapısı, bir htlm dökümanındaki metnin sayfaya göre hizalanmasını sağlar. center, left ve right değerleri sırasıyla; ortaya, sola ve sağa hizalamayı sağlar<h1 style="text-align:center">bu bir orta başlık</h1>
Bu kodlar, web tarayıcımızda şöyle görünecektir:
Hiç yorum yok:
Yorum Gönder