HTML Nesnelerine Stil Vermek

  • 13
  • (2)
  • (5)
  • 10 Oca 2018

Html nesnelerine style özelliği ile stil verilebilmektedir. Ancak bunun yerine bu stillerin CSS içerisinde id ve class olarak tanımlanarak kullanılması tercih edilen yöntemdir.


<div style="background-color:rgba(255, 220, 255, 1);
        width:200px;height:200px;border:1px solid #aaa;border-radius:4px;">
    <p style="font-family:Arial;font-size:12px;font-weight:bold;padding-left:3px;">Paragraf içeriği 1</p>
    <p style="font-family:Arial;font-size:12px;padding-left:3px;">Paragraf içeriği 2</p>
    <span style="font-family:Arial;font-size:10px;
        color:white;background-color:black;padding:3px;margin:2px;">Etiket 1</span>
    <span style="font-family:Arial;font-size:10px;
        color:white;background-color:black;padding:3px;margin:2px;">Etiket 2</span>
    <span style="font-family:Arial;font-size:10px;
        color:white;background-color:black;padding:3px;margin:2px;">Etiket 3</span>
</div>

Görünüm aşağıdaki gibi olacaktır.

Paragraf içeriği 1

Paragraf içeriği 2

Etiket 1 Etiket 2 Etiket 3

CSS özellikleri web sayfasındaki nesnelere çok sayıda stil verebilmeyi sağlar. Bazı özellikler şu şekilde listelenebilir.

Boyutlar ve Konumlarla Alakalı Özellikler

  • width özelliği genişliği belirler.
  • height özelliği yüksekliği belirler.
  • position özelliği konum türünü belirler.
  • Konum özellikleri için left, right, top, bottom özellikleri kullanılır. Ancak bu özelliklerin geçerli olması için position değeri absoulte, fixed veya relative olmalıdır.
  • left özelliği sola uzaklığı belirler.
  • right özelliği sağa uzaklığı belirler.
  • top özelliği üste uzaklığı belirler.
  • bottom özelliği alta uzaklığı belirler.
  • float özelliği kendisinden sonraki nesnelerin konumlarını belirler. Mesela float:left şeklinde değer vererek sonraki öğeleri alt satıra değil de sağa doğru dizebilirsiniz. Verildiği nesneyi de sola yaslayacaktır. float:right ise sağa yaslayacaktır.

Renkler ve Çerçeveler

  • color yazı rengini değiştirir.
  • background-color arka plan rengini değiştirir.
  • border-color çerçeve rengini değiştirir.
  • Konum özellikleri için left, right, top, bottom özellikleri kullanılır. Ancak bu özelliklerin geçerli olması için position değeri absoulte, fixed veya relative olmalıdır.
  • border:1px solid blue şeklinde 1 piksel kalınlığında düz ve mavi renkli bir çerçeve oluşturursunuz.
İlişkili İçerikler

HTML yapısı web sayfalarının temel iskeletini oluşturan bir dosya format biçimidir.

HTML elementlerine verilen style özelliği aslında CSS yapısı ile birebir aynıdır. Yazı içerisinde, elementler, class ve id özellikleri ile şekillendirmeyi inceleyebilirsiniz.

Paylaşın
Etiket Bulutu