08 – Html Style Attribute

Html style attribute html elemanlarına stil (görsel tasarım) eklemek için kullanılır. Örneğin bir yazı boyutu veya bir görselin boyutu rengi olabilir.

Uygulanış biçimi <etiketismi style=“anahtar : değer”> </etiketismi>

  <h1 style="color:blue; font-size:36px">Html Öğelerine Tasarım Ekleme</h1>

  <p style="color:red; font-size:26px">
    Merhaba, bu dersimizde html elemanlarına nasıl stil ekleyebiliriz görelim.
  </p> <br>

  <div style="background-color: green; width:200px; height:200px;">
    <p style="color:white">Bu bir kutu</p>    
  </div>

h1 ile bir başlık etiketi açtım ve style attribute kullanarak içerisine renginin kırmızı ve boyutunun da 26px olmasını söyledim.

Bir alt satıra geçerek <p> etiketi ile bir paragraf açtım. Yine <p> etiketi içerisine style attribute ile renginin kırmızı olmasını ve boyutununda 26 px olmasını söyledim. <p></p> etiketlerimin arasına istediğim yazıyı yazdım.

<p> etiketimin hemen yanında <br>etiketi ile bir satır boşluk bıraktım. Aksi halde alttaki kutum üstte çok yakınlaşmıştı.

Tekrardan bir alta indiğimde <div> elemanını ekledim. Bu aslında bir çok farklı şekillerde kullanabileceğimiz gibi bir alandır. Bir kutu, kapsayıcı gibi düşünebilirsiniz. Ben bu kutunun içerisinde <p> etiketim ile bu bir kutu diye yazı yazdım. Daha fazlasını da yapabiliriz.

Burada style attribute nasıl kullanacağımızı anlatmak istedim. Bunun çok daha geniş kapsamlı olanı css konusu apayrı bir konudur. Onu ayrı bir ders başlığı altında detaylı göreceğiz.

Yazı Rengi Değiştirme – color

Style attribute içerisinde color anahtar kelimesine bir renk değeri vererek metnin, yazının rengi değiştirilir. Örnek kullanımı style=”color: red;” şeklindedir.

Renk değeri ön tanımlı adı ile verilebilirken, rgb, rgba, hex, hsl, hsla gibi değerler ile de verilebilir.

  <p style="color:red;"> Merhaba Dünya</p> 
  <p style="color:rgb(76, 0, 255);"> Merhaba Dünya</p> 
  <p style="color:#ff00ff;"> Merhaba Dünya</p> 
  <p style="color:hsl(0, 100%, 50%);"> Merhaba Dünya</p> 

Arkaplan Rengi Değiştirme – background-color

Html öğesine eklenen style attribute içerisinde background-color anahtarına, renk değeri vererek arkaplan rengi değiştirilir. Örnek kullanımı style=”background-color: red;” şeklindedir.

Yine burada rgb, hex, hsl gibi renk değerleri kullanılabilir.

  <p style="color:red;"> Merhaba Dünya</p> 
  <p style="color:white; background-color:blue"> Merhaba Dünya</p> 
  <p style="background-color:rgb(76, 0, 255);"> Merhaba Dünya</p> 
  <p style="background-color:#ff00ff;"> Merhaba Dünya</p> 
  <p style="background-color:hsl(0, 100%, 50%);"> Merhaba Dünya</p> 

Yazı Boyutunu Değiştirme – font-size

font-size html yazı elemanlarının yazı büyüklüğünü ayarlamamızı sağlar. Bu değeri pixel olarak belirtebileceğimiz gibi %, em, rem, olarak ta belirtebiliriz. Örnek kullanımı style=”font-size: 38px;” şeklindedir.

Farklı kullanım örnekleri css derslerinin konusu olacaktır.

  <p style="font-size: 38px;"> Merhaba Dünya</p> 
  
  <p style="font-size: 200%;"> Merhaba Dünya</p>
  
  <p style="color:red; font-size:1.5rem;">Merhaba Dünya</p>
  
  <p style="font-size:2em;">Merhaba Dünya</p>
  

Yazı Tipini Değiştirme – font-family

font-family yazılan metnin font ailesini seçmemizi sağlar. Örnek kullanımı style=”font-family: fantasy;” şeklindedir. Buraya bir değer girilmediğinde varsayılan değerler aktarılmaktadır.

  <p style="font-family:fantasy; color:red; font-size:30px;">Merhaba Dünya</p>
  
  <p style="font-family:Franklin Gothic Medium; font-size:26px;">Merhaba Dünya</p>
  

Yazıyı Hizalama – text-align

Html öğesi içerisindeki yazının hizalamasını değiştirir. left yazıyı sola, right sağa ve center ise ortalayacaktır. Örnek kullanımı style=”text-align: center” şeklindedir.

  <p style="text-align:left;">Sola hizalanmış bir paragrafım</p>
  <p style="text-align:center;">Ortalanmış bir paragrafım</p>
  <p style="text-align:right;">Sağa hizalanmış bir paragrafım</p>

Özetlemek gerekirse burada style attribute ile ilgili örnekler yapmak istedim. style konusu çok geniş bir konu. Html içerisinde style kullanımını gördük ancak bu konu çok geniş kapsamlı. Bu konu esas olarak CSS derslerinde işleniyor.