HTML Nesnelerine Stil Vermek
- 33
- (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 3CSS ö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çinposition
değeriabsoulte
,fixed
veyarelative
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. Meselafloat: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çinposition
değeriabsoulte
,fixed
veyarelative
olmalıdır. border:1px solid blue
şeklinde 1 piksel kalınlığında düz ve mavi renkli bir çerçeve oluşturursunuz.